CSS is incorrectly overriding behavior of switch element

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

CSS is incorrectly overriding behavior of switch element

Pieter Hartog
I am using Orbeon Forms 3.6.0.200806051534 (i.e. nightly build)

I was trying to use the switch element to hide and display certain groups as follows:
<switch>
  <case id="1">
    <group><label>group1</label>
      <input ...>...</input>
      <textarea ....>..</textarea>
    </group>
  </case>
</switch>

At the same time, I was using this CSS style sheet:
        .xforms-group {display: block; border-top:thin solid}
        .xforms-group  .xforms-group {position:relative; left:3%; top:5%}
        .xforms-repeat-delimiter {display: block;}
        .xforms-textarea {display: block; width:80%}


I found two problems with this combination of switch and CSS:
- The only thing that toggled on and off was the <label> element value ('group1' in my example), but the rest of the input fields always remained visible.
- after I commented out the group elements, it had a problem with the textarea element; even though the case was toggled off, the textarea element still showed (without field label)

When I commented out my CSS, the switch worked as expected.

Are these bugs, or am I doing something wrong? I wouldn't think CSS should override the switch behavior at any time, should it?
Reply | Threaded
Open this post in threaded view
|

Re: CSS is incorrectly overriding behavior of switch element

Erik Bruchez
Administrator
Peter,

Orbeon Forms uses CSS classes to control the visibility of UI  
elements, instead of directly modifying the elements' attributes. This  
has some benefits, but in this particular example can also lead to  
some confusion.

I am not sure if it is really to be considered a bug or not ;-) In  
general, I would say that you shouldn't touch the xforms-repeat-
delimiter class, in particular: it is for internal use only.

You would be better off nesting a <div> within <group> and then use  
CSS rules to control the appearance of the <div> element. This will be  
much safer.

-Erik

On Jun 24, 2008, at 2:49 AM, Pieter Hartog wrote:

>
> I am using Orbeon Forms 3.6.0.200806051534 (i.e. nightly build)
>
> I was trying to use the switch element to hide and display certain  
> groups as
> follows:
> <switch>
>  <case id="1">
>    <group><label>group1</label>
>      <input ...>...</input>
>      <textarea ....>..</textarea>
>    </group>
>  </case>
> </switch>
>
> At the same time, I was using this CSS style sheet:
>        .xforms-group {display: block; border-top:thin solid}
>        .xforms-group  .xforms-group {position:relative; left:3%; top:
> 5%}
>        .xforms-repeat-delimiter {display: block;}
>        .xforms-textarea {display: block; width:80%}
>
>
> I found two problems with this combination of switch and CSS:
> - The only thing that toggled on and off was the <label> element value
> ('group1' in my example), but the rest of the input fields always  
> remained
> visible.
> - after I commented out the group elements, it had a problem with the
> textarea element; even though the case was toggled off, the textarea  
> element
> still showed (without field label)
>
> When I commented out my CSS, the switch worked as expected.
>
> Are these bugs, or am I doing something wrong? I wouldn't think CSS  
> should
> override the switch behavior at any time, should it?
> --
> View this message in context: http://www.nabble.com/CSS-is-incorrectly-overriding-behavior-of-switch-element-tp18087618p18087618.html
> Sent from the ObjectWeb OPS - Users mailing list archive at  
> Nabble.com.
--
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws