Orbeon Forms community mailing list

how to increase the width of a select1 dropdown

Classic

List

Threaded

11 messages Options

ilango_g

how to increase the width of a select1 dropdown

Hi
I have a select1 that takes in dynamic values. When the Xform loads initially there are no values in this drop-down and so the box width is small. If a value appears in the drop down the box increases in size suddenly to accommodate the size of the content inside. This is annoying. How do I just start out with a large enough size so that I do not get this jerky behaviour.

My solution was to use
.table-which-contains-this-dropdown .xforms-select1 label
{
width: 25em;
}

But I see no effect. What am I doing wrong? Thanks in advance.

fl.schmitt(ops-users)

Re: how to increase the width of a select1 dropdown

hi someperson,

> My solution was to use
> .table-which-contains-this-dropdown .xforms-select1 label
> {
> width: 25em;
> }
>
> But I see no effect. What am I doing wrong? Thanks in advance.

this should work, i think. Where did you put the CSS? In the Orbeon
Examples, the Xforms Controls Example uses a CSS definition embedded in
the view.xhtml. Here you can modify the size of the select1 combobox in
the selection controls -> single value selection by defining a new class
in the CSS definition (line 104 to 109) and adding a corresponding class
attribute to the combobox control in line 192.

HTH
florian

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

Erik Bruchez

Re: Re: how to increase the width of a select1 dropdown

Administrator

In that type of situation, use Firebug:

https://addons.mozilla.org/en-US/firefox/addon/1843

It's a tool you can't live with.

-Erik

On Mar 21, 2008, at 10:24 AM, Florian Schmitt wrote:

> hi someperson,
>
>> My solution was to use .table-which-contains-this-dropdown .xforms-
>> select1 label
>> {
>> width: 25em;
>> }
>> But I see no effect. What am I doing wrong? Thanks in advance.
>
> this should work, i think. Where did you put the CSS? In the Orbeon
> Examples, the Xforms Controls Example uses a CSS definition embedded
> in the view.xhtml. Here you can modify the size of the select1
> combobox in the selection controls -> single value selection by
> defining a new class in the CSS definition (line 104 to 109) and
> adding a corresponding class attribute to the combobox control in
> line 192.
>
> HTH
> florian
>
> --
> 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

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

ilango_g

Re: how to increase the width of a select1 dropdown

In reply to this post by fl.schmitt(ops-users)

Actually I used an external CSS that I put in the same folder as the Xform and then referenced that in the body of the XForm as:
<xhtml:link rel="stylesheet" href="myStyles.css" type="text/css" media="screen"/>

Thanks for pointing me out to the controls example as well. I will look at that now.

fs(ops-users) wrote

hi someperson,

> My solution was to use
> .table-which-contains-this-dropdown .xforms-select1 label
> {
> width: 25em;
> }
>
> But I see no effect. What am I doing wrong? Thanks in advance.

this should work, i think. Where did you put the CSS? In the Orbeon
Examples, the Xforms Controls Example uses a CSS definition embedded in
the view.xhtml. Here you can modify the size of the select1 combobox in
the selection controls -> single value selection by defining a new class
in the CSS definition (line 104 to 109) and adding a corresponding class
attribute to the combobox control in line 192.

HTH
florian

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

Erik Bruchez

Re: Re: how to increase the width of a select1 dropdown

Administrator

In reply to this post by Erik Bruchez

I meant of course that you can't live *without* Firebug ;-)

-Erik

Erik Bruchez wrote

In that type of situation, use Firebug:

https://addons.mozilla.org/en-US/firefox/addon/1843

It's a tool you can't live with.

-Erik

On Mar 21, 2008, at 10:24 AM, Florian Schmitt wrote:

> hi someperson,
>
>> My solution was to use .table-which-contains-this-dropdown .xforms-
>> select1 label
>> {
>> width: 25em;
>> }
>> But I see no effect. What am I doing wrong? Thanks in advance.
>
> this should work, i think. Where did you put the CSS? In the Orbeon
> Examples, the Xforms Controls Example uses a CSS definition embedded
> in the view.xhtml. Here you can modify the size of the select1
> combobox in the selection controls -> single value selection by
> defining a new class in the CSS definition (line 104 to 109) and
> adding a corresponding class attribute to the combobox control in
> line 192.
>
> HTH
> florian
>
> --
> You receive this message as a subscriber of the ops-users@ow2.org
> mailing list.
> To unsubscribe: mailto:ops-users-unsubscribe@ow2.org
> For general help: mailto:sympa@ow2.org?subject=help
> OW2 mailing lists service home page: http://www.ow2.org/wws

--
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/

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

fl.schmitt(ops-users)

Re: Re: how to increase the width of a select1 dropdown

In reply to this post by ilango_g

hi someperson,

> Actually I used an external CSS that I put in the same folder as the Xform
> and then referenced that in the body of the XForm as:
> <xhtml:link rel="stylesheet" href="myStyles.css" type="text/css"
> media="screen"/>

I'm not sure whether this way to reference a CSS file really works - as Eric has
mentioned, you could use the firebug extension to check which CSS files are
loaded and which CSS rules are applied to which HTML element. If the CSS file
isn't loaded at all, this may be caused by the URL rewriting done by the XForms
engine.

HTH
florian

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

ilango_g

Re: how to increase the width of a select1 dropdown

In reply to this post by fl.schmitt(ops-users)

Did you refer to the following lines in xforms-controls?

<xhtml:style type="text/css">
.input input { width: 20em; }
.password { width: 20em; }
.textarea { height: 6em; width: 20em; }
.widget-tab-panel { padding-top: 1em; }
.widget-tabs { width: 50em; }
</xhtml:style>

fs(ops-users) wrote

hi someperson,

> My solution was to use
> .table-which-contains-this-dropdown .xforms-select1 label
> {
> width: 25em;
> }
>
> But I see no effect. What am I doing wrong? Thanks in advance.

this should work, i think. Where did you put the CSS? In the Orbeon
Examples, the Xforms Controls Example uses a CSS definition embedded in
the view.xhtml. Here you can modify the size of the select1 combobox in
the selection controls -> single value selection by defining a new class
in the CSS definition (line 104 to 109) and adding a corresponding class
attribute to the combobox control in line 192.

HTH
florian

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

fl.schmitt(ops-users)

Re: Re: how to increase the width of a select1 dropdown

hi someperson,

> Did you refer to the following lines in xforms-controls?
>
> <xhtml:style type="text/css">
> .input input { width: 20em; }
> .password { width: 20em; }
> .textarea { height: 6em; width: 20em; }
> .widget-tab-panel { padding-top: 1em; }
> .widget-tabs { width: 50em; }
> </xhtml:style>

yes, exactly :-)

florian

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

ilango_g

Re: how to increase the width of a select1 dropdown

In reply to this post by fl.schmitt(ops-users)

I am trying to test the behaviour of the select1 in xforms-controls. Here are the relevant lines of code in xforms-controls.

<xforms:select1 ref="carrier" appearance="minimal" navindex="7">
<xforms:label class="fixed-width"/>
<xforms:itemset nodeset="instance('carriers-instance')/carrier">
<xforms:label ref="label"/>
<xforms:value ref="@value"/>
</xforms:itemset>
</xforms:select1>

<xforms:select1 ref="carrier" appearance="minimal" navindex="7">

Where do you suggest I put the new CSS class in? You did give me clear directions, but I am kind of lost. Should I put the class on the xforms:itemset line as
<xforms:itemset nodeset="instance('carriers-instance')/carrier" <b>class="test-select1-size">

fs(ops-users) wrote

hi someperson,

> My solution was to use
> .table-which-contains-this-dropdown .xforms-select1 label
> {
> width: 25em;
> }
>
> But I see no effect. What am I doing wrong? Thanks in advance.

this should work, i think. Where did you put the CSS? In the Orbeon
Examples, the Xforms Controls Example uses a CSS definition embedded in
the view.xhtml. Here you can modify the size of the select1 combobox in
the selection controls -> single value selection by defining a new class
in the CSS definition (line 104 to 109) and adding a corresponding class
attribute to the combobox control in line 192.

HTH
florian

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

ilango_g

Re: Re: how to increase the width of a select1 dropdown

In reply to this post by fl.schmitt(ops-users)

I had to place the CSS inside the form and then it worked. But the "select1" specific CSS did not work, because I did not see any change to my drop down box.

fs(ops-users) wrote

hi someperson,

> Did you refer to the following lines in xforms-controls?
>
> <xhtml:style type="text/css">
> .input input { width: 20em; }
> .password { width: 20em; }
> .textarea { height: 6em; width: 20em; }
> .widget-tab-panel { padding-top: 1em; }
> .widget-tabs { width: 50em; }
> </xhtml:style>

yes, exactly :-)

florian

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

fl.schmitt(ops-users)

Re: Re: how to increase the width of a select1 dropdown

In reply to this post by ilango_g

hi someperson,

> Where do you suggest I put the new CSS class in? You did give me clear
> directions, but I am kind of lost. Should I put the class on the
> xforms:itemset line as
> <xforms:itemset nodeset="instance('carriers-instance')/carrier"
> class="test-select1-size">

no, into the xforms:select1:
<xforms:select1 ref="carrier" appearance="minimal" navindex="7" class="width25em">

for a css definition

<xhtml:style type="text/css">
.input input { width: 20em; }
.password { width: 20em; }
.textarea { height: 6em; width: 20em; }
.widget-tab-panel { padding-top: 1em; }
.widget-tabs { width: 50em; }
.width25em { width: 25em; }
</xhtml:style>

Btw, 25em is quite broad :-)

HTH
florian

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