Scrollbar in a SELECT in html

0

Talk the guys, I have a SELECT in my HTML that when results exceed the width limit, it breaks a line. I would like that instead of breaking this line, a scroll bar should be added.

Explanation:

DEMONSTRATION PAGE

What css properties should I use? Thank you, a big hug!

    
asked by anonymous 28.11.2016 / 21:30

3 answers

4

You can use overflow-x and white-space: nowrap; , note that elements have to use display: inline-block; , I believe this does not work with float , so remove it from your elements.

In case your code would look like this (which uses Select2 ):

/* itens dentro do select2 */
.select2-selection--multiple .select2-search--inline {
    float: none;/*"remove" o float*/
    display: inline-block;
}

/* área para digitar dentro do select2 */
.select2-selection--multiple .select2-selection__choice {
    float: none;
    display: inline-block;
}

/* área aonde ficam os items e o campo para digitar */
.select2-selection--multiple .select2-selection__rendered {
    overflow-x: auto;
}

An example to see the effect (and that will be useful to future visitors to the question)

.area {
   border: 1px #ccc solid;
   padding: 5px;
   width: 400px;
   overflow-x: auto;
   white-space: nowrap;
}
.area > .item {
    border-radius: 2px;
    background-color: #455a64;
    display: inline-block;
    margin: 0 0 0 2px;
    padding: 5px;
    color: #fff;
}
.area > .item:last-child {
    margin: 0;
}
<div class="area">
    <div class="item">
        Memes
    </div>
    <div class="item">
        Programação
    </div>
    <div class="item">
        Entretenimento
    </div>
    <div class="item">
        Stack Overflow
    </div>
    <div class="item">
        Super User
    </div>
    <div class="item">
        Stack Exchange
    </div>
    <div class="item">
        C#
    </div>
    <div class="item">
        asp.net
    </div>
    <div class="item">
        asp.net-mvc
    </div>
</div>
    
28.11.2016 / 22:12
3

The input itself is unknown, but you can use textarea :

textarea
{
    height:30px;
    overflow-y:hidden;
    overflow-x: auto;
    white-space: nowrap;
    resize: none;
    border-radius:5px;
}
<textarea>fffffffffffffffffffffffffffffffffffffffffffffffffffffffhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</textarea>

edit

As mentioned by @Felipe Nascimento, it is not possible to put demtro elements of input nor in textarea because they are #PCDATA (processed character data). There you will have to use% s of% same ...

    
28.11.2016 / 21:58
2

Try using this CSS property:

overflow-x: auto;

Put in the parent element of these div's, will make the scroll appear horizontally if necessary, remembering that this same parent element must have height set.

Reference:

link

    
28.11.2016 / 21:54