Login/Register
How to hide overflow on select2?
Asked Answered
Solved jquerycsshtmljquery-select2
A

1

6

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:

enter image description here

And I want it to do this:

enter image description here

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/

Angiosperm answered 13/5, 2013 at 23:35 Comment(0)
G
9

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

Gorrono answered 13/5, 2013 at 23:56 Comment(5)
Exactly what I needed! I struggled with this for awhile and such an simple solution! Thank you! – Angiosperm
My existing HTML wraps the table div in a P and this causes problems - any ideas - jsfiddle.net/L5yKC – Angiosperm
The problem is that in your markup you are using the clas name row but in the css you call for .table-row. I fixed that in the above fiddle, but forgot to mention, sorry. Now I fixed it again and updated your jsfiddle. But I am curious about what you are trying to achieve with the paragraph tag? =) – Gorrono
working with existing HTML. what we have is many rows like this example, and each row is surrounded with a P tag. – Angiosperm
I see =) I thought you wanted to do some special magic with the p tag ;-) ... But now it seems you don't want to change the html, so I fixed the typo at the wrong end ... and you should change it to .row in the CSS, but I guess you figured that out already. Good luck with the page! ^_^ – Gorrono

© 2022 - 2024 — McMap. All rights reserved.