HTML, CSS горизонтально прокручивать панель в Simditor.js

Привет всем Я разработки мобильных приложений, и я хочу, чтобы сделать эту панель прокручивать (по горизонтали), и я сделал это просто поставивHTML, CSS горизонтально прокручивать панель в Simditor.js

white-space:nowrap; 
overflow:auto;

Но теперь два кнопки (цвет и таблица) работают не так, как показано выше, варианты, которые они предлагают, не отображаются или лучше всего покрываются текстовым полем. Я попытался поставить

z-index:0;

Но ничего не происходит. Любая идея, как решить проблему или что может быть проблемой?

Wanted результат для панели инструментов/меню

источник

2016-12-20 Ares91

Если вы хотите, чтобы люди, чтобы помочь вам необходимо предоставить больше кода, чем то, что в настоящее время там. – crazymatt

Я использую эту библиотеку http://simditor.tower.im/ и хочу просто сделать панель инструментов горизонтально прокручиваемой – Ares91

Это проект http://www.filedropper.com/simditor-checklist-master-copia – Ares91

Вы можете использовать переполнение-х и перелива-у:

.topbar{ 
 
    height: 40px; 
 
    background-color: gray; 
 
    white-space: nowrap; 
 
    overflow: visible; 
 
} 
 
.inner{ 
 
    overflow-x: auto; 
 
} 
 
.menuitem{ 
 
    height: 80px; 
 
    display: inline-block; 
 
    background-color: red; 
 
}

<div class="topbar"> 
 
\t <div class="inner"> 
 
\t \t <span class="menuitem">Menu Item</span> 
 
\t \t Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item | Another Item 
 
\t </div> 
 
</div>

источник

2016-12-20 21:14:18 ICE

это не совсем то, что я хочу, мне нужно, чтобы горизонтальная полоса прокрутки остаться за/под «menuitem» красный квадрат – Ares91

проверить новый img Я загрузил – Ares91

@ESX Я думал, что вам это нужно для мобильного приложения, поскольку мобильные устройства не показывают полосу прокрутки. но я рад, что вы исправили его другим решением. – ICE

Thx все за помощью, я решил, переписав оригинальный CSS с этим

.simditor .simditor-toolbar .toolbar-menu { 
    display: none; 
    position: relative; <------- before was absolute 
    z-index: 21; 
    background: #ffffff; 
    text-align: left; 
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 
}

источник

2016-12-21 17:40:23 Ares91

HTML, CSS горизонтально прокручивать панель в Simditor.js

ответ

Смежные вопросы