html - Internet explorer 9 wrapped in div table, which consist of inputs, select/deselect bug -


I have a table that contains input in the cell

is a weird bug (in IE 9, After input into the input (or after selection / after unselecting), it has not been tested in any other IE versions - the parent div of the table starts to expand if overflow: auto; is set Property and if horizontal scroll is

how it looks:

Image Enter details here

Try selecting some rows in the table

HTML:

  
class =" maindiv "& Gt; & lt; div class =" gridwrapper "> LT; Table & gt; & lt; thead & gt; & lt; tr & gt; & lt; th & gt; column & lt; / th & Gt; & lt; th & gt; column & lt; / th & gt; & lt; th & gt; column & lt; / th & gt; & lt; th & gt; column & lt; / v & gt; ; & Lt; th & gt; column & lt; / th & gt; & lt; th & gt; column & lt; / or & gt; & lt; th & gt; column & lt; / v & gt; & Lt; Th & gt; Column & lt; / Th & gt; & Lt; Th & gt; Column & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = 'text' value = 'cell' / & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; Div class = "bottomdiv" & gt; & Lt; Label & gt; AddRow & lt; / Labels & gt; & Lt; / Div & gt; & Lt; / Div & gt;

CSS:

  .gridrapper {max-height: 150px; Overflow: Auto; Limit: 1px solid black; } .maindiv {width: 400px; Border: 1 px solid gray; } Table {width: 100%; }  

How does one solve this problem?

I see this behavior in IE 9, when overflow property is set to auto, however, Can not reproduce the behavior in when the property is set to scroll

Try it:

  .gridwrapper {max-height: 150px; Overflow: scroll; Limit: 1px solid black; }  

Comments

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

javascript - data.match(var) not working it seems -

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -