setting style of dynamic options

Discussion in 'Javascript' started by netclectic@hotmail.com, Nov 12, 2004.

  1. Guest

    I'm dynamically adding options to a select list in javascript and i
    need to be able to set the height of the option, but setting
    style.height has not effect, I also tried style.pixelHeight but no
    joy.

    i'm doing something like this :)

    var selectControl = document.getElementById('MySelect');
    var el = document.createElement('option');
    el.value = "some value";
    el.style.height = "500";
    selectControl.appendChild(el);


    any ideas?
     
    , Nov 12, 2004
    #1
    1. Advertising

  2. Mick White Guest

    wrote:
    > I'm dynamically adding options to a select list in javascript and i
    > need to be able to set the height of the option, but setting
    > style.height has not effect, I also tried style.pixelHeight but no
    > joy.
    >
    > i'm doing something like this :)
    >
    > var selectControl = document.getElementById('MySelect');
    > var el = document.createElement('option');
    > el.value = "some value";
    > el.style.height = "500";
    > selectControl.appendChild(el);
    >
    >
    > any ideas?


    500 what? Pixels?
    And why no "el.text"?
    Mick
     
    Mick White, Nov 12, 2004
    #2
    1. Advertising

  3. RobB Guest

    wrote in message news:<>...
    > I'm dynamically adding options to a select list in javascript and i
    > need to be able to set the height of the option, but setting
    > style.height has not effect, I also tried style.pixelHeight but no
    > joy.
    >
    > i'm doing something like this :)
    >
    > var selectControl = document.getElementById('MySelect');
    > var el = document.createElement('option');
    > el.value = "some value";
    > el.style.height = "500";
    > selectControl.appendChild(el);
    >
    >
    > any ideas?


    el.style.height = "500px"; //tall option!
     
    RobB, Nov 12, 2004
    #3
  4. RobG Guest

    wrote:
    > I'm dynamically adding options to a select list in javascript and i
    > need to be able to set the height of the option, but setting
    > style.height has not effect, I also tried style.pixelHeight but no
    > joy.
    >
    > i'm doing something like this :)
    >
    > var selectControl = document.getElementById('MySelect');
    > var el = document.createElement('option');
    > el.value = "some value";
    > el.style.height = "500";
    > selectControl.appendChild(el);
    >
    >
    > any ideas?


    You control the style of an option from the select element it's nested
    inside. If you are trying to control the size of the option font, use
    a style on the select:

    <form...>
    <select style="font-size: 12pt;">
    <option ...>...</option>
    ...

    Naturally you can also use a CSS class rather than an in-line style.

    If you are trying to control the height of the box that the options are
    displayed inside, use the "size" attribute of the select element:

    <form...>
    <select style="font-size: 12pt;" size="4">
    <option ...>...</option>
    ...

    "size" refers to the number of options displayed, so you may not want
    to use 500.

    More information can be found here:

    <URL: http://www.w3.org/TR/html4/interact/forms.html#h-17.6>

    Cheers, Rob.
     
    RobG, Nov 14, 2004
    #4
  5. RobB Guest

    RobG <> wrote in message news:<PNRld.673$>...
    > wrote:
    > > I'm dynamically adding options to a select list in javascript and i
    > > need to be able to set the height of the option, but setting
    > > style.height has not effect, I also tried style.pixelHeight but no
    > > joy.
    > >
    > > i'm doing something like this :)
    > >
    > > var selectControl = document.getElementById('MySelect');
    > > var el = document.createElement('option');
    > > el.value = "some value";
    > > el.style.height = "500";
    > > selectControl.appendChild(el);
    > >
    > >
    > > any ideas?

    >
    > You control the style of an option from the select element it's nested
    > inside. If you are trying to control the size of the option font, use
    > a style on the select:
    >
    > <form...>
    > <select style="font-size: 12pt;">
    > <option ...>...</option>
    > ...
    >
    > Naturally you can also use a CSS class rather than an in-line style.
    >
    > If you are trying to control the height of the box that the options are
    > displayed inside, use the "size" attribute of the select element:
    >
    > <form...>
    > <select style="font-size: 12pt;" size="4">
    > <option ...>...</option>
    > ...
    >
    > "size" refers to the number of options displayed, so you may not want
    > to use 500.
    >
    > More information can be found here:
    >
    > <URL: http://www.w3.org/TR/html4/interact/forms.html#h-17.6>
    >
    > Cheers, Rob.


    > RobG wrote
    > You control the style of an option from the select element it's nested
    > inside.


    Only in Internet Explorer, where 'windowed' elements (like listboxes)
    have limited exposure. More advanced CSS browsers allow styling of
    Options like any other element, although some layout aspects,
    naturally, pertain to the containing list rather than any specific
    option.
     
    RobB, Nov 15, 2004
    #5
  6. RobG Guest

    RobB wrote:
    >>RobG wrote
    >>You control the style of an option from the select element it's nested
    >>inside.

    >
    >
    > Only in Internet Explorer, where 'windowed' elements (like listboxes)
    > have limited exposure. More advanced CSS browsers allow styling of
    > Options like any other element, although some layout aspects,
    > naturally, pertain to the containing list rather than any specific
    > option.


    Not just Explorer, Safari is the same (but I haven't tested the latest
    version). I expect all the Geko-based browsers support styles on
    options, perhaps someone can comment on Opera.

    Below is some test code, try changing the height of option 11 to 20em -
    additional space is added below option 25 - similarly if you make it
    500px as the OP attempted.

    A bit of testing in Firefox shows that whilst small heights (say
    equivalent to 2 to 5 lines) work fine, large heights are not reliable
    and results vary if options have different heights specified. Note
    also that the option height affects the select height - even though
    only 3 rows are supposed to show, the select is greatly expanded - I
    guess that the select height is set to size x the largest line height
    which can result in an overly extended select.

    Given that the OP didn't see any effect of "height" in their browser,
    it's likely that s/he isn't using one of the "more advanced CSS
    browsers". And given the majority of web surfers use IE, it's best not
    to depend on features it doesn't have.

    To top it off, the difficulty of controlling the size of the select
    element itself if options are given different heights introduces
    apparent unreliability in the UI that users may not understand.

    But it's an issue worth discussing - thanks for bringing it up. :)

    Rob.

    *Play code follows:*

    <form action="">
    <select name="aSelect"
    style="font-size: 10pt; font-family: sans-serif;" size="3">
    <option value="opt1">option 1
    <option value="opt2">option 2
    <option value="opt3">option 3
    <option value="opt4">option 4
    <option value="opt5">option 5
    <option value="opt6">option 6
    <option value="opt7">option 7
    <option value="opt8"
    style="font-family: courier; font-weight: bold;">option 8
    <option value="opt9"
    style="font-weight: bold; height: 20px;">option 9
    <option value="opt10">option 10
    <option value="opt11"
    style="font-weight: bold; height: 2em;">option 11
    <option value="opt12">option 12
    <option value="opt13">option 13
    <option value="opt14">option 14
    <option value="opt15">option 15
    <option value="opt16">option 16
    <option value="opt17">option 17
    <option value="opt18">option 18
    <option value="opt19">option 19
    <option value="opt20">option 20
    <option value="opt21">option 21
    <option value="opt22">option 22
    <option value="opt23">option 23
    <option value="opt24">option 24
    <option value="opt25">option 25
    </select><br>
    <input type="reset"><br><br>
    <input type="text" cols="10" name="aNum">
    Enter a number from 1 to 25 and that option will be selected<br>
    <input type="button" value="click me" onclick="
    var x = this.form.aNum.value;
    if (x > 0 && x < 26) {
    this.form.aSelect.options[x - 1].selected='true'
    } else {
    alert('From 1 to 25 please, ' + x + ' is out of bounds');
    }
    ">
    </form>
     
    RobG, Nov 15, 2004
    #6
  7. Guest

    Mick White <> wrote in message news:<e%5ld.3325$>...
    > wrote:
    > > I'm dynamically adding options to a select list in javascript and i
    > > need to be able to set the height of the option, but setting
    > > style.height has not effect, I also tried style.pixelHeight but no
    > > joy.
    > >
    > > i'm doing something like this :)
    > >
    > > var selectControl = document.getElementById('MySelect');
    > > var el = document.createElement('option');
    > > el.value = "some value";
    > > el.style.height = "500";
    > > selectControl.appendChild(el);
    > >
    > >
    > > any ideas?

    >
    > 500 what? Pixels?
    > And why no "el.text"?
    > Mick


    500 anythings, i tried px, pt, % - none of them made any difference.
    I was setting el.innerText, missed that out the code snippet. Sorry.
     
    , Nov 15, 2004
    #7
  8. Guest

    (RobB) wrote in message news:<>...
    > wrote in message news:<>...
    > > I'm dynamically adding options to a select list in javascript and i
    > > need to be able to set the height of the option, but setting
    > > style.height has not effect, I also tried style.pixelHeight but no
    > > joy.
    > >
    > > i'm doing something like this :)
    > >
    > > var selectControl = document.getElementById('MySelect');
    > > var el = document.createElement('option');
    > > el.value = "some value";
    > > el.style.height = "500";
    > > selectControl.appendChild(el);
    > >
    > >
    > > any ideas?

    >
    > el.style.height = "500px"; //tall option!


    tried this, but it doesn't seem to make any difference in IE.
     
    , Nov 15, 2004
    #8
  9. Guest

    RobG <> wrote in message news:<PNRld.673$>...
    > wrote:
    > > I'm dynamically adding options to a select list in javascript and i
    > > need to be able to set the height of the option, but setting
    > > style.height has not effect, I also tried style.pixelHeight but no
    > > joy.
    > >
    > > i'm doing something like this :)
    > >
    > > var selectControl = document.getElementById('MySelect');
    > > var el = document.createElement('option');
    > > el.value = "some value";
    > > el.style.height = "500";
    > > selectControl.appendChild(el);
    > >
    > >
    > > any ideas?

    >
    > You control the style of an option from the select element it's nested
    > inside. If you are trying to control the size of the option font, use
    > a style on the select:
    >
    > <form...>
    > <select style="font-size: 12pt;">
    > <option ...>...</option>
    > ...
    >
    > Naturally you can also use a CSS class rather than an in-line style.
    >
    > If you are trying to control the height of the box that the options are
    > displayed inside, use the "size" attribute of the select element:
    >
    > <form...>
    > <select style="font-size: 12pt;" size="4">
    > <option ...>...</option>
    > ...
    >
    > "size" refers to the number of options displayed, so you may not want
    > to use 500.
    >
    > More information can be found here:
    >
    > <URL: http://www.w3.org/TR/html4/interact/forms.html#h-17.6>
    >
    > Cheers, Rob.


    I don't want to set the font size of the select size. I want to set
    the height of each option in the select, like line height.
     
    , Nov 15, 2004
    #9
  10. Guest

    RobG <> wrote in message news:<GQXld.697$>...
    > RobB wrote:
    > >>RobG wrote
    > >>You control the style of an option from the select element it's nested
    > >>inside.

    > >
    > >
    > > Only in Internet Explorer, where 'windowed' elements (like listboxes)
    > > have limited exposure. More advanced CSS browsers allow styling of
    > > Options like any other element, although some layout aspects,
    > > naturally, pertain to the containing list rather than any specific
    > > option.

    >
    > Not just Explorer, Safari is the same (but I haven't tested the latest
    > version). I expect all the Geko-based browsers support styles on
    > options, perhaps someone can comment on Opera.
    >
    > Below is some test code, try changing the height of option 11 to 20em -
    > additional space is added below option 25 - similarly if you make it
    > 500px as the OP attempted.
    >
    > A bit of testing in Firefox shows that whilst small heights (say
    > equivalent to 2 to 5 lines) work fine, large heights are not reliable
    > and results vary if options have different heights specified. Note
    > also that the option height affects the select height - even though
    > only 3 rows are supposed to show, the select is greatly expanded - I
    > guess that the select height is set to size x the largest line height
    > which can result in an overly extended select.
    >
    > Given that the OP didn't see any effect of "height" in their browser,
    > it's likely that s/he isn't using one of the "more advanced CSS
    > browsers". And given the majority of web surfers use IE, it's best not
    > to depend on features it doesn't have.
    >
    > To top it off, the difficulty of controlling the size of the select
    > element itself if options are given different heights introduces
    > apparent unreliability in the UI that users may not understand.
    >
    > But it's an issue worth discussing - thanks for bringing it up. :)
    >
    > Rob.
    >
    > *Play code follows:*
    >
    > <form action="">
    > <select name="aSelect"
    > style="font-size: 10pt; font-family: sans-serif;" size="3">
    > <option value="opt1">option 1
    > <option value="opt2">option 2
    > <option value="opt3">option 3
    > <option value="opt4">option 4
    > <option value="opt5">option 5
    > <option value="opt6">option 6
    > <option value="opt7">option 7
    > <option value="opt8"
    > style="font-family: courier; font-weight: bold;">option 8
    > <option value="opt9"
    > style="font-weight: bold; height: 20px;">option 9
    > <option value="opt10">option 10
    > <option value="opt11"
    > style="font-weight: bold; height: 2em;">option 11
    > <option value="opt12">option 12
    > <option value="opt13">option 13
    > <option value="opt14">option 14
    > <option value="opt15">option 15
    > <option value="opt16">option 16
    > <option value="opt17">option 17
    > <option value="opt18">option 18
    > <option value="opt19">option 19
    > <option value="opt20">option 20
    > <option value="opt21">option 21
    > <option value="opt22">option 22
    > <option value="opt23">option 23
    > <option value="opt24">option 24
    > <option value="opt25">option 25
    > </select><br>
    > <input type="reset"><br><br>
    > <input type="text" cols="10" name="aNum">
    > Enter a number from 1 to 25 and that option will be selected<br>
    > <input type="button" value="click me" onclick="
    > var x = this.form.aNum.value;
    > if (x > 0 && x < 26) {
    > this.form.aSelect.options[x - 1].selected='true'
    > } else {
    > alert('From 1 to 25 please, ' + x + ' is out of bounds');
    > }
    > ">
    > </form>


    Thanks, that makes sense. So setting the height of option isn't
    something that can be done in IE. And sure enough, testing my existing
    code in Firefox works as expected, sadly it's for an internal web
    application where only IE is supported.

    Oh well, another feature dropped from the supported list.
     
    , Nov 15, 2004
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cliff  Martin
    Replies:
    1
    Views:
    3,055
    Larry Smith
    Jan 31, 2007
  2. jacksu
    Replies:
    0
    Views:
    525
    jacksu
    Oct 9, 2007
  3. Utkado
    Replies:
    2
    Views:
    2,162
  4. Ken Varn
    Replies:
    0
    Views:
    492
    Ken Varn
    Apr 26, 2004
  5. Adam
    Replies:
    9
    Views:
    101
    Randy Webb
    Aug 17, 2005
Loading...

Share This Page