Menu
I am using the excellent select2 jquery control.
I am trying to mimic a 3 cell table display layout, using CSS div layout.
When the selected is larger than the current select2 width, the control normally hides the overflow with an ellipses. With my layout, the select2 control shows the entire text and blows out of the bounds of the "table" div. I would like it to hide the overflow instead - is there any way to do this? And I'm not opposed to entirely removing the display:table design (unless it's for an actual table).
Mine does this:
And I want it to do this:
I want it to fill the available space and no more. Note - I have a 500px container to replicate the issue but in practice this will be a percenatge container and the issue occurs on window resize.
<link href="http://ivaynberg.github.io/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.github.io/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/
591
just try adding
table-layout: fixed;
to your table object. Unless you really don't want to set the green spans to 100px.
here is a jsfiddle example
EDIT: If you want the side "green" spans to resize/adjust to the content, you can cheat a little (we can since we are not dealing with a real html table), and set the .mid to display:table with a fixed layout (and setting the green ones width to something smaller - as it serves as minimum width). And it will work like a charm =)
jsfiddle for this solution
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
