I have a dropdown with very long values as options. When I select a long value, it goes beyond the borders of the containing div. Also the items above the selected item goes to top rather than “drop down”. That is the first option “ALL” goes upwards rather than downwards.
I searched and found some Javascript approaches to fix this. What is the css way to fix this?
Note: Issue observed in IE11 and Chrome. In IE6, it works just fine.
Issue
<div style="width:500px; background-color:gray"> <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;"> <tbody> <tr> <td colspan="2"> <b style="margin: 0 0 0 10px;"> Select Provider </b> </td> <td colspan="2"> <b> Select Locations </b> </td> </tr> <tr> <td colspan="2" style="overflow:hidden; border: 3px solid purple; "> <div style="margin: 0 0 0 10px; padding: 0 0 0 0px; overflow:hidden; width:245px; "> <select name="drpVendor" id="drpVendor" fieldname="Vendor" style="width: 250px; padding: 0 0 0 0px; overflow:hidden;"> <option selected="selected" value="">ALL</option> <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option> </select> </div> </td> <td colspan="2" style="overflow:hidden; border: 1px solid blue; "> <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility" style="width: 250px;"> <option value="1">ALL</option> </select> </td> </tr> <tr> <td colspan="4"> <hr> </td> </tr> </tbody> </table> <input name="hidUserID" type="hidden" id="hidUserID" value="1"> </div>IE6
2 Answers
Answers 1
1) First of all, the width of your two select boxes are bigger than the width of the column that contains it (you need to take into account all padding and margin used).
Once you have set the width of each of your select box to around 230px, they should fit.
2) You said "when you select a long value, it goes beyond the borders of the containing div".
Given that your select options contain more characters than what the width of your select box can hold, it has to expand to a width wide enough for options to be seen when it drops down. That is not a bug, this is how it intends to be.
If what you want is for the drop down to be of the same width as your select box, by having particularly lengthy options displayed in multi-lines. There is no good-cross-browser-compatible CSS-only solution to this, as far as I am aware. You can, however, achieve this by the use of the combination of javascript/jquery + CSS.
3) The upward/downward "issue" is to do with the different ways browsers render elements/CSS.
This "issue" can be improved upon with the use of a javascript/jquery solution as suggested in point 2.
4) Please note that IE7 and below doesn't support a lot of the javascript/jquery solution to this type of problem, but it is quite okay not to provide full support for IE6 and 7 at this time and age.
You can always have a separate CSS stylesheet for older browsers if needed.
5) You can easily convert your current layout into Div+CSS and thereby forgo the use of table, which should really only be used for the display of data.
It is easier to make your page responsive to different screen sizes, if you do your layout in Div+CSS than in table form.
6) I have put together a demo of a jquery plugin solution based on your original code for your reference. I kept the table layout in the demo but as mentioned in point 5, you should look into converting your layout into Div if possible.
Hope this helps.
P.S if you click on the codepen link and the built-in snippet respectively, you shall see the same code renders differently on different sandbox tool too.
Update:
I found out why the two sandbox renders differently, this is because when you use the "add an external library" button to add external stylesheet to your code, it adds <link href="" rel="stylesheet"/> to the <body> section of the HTML, so internal CSS gets parsed before the external CSS, making none of the override works.
In real life we add the <link href="" rel="stylesheet"/> to the <head> section of the HTML so External CSS is parsed before the internal CSS, which of course isn't an option with the snippet.
To overcome this issue, you can use @import in the CSS section of the snippet.
$(function() { $("#drpVendor").selectBoxIt({ theme: "default", defaultText: "ALL", autoWidth: false }); $("#drpVendorFacility").selectBoxIt({ theme: "default", defaultText: "ALL", autoWidth: false }); });.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options { width: 225px; /* Width of the dropdown button */ border-radius: 3px; margin-top: 3px; } .selectboxit-container span, .selectboxit-container .selectboxit-options a { line-height: 20px; height: 22px; } .selectboxit-options .selectboxit-option .selectboxit-option-anchor { white-space: normal; min-height: 22px; height: auto; } .first { padding: 0 0 0 10px; } .top { padding-top:5px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css" rel="stylesheet"/> <div style="width:500px; background-color:gray"> <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;"> <tbody> <tr> <td colspan="2" class="first top"> <b>Select Provider</b> </td> <td colspan="2" class="top"> <b> Select Locations </b> </td> </tr> <tr> <td colspan="2" class="first"> <select name="drpVendor" id="drpVendor" fieldname="Vendor"> <option selected="selected" value="">ALL</option> <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option> <option value="11825">A SCD GARMENT CO LTD DIV Sample, Sample, Sample</option> </select> </td> <td colspan="2"> <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility"> <option value="1">ALL</option> <option value="2">Option 1</option> <option value="3">Option 2</option> </select> </td> </tr> <tr> <td colspan="4"> <hr> </td> </tr> </tbody> </table> <input name="hidUserID" type="hidden" id="hidUserID" value="1"> </div>Answers 2
The length of the option string is the reason for the breaking of your div border.
Text cannot be wrapped in a native select. You can use jquery plugins to achieve this. Here are more details
Still you may try this and see if it works:
break-word Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
pre Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at elements.
pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.
word-wrap: break-word; /* IE*/ white-space: -moz-pre-wrap; /* Firefox */ white-space: pre-wrap; /* other browsers */ width:150px; display:inline-block 
0 comments:
Post a Comment