1

Hi everyone I'm developing an mobile app and I want to make this toolbar scrollable (horizontally) and I did it just by putting 

white-space:nowrap;
overflow:auto;

But now two buttons(Color and Table) are not working as before, the options that they offer are not shown or better are covered by the textarea. I tried putting 

z-index:0;

But nothing happen. Any idea how to resolve or what can be the problem?

enter image description here

Wanted result for the toolbar/menu enter image description here

Ares91
  • 506
  • 2
  • 8
  • 27
  • If you want people to help out you need to provide more code than what is currently there. – crazymatt Dec 20 '16 at 19:12
  • i'm using this library http://simditor.tower.im/ and i want just to make the toolbar horisontally scrollable – Ares91 Dec 20 '16 at 19:18
  • This is the project http://www.filedropper.com/simditor-checklist-master-copia – Ares91 Dec 20 '16 at 19:21
  • Check this out: http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue – Troyer Dec 21 '16 at 16:09
  • @Troyer I need that when i click a button the scrollbar stay behind that button like in the second image (red) or better if you look at first image at top the button used to color text works fine, the options are shown when clicked but since I need the toolbar in a single line I added to it this two attrib "white-space:nowrap; overflow:auto;" and now in the second part of the first image the options(colors) are not shown because are covered by the scrollbar – Ares91 Dec 21 '16 at 16:23
  • @ESX if you check the first response on the link I passed to you, you will get why is not working. – Troyer Dec 21 '16 at 16:26
  • @Troyer yes I cheched it ,my problem is not to hide the scrollbar but to show the "popup" when click the button ,in this case the colors when click "A" – Ares91 Dec 21 '16 at 16:38

2 Answers2

1

Thx all for help, I solved by overwriting the original css with this

.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);
}
Ares91
  • 506
  • 2
  • 8
  • 27
0

You can use overflow-x and overflow-y:

.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">
 <div class="inner">
  <span class="menuitem">Menu Item</span>
  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
 </div>
</div>
ICE
  • 1,667
  • 2
  • 21
  • 43
  • it's not exactly what i want, i need that the horizontal scrollbar stay behind/ under "menuitem" the red square – Ares91 Dec 21 '16 at 15:54
  • check the new img I uploaded – Ares91 Dec 21 '16 at 15:58
  • @ESX I thought you need it for mobile app since mobile devices don't show scroll bar. but I'm glad you fixed it with other solution. – ICE Dec 21 '16 at 17:45