Tabs and Slides screwing up my Form layout

[Mbellotti]

If someone can help me fix this I may seriously kiss them

I've been using Fabrik to put together nice little company profile pages for a website (like so: http://www.smallhandsfund.org/backend/index.php?option=com_content&task=view&id=1&Itemid=1) there's just one problem. To keep the data orderly and neat I'm using joomla works' Tabs and Slides plugin and this plugin for some reason I can't figure out screws up the table cell alignments on the Form layout. If you look at the page linked, you'll notice that the label and elements don't match up straight ... I could live with this, but scroll down and notice that in the second form insert all the text is in tiny columns.

Obviously it can't stay that way :/ But otherwise this is exactly how I want the profiles to look, so I'd like to keep using the tabs. Any ideas on how to fix this issue?

Using Fabrik 1.0.6 on Joomla! 1.0.15, the template for the form is "Mint" just with the colors changed. I've attached the mambot in question as well.

 

[cheesegrits]

It's all in the CSS ...

The vertical alignment issue is because the .readonly class has a 5px padding, but the .fabrikLabel doesn't.

The column widths on the stuff further down the page is probably because .readonly has a width of 100px.

Do you use FireFox? The best way to see what CSS styling is having what effect is to run FireFox with FireBug installed, and 'inspect' things. FireBug will show you the entire CSS inheritance list for any object on the page.

One issue you may run in to is that you are using two different form templates on the same page. So your viewOnly version of the CSS could be overriding the default used in the Tabs. The way round this is to use descendent selectors. So in the viewOnly template, you can specifically set styles ONLY for that form by specifying things like ...

form[name=fabrik1] .readonly {
width=300px;
}

... which should only apply that change to .readonly objects inside the form named 'form1'. Again, FireFox with FireBug is the best tool for working out what things like names and id's are set to.

I'm pretty sure you should be able to style things properly just by playing with the CSS in your two templates.

-- hugh

 

[Mbellotti]

Wow ... actually it looks like all I needed to do was set all the Forms to the same Template and that fixed everything Thanks so much Hugh!

:-*