I am using the excellent select2 jquery control.
I am trying to imitate a 3-cell table display layout using a CSS div layout.
When the selected value is greater than the current width of select2, the control usually hides the overflow with ellipses. In my layout, the select2 control displays all the text and crashes out of the "table" div. I would like it to hide the overflow - is there any way to do this? And I do not mind a complete change in display: the design of the table (unless it is used for the actual table).
Mine does this:
And I want this to do this:
I want it to fill the available space and no more. Note. I have a 500px container to replicate the problem, but in practice it will be a percenatge container, and the problem occurs when the window is resized.
<link href="http://ivaynberg.imtqy.com/select2/select2-3.3.2/select2.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="http://ivaynberg.imtqy.com/select2/select2-3.3.2/select2.js"></script> <style> .container { width: 500px; margin: 0 auto; border: 5px solid black; } .table { display:table; width: 100%; } .table-row { display: table-row; width: 100%; } .left, .right { display:table-cell; width: 100px; background-color: green; } .mid { display:table-cell; width: 100%; background-color: red; } .mid > * { width: 100%; } </style> </head> <body> <div class="container"> <div class="table"> <div class="row"> <span class="left">AAAA</span> <span class="mid"> <input type="hidden" id="e5" /> </span> <span class="right">ZZZZ</span> </div> </div> </div> <script> $("#e5").select2({ minimumInputLength: 0, query: function (query) { var data = { results: [] }; data.results.push({ id: 1, text: 'abcdefg' }); data.results.push({ id: 2, text: 'abcdefghijklmn' }); data.results.push({ id: 3, text: 'abcdefghijklmnopqrstuv' }); data.results.push({ id: 4, text: 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' }); query.callback(data); } }); </script> </body> </html>
JSFIDDLE: http://jsfiddle.net/264FU/
source share