cannot css style individual input

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

cannot css style individual input

James Liang
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
Reply | Threaded
Open this post in threaded view
|

Re: cannot css style individual input

Hank Ratzesberger-3
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,

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




--
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
Reply | Threaded
Open this post in threaded view
|

Re: cannot css style individual input

Tambet Matiisen
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>
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
Reply | Threaded
Open this post in threaded view
|

Re: Re: cannot css style individual input

James Liang
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