Hi guys,
I have a form with multiple edit boxes. I need to individually set the width of different text editor box controls. I want to assign different class to different edit boxes. However, Orbeon is putting the class on the outer <span> tag, instead of the actual control with. As such, I cannot change edit box style individually. The following is the sample code snippet. I've attached the full xhtml with this email. In this example, I have 2 classes: first_input and last_input. I wanted to assign different widths to these 2 classes. <xhtml:style type="text/css"> .first_input { width:300px; margin-bottom:2px; } .last_input { width:400px; margin-bottom:2px; } </xhtml:style> ... <input ref="instance('stuff')/first" class="first_input"><label class="first_label">First Name: </label></input> <xhtml:br/> <input ref="instance('stuff')/last" class="last_input"><label class="last_label">Last Name: </label></input> <xhtml:br/> </xhtml:style> The Orbeon generated output for the 2 input fields is the following: <label class="first_label xforms-label" id="xf-3$$l" for="xf-3$xforms-input-1">First Name: </label> <span id="xf-3" class="first_input xforms-control xforms-input"> <input id="xf-3$xforms-input-1" type="text" name="xf-3$xforms-input-1" value="Homer" class="xforms-input-input"> </span> <br/> <label class="last_label xforms-label" id="xf-5$$l" for="xf-5$xforms-input-1">Last Name: </label> <span id="xf-5" class="last_input xforms-control xforms-input"> <input id="xf-5$xforms-input-1" type="text" name="xf-5$xforms-input-1" value="Simpson" class="xforms-input-input"> </span> <br/> Notice the class first_input and last_input are within the <span>. Also notice the css for labels worked. What do I need to do to assign individual widths? I could assign width using internal Orbeon id "xf-3$xforms-input-1" and "xf-5$xforms-input-1" but that doesn't sound like the right thing to do. Thanks, James -- 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 test.xhtml (1K) Download Attachment |
Hi James,
If you assign a class style to the XForms control, it will be passed down to the ... I think the span around the html control. Now you have something something in the DOM you can target.
Let us know if that doesn't do it. --Hank
On Tue, Jun 21, 2011 at 5:01 PM, James Liang <[hidden email]> wrote: Hi guys, -- Hank Ratzesberger XMLWerks.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 |
In reply to this post by James Liang
On 22.06.2011 3:01, James Liang wrote:
> Hi guys, > > I have a form with multiple edit boxes. I need to individually set > the width of different text editor box controls. I want to assign > different class to different edit boxes. However, Orbeon is putting > the class on the outer<span> tag, instead of the actual control with. > As such, I cannot change edit box style individually. The following > is the sample code snippet. I've attached the full xhtml with this > email. > > In this example, I have 2 classes: first_input and last_input. I > wanted to assign different widths to these 2 classes. > > <xhtml:style type="text/css"> > .first_input { width:300px; margin-bottom:2px; } > .last_input { width:400px; margin-bottom:2px; } > </xhtml:style> <xhtml:style type="text/css"> .first_input input { width:300px; margin-bottom:2px; } .last_input input { width:400px; margin-bottom:2px; } </xhtml:style> Tambet -- 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 |
Cool, thank you.
I am new to CSS and after some digging around on w3schools.com, I realize you are using nesting CSS selector. Very nice! -James On Tue, Jun 21, 2011 at 11:08 PM, Tambet Matiisen <[hidden email]> wrote: > On 22.06.2011 3:01, James Liang wrote: >> >> Hi guys, >> >> I have a form with multiple edit boxes. I need to individually set >> the width of different text editor box controls. I want to assign >> different class to different edit boxes. However, Orbeon is putting >> the class on the outer<span> tag, instead of the actual control with. >> As such, I cannot change edit box style individually. The following >> is the sample code snippet. I've attached the full xhtml with this >> email. >> >> In this example, I have 2 classes: first_input and last_input. I >> wanted to assign different widths to these 2 classes. >> >> <xhtml:style type="text/css"> >> .first_input { width:300px; margin-bottom:2px; } >> .last_input { width:400px; margin-bottom:2px; } >> </xhtml:style> > > Try this: > <xhtml:style type="text/css"> > .first_input input { width:300px; margin-bottom:2px; } > .last_input input { width:400px; margin-bottom:2px; } > </xhtml:style> > > Tambet > > > -- > 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 > > -- 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 |
Free forum by Nabble | Edit this page |