DEV UA > Select tag horizontal scroll bar

Full Version: Select tag horizontal scroll bar

DEV UA > HTML / CSS / Javascript > HTML / CSS

Pegasus

13.5.2008, 8:51

Проблема:
маємо отакий HTML

CODE

<select multiple="multiple" >
      <option>Option11111111111</option>
      <option>Option22222222222</option>
      <option>Option33333333333</option>
      <option>Option44444444444</option>
</select>

потрібно добавити горизонтальний скроллер, я найшов один спосіб як то зробити:

CODE

<div style="overflow:auto;width=100px;" >
   <select multiple="multiple" >
      <option>Option11111111111</option>
      <option>Option22222222222</option>
      <option>Option33333333333</option>
      <option>Option44444444444</option>
   </select>
<div>

В результаті ми отримаємо горизонтальний скролер, якщо ширина тексту в лістбоксі буде більша за 100 пікселів, АЛЕ, щоб доступитись до вертикального скролера нам треба буде тоді, горизонтальним проскролати до кінця вправо, тому що вертикальний відноситься до лістбокса, а горизонтальний до дівки. Можна і дівці додати вертикальний скролер задавши висоту:

CODE

<div style="overflow:auto;width=100px;height=100px" >
   <select multiple="multiple" >
      <option>Option11111111111</option>
      <option>Option22222222222</option>
      <option>Option33333333333</option>
      <option>Option44444444444</option>
   </select>
<div>

але вертикальний скролер селекта так і залишиться, він не зникає навіть коли не потрібен, просто виглядає disable.
Будуть якісь альтернативні ідеї?

BLADE

20.5.2008, 19:25

Несколько замечаний:
1) чтобы код действительно работал нормально и во всех броузерах в стилях нужно писать не width=100px; а width:100px;
2) тег div лучше закрывать
3) желательно указывать атрибут size тега select

чтобы убрать неактивный горизонтальный скролл достаточно прописать в стили scroll:auto

CODE

<div style="overflow:auto;width:100px;height:100px;scroll:auto;" >
   <select multiple="multiple" size=5>
      <option>Option11111111111</option>
      <option>Option22222222222</option>
      <option>Option33333333333</option>
      <option>Option44444444444</option>
   </select>
</div>

Pegasus

20.5.2008, 22:10

На рахунок пункту 1, в мене все-таки написано ":" а не "=", я просто тут писав з голови і так як не часто працюю з css, помилився.
На рахунок пункту 2, якщо ти прокрутиш горизонтальний скрол вправо до кінця, то побачиш, що вертикальних скрола є два, один від огортаючої дівки, а другий власне скрол select тега, який нажаль забрати не можна

Пробував я під FireFox

Доречі, я то питання вирішив, трохи оригінальніше....

CODE

<select multiple="multiple" size=5>
   <option title="Option11111111111">Option11111111111</option>
   <option title="Option22222222222">Option22222222222</option>
   <option title="Option33333333333">Option33333333333</option>
   <option title="Option44444444444">Option44444444444</option>
</select>

Тобто "замінив" горизонтальний скрол хінтом, який підсвічується, коли на <option> навести мишку.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.