Cannot set the width and height for textarea element

[sales2010]

Hello,

Using latest version from Github, i cannot set desired width and height values for textarea element. Work only if the option "WYSIWYG Editor" is activated.

Thank you

 

[margarett]

Hi

I also verify this. But it's not the only case. I think it is a CSS conflict...
Firebug shows that the "cols" and "rows" properties are passed to the element:

<textarea id="nota_de_devolu___textarea_test" class="fabrikinput inputbox" rows="6" cols="100" name="nota_de_devolu___textarea_test"></textarea>

It produces no difference from 40/6, or 500/6, whatever...
BUT... changing "Height" DOES produce results, as the "rows" property is in fact interpreted and the textarea gets higher. But the width seems pretty much fixed.

The same exact behavior happens with a "field" element. We can set a "Width" property, that translates to:

<input id="nota_de_devolu___nd_cliente" class="input-medium fabrikinput inputbox text" type="text" value="" maxlength="100" size="75" name="nota_de_devolu___nd_cliente">

("size" property)
But this is probably overriten by CSS because the width of the input box is always the same.

 

[jfquestiaux]

With the Bootstrap template, the sizes of the <input> and <textarea> are set by the bootstrap.css file. You have to override these properties to change the sizes.

 

[margarett]

Hi.

I see what you mean, but I think it makes no sense... If CSS will overwrite the "size" property, then you should not be allowed to set the element property, since it will have no effect.
Instead of the "size" property, the element could have a "style="width:20em". This would work (just tested with firebug!) and still keep the element setting. This makes it much easier to set than to change CSS manually...

Just a thought

 

[margarett]

And since I like to dig into lines of code that I don't know nothing about I tried to find where the heck is the layout written but can't seem to find it

Where do elements become "<input id ....." ?

 

[margarett]

Based on what I *think* is OK for the width, I found a solution.
In plugins\fabrik_element\textarea\textarea.php
Find:

            $str .= "name=\"$name\" id=\"" . $id . "\" cols=\"$cols\" rows=\"$rows\">" . $value . "</textarea>\n";

Replace with:

            if ($cols != 0)
                $str .= "name=\"$name\" id=\"" . $id . "\" style=\"width:" . $cols . "em\" rows=\"$rows\">" . $value . "</textarea>\n";
            else
                $str .= "name=\"$name\" id=\"" . $id . "\" style=\"width:auto\" rows=\"$rows\">" . $value . "</textarea>\n";

And now the width setting works What do you think?

 

[rob]

The code was taken fro Joomla 2.5 where we were using the width/height, and as the code needs to be backwards compatible we have to keep those options in, but as Jfq says in bootstrap the width should be designated by the class (http://twitter.github.com/bootstrap/base-css.html#forms) e.g. input-large. I've not tested but I think using the classes would make more sense within the context of a responsive template, as 'large' for a web page would not be the same width as 'large' on a smartphone.

So I've re-jigged things so that we also have the bootstrap class drop down option, along with better explainatory hover text over the elements explaining when which option is applied (ie Joomla 2.5 uses the width setting and Joomla 3 uses the bootstrap class)

 

[sales2010]

Ok, now there is another problem, the new entered values for both fields, are not changed after saving the form.

Tested with Firefox and Chrome, in IE9 i cannot save the values (nothing happen after i press the Save or Save & close button, only the Close button work fine)

 

[sales2010]

One more problem with the textarea element, this time in a repeat group. When i press the + button to add a new group, i see this error:

Timp: 3/26/2013 11:02:46 AM
Eroare: TypeError: e is null
Fi?ier surs?: http://salesintranet3/aplicatii/media/com_fabrik/js/form-min.js
R?ndul: 1

Also, if i activate the WYSIWYG editor, i will get this error and i cannot type anything in the second textarea element (work fine for the textarea element from the first group)

Timp: 3/26/2013 11:08:46 AM
Eroare: TypeError: d.getElement(...) is null
Fi?ier surs?: http://salesintranet3/aplicatii/plugins/fabrik_element/textarea/textarea-min.js
R?ndul: 1

 

[margarett]

Ok, now there is another problem, the new entered values for both fields, are not changed after saving the form.

I confirm a "strange" behavior here. I use J!3 so Width is now irrelevant but, no matter what I write there, it always shows "0".
The Height is even more strange... It is effective (if I write 3 the textarea height becomes 3) but the element properties shows 10 again, after I save.

I don't know if this is what you mean. My buttons do work fine.

One more problem with the textarea element, this time in a repeat group. When i press the + button to add a new group, i see this error:

Timp: 3/26/2013 11:02:46 AM
Eroare: TypeError: e is null
Fi?ier surs?: http://salesintranet3/aplicatii/media/com_fabrik/js/form-min.js
R?ndul: 1

I don't get this error here...


edit: I see why is the properties "aparently" not updated... Looking at phpmyadmin, the element in table "j_elements" shows the column "height" with value 10. But the column "params" shows:

{"bootstrap_class":"input-xxlarge","width":"0","height":"4","textarea_placeholder":"","use_wysiwyg":"0","textarea-showmax":"0","textarea-maxlength":"255","textarea_limit_type":"char","textarea-tagify":"0","textarea_tagifyurl":"","textarea-truncate":"0","textarea-hover":"1","textarea_hover_location":"top","show_in_rss_feed":"0","show_label_in_rss_feed":"0","use_as_fake_key":"0","use_as_rss_enclosure":"0","rollover":"","tipseval":"0","tipsoverelement":"0","tiplocation":"top","labelindetails":"1","labelinlist":"0","comment":"","view_access":"1","list_view_access":"1","encrypt":"0","can_order":"0","alt_list_heading":"","custom_link":"","custom_link_indetails":"1","use_as_row_class":"0","include_in_list_query":"1","always_render":"0","icon_folder":"0","icon_hovertext":"1","icon_file":"","filter_length":"20","filter_access":"1","full_words_only":"0","filter_required":"0","filter_build_method":"0","filter_groupby":"text","inc_in_adv_search":"1","filter_class":"input-medium","tablecss_header_class":"","tablecss_header":"","tablecss_cell_class":"","tablecss_cell":"","sum_on":"0","sum_label":"Sum","sum_access":"5","sum_split":"","avg_on":"0","avg_label":"Average","avg_access":"5","avg_round":"0","avg_split":"","median_on":"0","median_label":"Median","median_access":"5","median_split":"","count_on":"0","count_label":"Count","count_condition":"","count_access":"5","count_split":"","custom_calc_on":"0","custom_calc_label":"Custom","custom_calc_query":"","custom_calc_access":"5","custom_calc_split":"","custom_calc_php":"","validations":[]}

Meaning (probably) that when you set the parameters it updates the "params" column but, when the field is loaded for modification, it reads the "height" column (and, of course, same for "width")
edit2: confirmed. If I change the "height" column manually in phpmyadmin, that value is loaded to the element configuration when modifying it

 

[rob]

Ok, now there is another problem, the new entered values for both fields, are not changed after saving the form.

Woops that should be fixed.

One more problem with the textarea element, this time in a repeat group. When i press the + button to add a new group, i see this error:

I don't see this either - does it happen if you unpublish all elements in the group apart from the textarea?

Can you turn on Fabrik debug = javascript to load the uncompressed files so that we know what line the error is really on.

Also, if i activate the WYSIWYG editor, i will get this error and i cannot type anything in the second textarea element (work fine for the textarea element from the first group)

Ok I see that one - fix should be available in github

-Rob

 

[sales2010]

ok, the problem seems to be solved for wysiwyg but without visual editor enabled, the problem still exist, cannot increase width or height for textarea.

 

[sales2010]

Sorry, my mistake, i forgot to set the Bootstrap class to input-xlarge