html - Select Spills Over Display Table Cell Parent Container -


I can not think of a better title! I have a pseudo-table structure using the code

"& Gt; & Lt; Div class = "table-cell" & gt; & Lt; Gt selection and; & Lt; Options & gt; It's really an option with really long value! & Lt; / Options & gt; & Lt; Options & gt; Here is a general value & Lt; / Options & gt; & Lt; Options & gt; And if this value is too long, then it increases the parents choose! & Lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; Div class = "table-cell" & gt; Cell 2 & lt; / Div & gt; & Lt; Div class = "table-cell" & gt; Cell 3 & lt; / Div & gt; & Lt; / Div & gt;

This is styled using the CSS ' display: table-cell , as follows:

 . Table {display: table; Width: 100%; Table-layout: Fixed; } .table-cell {display: table-cell; Padding: 1am; Width: 33%; Border: 1 px solid # f 60; }  

The problem is that the selection spill on the parents' containers if the option value is too long here is a bella:

I I can solve the spilling problem by removing table-layout: fixed , but I need to have the same width of the column at 33%. How can I select a table-cell element?

edit

I apologize apologetically, I forgot to mention:

To capture the full width (100%), the select element is required, and the cell is responsive; It is spread with viewport.

Adjust it to meet your needs (such as setting CSS externally Tag / id / class):

  & gt; Choose style = "width: 150px;" & Gt;  

Or if you want a dynamic width (see Modified Bela):

   

This will force a closed list to render at a smaller size.

When opened, the browser will show a full, comprehensive list.

Note: Specifically (especially the older version) will not extend the selection list content to show to all (for example it Will be cut) Before suggesting any hacks, which version of IE (s) does you want to support ?


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -