Element height

[peppe10]

hello

In a module i have elements that contain a lot of cascading text as in the attached file

How can I fix the height and width of the field?
Thank you

 

[cheesegrits]

With a custom CSS file, custom_css.php in the template folder.

If you point me at the page, I can tell you the class names to use.

-- hugh

 

[peppe10]

thnak you
http://www.codiceconcorsipubblici.org/foia/richieste.html
tab OBBLIGHI

 

[cheesegrits]

OK, so are you talking about the width of the inputs themselves, ie. the way all of them are at 100% width of the container (which is from your theme3167 template CSS, which is adding the input-block-level class to all inputs, and setting that class to 100% width.

Or do you mean the "overflow" in the dropdowns when you select an option?

If so, turns out there isn't a way to do this that works on all browsers. You should be able to simply apply a width style attribute to the options, but that doesn't work in Chrome.

It looks like the only way to do it in Chrome is to brute-force it, by running some Javascript to shorten the option text.

So you'd have to add a ./components/com_fabrik/js/form_X.js file (where X is your numeric form ID), and do something like this:

jQuery(document).ready(function(){
    jQuery('.fabrikElement option').text(function(i, text) {
        if (text.length > 100) {
            return text.substr(0, 100) + '...';
        }
    });
});

-- hugh

 

[peppe10]

By inserting this file, modify only the fields in the OBBLIGHI tab, or the height of all fields in the form?

 

[peppe10]

I entered the code in the file, but the result does not change. you can check?

 

[cheesegrits]

I don't see that code in form_74.js, just some unrelated stuff about doing date handling (addDays).

-- hugh

 

[peppe10]

in the file from_74.js

function addDays(el) {
// get initial date from element
var initialDate = el.form.formElements.get('accesso_civico___data_ricevuta_pec').getValue();
// get days to add from element
var days = el.form.formElements.get('accesso_civico___giorni').getValue();
// create new date object from initial date
var result = new Date(initialDate);
// add days to date
result.setDate(result.getDate() + days.toInt());
// set final date element to formatted result
el.form.formElements.get('accesso_civico___data_finale').update(result.format('%d-%m-%Y'));
var initialDate = el.form.formElements.get('accesso_civico___data_finale').getValue();
// get days to add from element
var days = el.form.formElements.get('accesso_civico___giorni_controinteressati').getValue();
// create new date object from initial date
var result = new Date(initialDate);
// add days to date
result.setDate(result.getDate() + days.toInt());
// set final date element to formatted result
el.form.formElements.get('accesso_civico___data_in_cui_la_pa_deve_rispondere_se_ci_sono_controinteressati').update(result.format('%d-%m-%Y'));
}
jQuery(document).ready(function(){
jQuery('.fabrikElement option').text(function(i, text) {
if (text.length > 100) {
return text.substr(0, 100) + '...';
}
});
});



it's correct?

can you see?

 

[peppe10]

How could I fix it?

 

[peppe10]

Some solution?

 

[troester]

How could I fix it?

Fix what?

 

[cheesegrits]

Ah, OK, forgot those are in CDD's, so the otpions won't exist on page load, we need to look at them when the CDD updates:

requirejs(['fab/fabrik'], function() {
    Fabrik.addEvent('fabrik.cdd.update', function(el) {
        jQuery('#' + el.element.id + ' option').text(function(i, text) {
            if (text.length > 100) {
                return text.substr(0, 100) + '...';
            }
        });
    });
});

-- hugh

 

[peppe10]

I changed templates, but the width of the fields did not fit. how to proceed?
http://www.codiceconcorsipubblici.org/foia/richieste.html

 

[troester]

You have set your element(s) to input-xxlarge which is 530px in Protostar (static).
Use span12 in element settings or set Protostar template to "fluid" (Advanced)

 

[peppe10]

now the file from_74.js

function addDays(el) {
// get initial date from element
var initialDate = el.form.formElements.get('accesso_civico___data_ricevuta_pec').getValue();
// get days to add from element
var days = el.form.formElements.get('accesso_civico___giorni').getValue();
// create new date object from initial date
var result = new Date(initialDate);
// add days to date
result.setDate(result.getDate() + days.toInt());
// set final date element to formatted result
el.form.formElements.get('accesso_civico___data_finale').update(result.format('%d-%m-%Y'));
var initialDate = el.form.formElements.get('accesso_civico___data_finale').getValue();
// get days to add from element
var days = el.form.formElements.get('accesso_civico___giorni_controinteressati').getValue();
// create new date object from initial date
var result = new Date(initialDate);
// add days to date
result.setDate(result.getDate() + days.toInt());
// set final date element to formatted result
el.form.formElements.get('accesso_civico___data_in_cui_la_pa_deve_rispondere_se_ci_sono_controinteressati').update(result.format('%d-%m-%Y'));
}
jQuery(document).ready(function(){
jQuery('.fabrikElement option').text(function(i, text) {
if (text.length > 100) {
return text.substr(0, 100) + '...';
}
});
});

Which code should I enter to display the fields correctly?

 

[cheesegrits]

Did you try adding the code I gave you in post #12 to your file?

-- hugh

 

[peppe10]

yes
http://www.codiceconcorsipubblici.org/foia/richieste.html

I added the code as follows:
function addDays(el) {
// get initial date from element
var initialDate = el.form.formElements.get('accesso_civico___data_ricevuta_pec').getValue();
// get days to add from element
var days = el.form.formElements.get('accesso_civico___giorni').getValue();
// create new date object from initial date
var result = new Date(initialDate);
// add days to date
result.setDate(result.getDate() + days.toInt());
// set final date element to formatted result
el.form.formElements.get('accesso_civico___data_finale').update(result.format('%d-%m-%Y'));
var initialDate = el.form.formElements.get('accesso_civico___data_finale').getValue();
// get days to add from element
var days = el.form.formElements.get('accesso_civico___giorni_controinteressati').getValue();
// create new date object from initial date
var result = new Date(initialDate);
// add days to date
result.setDate(result.getDate() + days.toInt());
// set final date element to formatted result
el.form.formElements.get('accesso_civico___data_in_cui_la_pa_deve_rispondere_se_ci_sono_controinteressati').update(result.format('%d-%m-%Y'));
}
jQuery(document).ready(function(){
jQuery('.fabrikElement option').text(function(i, text) {
if (text.length > 100) {
return text.substr(0, 100) + '...';
}
});
});



does not work. Is there a mistake?

 

[troester]

I think in your real form_74.js (not the code you are posting^^) there's a ] missing

requirejs(['fab/fabrik'], function() {

http://fabrikar.com/forums/index.php?wiki/javascript/#forms

 

[cheesegrits]

I've fixed that in my post.

And I now have a new laptop that doesn't have the dodgy keys. On my old one, the k and ] keys only worked about half the time.

-- hugh

 

[peppe10]

The code now works. But you see the dots ... Can not go head to head instead of dots ???