Question

Hide and Show rule does not work when I apply CSS to align field?

Updated November 26, 2014

asked on November 25, 2014

Hi everyone

I have number of fields that needed to be aligned on the top of the page. To do that I simply applied simple CSS code to organize them side by side (

"#q150,#q2,#q81{display: inline-block; width: 13%; horizontal align:top; }#q189,#q190,#q191,#q192 {display: inline-block; width: 10%; horizontal align:top; }")

. Now I need to hide few of those fields when a item is selected in drop down list. I tried hide/show rule with the CSS the fields do not hide. If, I take away the CSS codes the rules work. CSS codes are crucial for this form and I am hopping for a way around this.

Appreciate the suggestions

0 0

Answer

SELECTED ANSWER

replied on November 26, 2014

Hiding a field works by setting the display style to "none" so when you then use CSS to create a rule with higher precedence that sets the display style to "inline-block," you are overriding the hide behavior. My suggestion would be to try to find a way to wrap the fields you want to hide with a section, and then hide or show this section with a field rule. (If the section headers don't fit in your form's aesthetic design, you can still make sections that have no header)

If you can't find a good way to design the form where the hidden fields can go in a separate section, then your other option would be to use javascript to code your own behavior that works like a field rule.

2 0

Replies

replied on November 26, 2014 • Show version history

Thanks for the direction Scot

I used {position: relative; float: left;} instead of inline-block and it solved the issue. This was suggested on another discussion by Olivier Baccino.

1 0

You are not allowed to follow up in this post.

Question

Question

Hide and Show rule does not work when I apply CSS to align field?

Answer

Replies

Sign in to reply to this post.