Just one step away to complete from design

Dear Sir,

I have almost completed a form with Formularize v.5 in my web site but just a step away.
That is the too-wide coumn width that I dont know how to adjust.

I look into the \formulize\templates\css\style.php and formulize\include\elementdisplay.php and formulize\include\entriesdisplay.php but
found no clue.

Please see the screen snapshot and advise.

http://www.greenort.com/felix/element_width_1.gif

http://www.greenort.com/felix/element_width_2gif

Regards,

Felix Chen

P.S. I donated wih my wife's name Grace. I am happy to donate more if the issues can be resolved.

Comments

Thank you for the support!

Hello Felix, thanks for sharing. :)

Issues in the second screenshot, the extra space to the right of the captions in the form, can be altered in the stylesheets, it will be in different places depending if you are using the Formulize standalone version, or you added the Formulize module to your XOOPS or ImpressCMS website.

Basically, you want to look for the CSS instructions for the "head" class, possibly associated with the "outer" table class, or the "theme-form" class. I believe the width will be set to 50% and you could just remove the width setting entirely if you wish. Though that would affect other tables throughout your site using that class.

Alternatively, you could isolate it with a more specific CSS selector, so that you can alter the width of just the "head" cells in Formulize form tables. I think this would do the trick:

#formulizeform td.head {
width: auto;
}

The issue in the first screenshot is more tricky. I believe those textbox input elements are defaulting to a "size" attribute of 20, since there is no size and no css width applying to them, as far as I can tell.

There is a setting in the controls for the screen, on the admin side, where you can make the columns be whatever width they would be based on the size of text in them, however because you have the search boxes turned on, and they all have this size, then that setting won't have an effect. If you turn the search boxes off, and turn on the setting to set the columns to their natural size, then they will get narrower.

If you want to keep the search boxes, just have them narrower, then you have to make a judgement call, because the easiest thing to do is to just make the Formulize quicksearch textboxes smaller everywhere, not just on that page. That's the easiest solution. But the question is, how much smaller?

To do that, you can alter modules/formulize/include/entriesdisplay.php, look for this code:

$quickSearchBoxes[$cols[$i]]['search'] = "<input type=text $boxid name='search_" . $cols[$i] . "' value=\"$search_text\" $clear_help_javascript onchange=\"javascript:window.document.controls.ventry.value = '';\"></input>\n";

It should be in the drawSearches function.

Or something similar, that is responsible for the markup of the boxes.

You could add a size attribute there.

You could also add something to the Formulize CSS in modules/formulize/templates/css/formulize.css

Something like this might do the trick...

td.column input {
width: 1em;
}

But I'm not certain, I haven't tested that and I don't know if the version of Formulize you're using has precisely the same markup as the latest code I was looking at.

I hope this helps, let us know. We can dig deeper if necessary.

Good luck with the site! Thanks for your interest in Formulize. :)

--Julian

Just one step away to complete form design

Hi Julian,

thanks for your reply.

I am using Formularize v.5 module version in Xoops2.
Let me work on the second display issue first.

(http://www.greenort.com/felix/element_width_2.gif)

I searched text "theme-form" throughout the whole xoops2 site, including modules/formulize folder, and found two xo-theme-form occurances in include/formdisplay.php (line 81 and line 171).

Did I look at wrong file?

I firstly remove the width='100%' or reduce it to 50% or even 10%, but the result is the same.

I remove the lines containing width='100%'. The result is shown as
http://www.greenort.com/felix/element_width_3.gif

It seems good. But the entry area becomes too small. Besides, I need to check any side-effect.

And where in which file should I put the following text?

#formulizeform td.head {
width: auto;
}

Felix Chen

Try both CSS snippets in one file

Hi, I would start by adding both CSS bits to this file: modules/formulize/templates/css/formulize.css

I think that will do the trick. At least, a start.

formulize.css

Hi sir,

I cannot find formulize.css in v.5 module version.

Regards,

Felix Chen

try style.php

Looks like there's a style.php file instead. Try putting the CSS in there, it should have an effect. Question is, whether that's the right CSS or you need something a little different.