CODEWITHSUNDEEP
htmlcss
sergioBertolazzo
sergioBertolazzo

Reputation: 604

html - how to scroll vertical in select box

I have a problem with the select in html, i need a horizontal scroll bar to user see all the text.

What i have:

enter image description here

What i need: enter image description here

My code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<select size="12" class="form-control">
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

Upvotes: 0

Views: 305

Answers (6)

tao
tao

Reputation: 90058

All the provided answers have a serious usability problem: they allow either double vertical sidebars or vertical and horizontal sidebars, which make the element difficult to use on a number of devices.

Good user experience is to only allow one direction of scrolling per element and avoid double scrollbars:

a) to allow only horizontal scrolling:

select {
  overflow-x:auto;
  overflow-y: hidden;
}

/*
 * sets select size to children + 1, 
 * to render vertical scrolling unnecessary:
 */
$(window).on('load', function(){
  $('select[size]').each((i,e) => {
    $(e).attr('size', $(e).children().length + 1);
  })
})


$(window).on('load', function(){
  $('select[size]').each((i,e) => {
    $(e).attr('size', $(e).children().length + 1);
  })
})
select {
  overflow-x:auto;
  overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<select size class="form-control">
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

b) to allow only vertical scrolling (wrap options):

select {
  overflow-y: auto;
}
option {
  white-space: initial;
}


select {
  overflow-y: auto;
}
option {
  white-space: initial;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<select size="12" class="form-control">
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

Upvotes: 2

Gautam Naik
Gautam Naik

Reputation: 9348

overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.

overflow-y specifies what to do with the top/bottom edges of the content.

select{
overflow-x:auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<select size="12" class="form-control">
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

Upvotes: 2

Habeeb
Habeeb

Reputation: 352

Add overflow : auto attribute to the element

Upvotes: 2

Kunal Mukherjee
Kunal Mukherjee

Reputation: 5853

You can set a fixed height and width first, then if it overflows that fixed width and height then a scroll-bar will appear. You can do this by setting overflow-x and overflow-y to scroll.

.selectItems
{
  width: 800px;
  overflow-x: scroll;
  height: 600px;
  overflow-y: scroll;
  
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="selectItems">
  <select class="form-control">
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  </select>
</div>

Upvotes: 2

Paula
Paula

Reputation: 507

Add 

 select {
     overflow-x: scroll;
 }

Upvotes: 2

StefanBob
StefanBob

Reputation: 5128

Add overflow-x: auto or scroll to CSS

select {
  overflow-x: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<select size="12" class="form-control">
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

Upvotes: 2

Related Questions