#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0

    Drop-down box in CF app


    Helo:
    I have a CF application that presents a form with multiple input fields in a table as followed:

    ----------------------------------------------------
    textfield1 textfield2 textfield3 | drop-down box

    so the three related text fields occupy a column while the drop-down occupies it's own column of the table.

    The width of the drop-down box dynamically expands to accomodate the width of each element. As a result, when an element is selected that has a long value, it dynamaically causes textfield3 to wrap to the next line. To prevent that, I tried multiple things to restrict the width the drop-down box can expand but nothing work. Here are the things I tried:

    <td colspan="4"> textfield1 textfield2 textfield3 </td>
    <td colspan="2"> drop-down box </td>

    or
    use the following to limit the width of the drop-down box
    #myselect { width:200px; } #myselect option { width:100px; }

    But nothing works.
    Can someone show me how to limit the width of the drop-down box that it can dynamically expands such that choosing a very large element 'value' will not allow it to expand?

    Thanks,
    CFnewbie1
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    This is really a CSS question. But I'm not sure why using CSS wouldn't work. This works fine for me. http://jsfiddle.net/brian428/uDtam/
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by kiteless
    This is really a CSS question. But I'm not sure why using CSS wouldn't work. This works fine for me. http://jsfiddle.net/brian428/uDtam/

    Hi:
    Can you show me what did you do to restrict the size of a drop-down so it does not dynamically adjust based on the size of the element. I followed your above link but couldn't find any hint.

    Thanks,
    Newbie
  6. #4
  7. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    The code is right there on the screen when you look at the fiddle. I really can't make it any simpler.

    Code:
    <select name="foo" style="width: 100px">
        <option>short</option>
        <option>a medium length</option>
        <option>a very long select box option</option>
    </select>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by kiteless
    The code is right there on the screen when you look at the fiddle. I really can't make it any simpler.

    Code:
    <select name="foo" style="width: 100px">
        <option>short</option>
        <option>a medium length</option>
        <option>a very long select box option</option>
    </select>
    Hi For some reason, when I clicked on that link, there is no drop-down boxes (at least my browser didn't show any). Anyway thanks for the code above.
  10. #6
  11. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    Are you using a really old browser or something? Because jsFiddle should work with just about any browser. The source code is right there in the first section (the one labeled "HTML"), and the rendered output is in the last section (labeled "Result").

    I'm glad showing the code again here helped, but if you click the fiddle link and don't see the HTML code and the result, then something is really wrong with your browser or your computer.

IMN logo majestic logo threadwatch logo seochat tools logo