I have an info-box with a list of services on the left column and the content for each service on the right column. I have used a <ul> list to list the services and each service is a button.The left column has overflow-y:scroll enabled. When clicked, the button is highlighted and it moves to the right edge of the left column and it also has a tiny arrow attached to it using a <span> that appears on top of the right column.
<li class="active-li">
<button class="Services_Button active">Service 1</button>
<span class="pointer-el"></span>
</li>
It should ideally look like this,
With overflow-y:scroll Disabled
But im getting this ,
With overflow-y:scroll Enabled
The pointer element nor any any element within the scroll box is stacking/overlapping outside its bounds. I have tried a more simpler set up but the code snippet below is from my actual use-case with all the css.
<div id="wrap-main">
<div id="Service-Viewer-Wrapper">
<div id="Service_Viewer_Col-Left">
<ul id="Services_Button_List">
<li class="active-li">
<button class="Services_Button active">Service 1</button>
<span class="pointer-el"></span>
</li>
<li>
<button class="Services_Button" >Service 2</button>
</li>
<li>
<button class="Services_Button">Service 3</button>
</li>
<li>
<button class="Services_Button">Service 4</button>
</li>
<li>
<button class="Services_Button">Service 5</button>
</li>
<li>
<button class="Services_Button">Service 6</button>
</li>
<li>
<button class="Services_Button">Service 7</button>
</li>
<li>
<button class="Services_Button">Service 8</button>
</li>
<li>
<button class="Services_Button">Service 9</button>
</li>
<li>
<button class="Services_Button" >Service 10</button>
</li>
<li>
<button class="Services_Button" >Service 11</button>
</li>
<li>
<button class="Services_Button" >Service 12</button>
</li>
<li>
<button class="Services_Button">Service 13</button>
</li>
<li>
<button class="Services_Button">Service 14</button>
</li>
</ul>
</div>
<div id="Service_Viewer_Col-Right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum.</p>
</div>
</div>
</div>
#Service-Viewer-Wrapper h2 {
font-family: 'Tiempos Headine Regular';
font-Size: 52px;
font-Weight: 200;
letter-Spacing: 2px;
line-height: 1.2em;
color: #231F20;
margin: 0px;
}
#Service-Viewer-Wrapper h3 {
font-family: 'Tiempos Headine Regular';
font-Size: 38px;
font-weight: 200;
letter-Spacing: 2px;
line-height: 1.2em;
}
#Service-Viewer-Wrapper h4 {
font-family: 'Poppins Light';
font-Size: 22px;
font-weight: 600;
letter-Spacing: 2px;
line-height: 1.2em;
}
#Service-Viewer-Wrapper p {
font-family: 'Poppins Light';
font-Size: 15px;
font-weight: 200;
letter-Spacing: 1px;
line-height: 1.8em;
}
/* Main Styles */
#wrap-main {
display: flex;
justify-content: center;
overflow: hidden;
background-color: #e8f2f5;
padding: 50px;
}
#Service-Viewer-Wrapper {
width: 80%;
height: 650px;
max-width: 1080px;
border-radius: 10px;
box-shadow: 2px 15px 15px 5px rgb(50 71 71 / 29%);
display: flex;
justify-content: center;
overflow: hidden;
}
/*Left Column*/
#Service_Viewer_Col-Left {
width: 25%;
background-color: #346a81;
overflow-y: scroll;
overflow-x: hidden;
direction: rtl;
}
/* Left Col List */
#Services_Button_List {
direction: ltr; /* Set the direction of the content back to left-to-right */
padding-left: 20px; /* Add some padding to the left to account for the scrollbar */
}
ul#Services_Button_List {
list-style: none;
padding: 20px 0px 20px 0px;
margin: 80px 0px 80px 0px;
display: flex;
flex-direction: column;
align-items: center;
}
#Services_Button_List li {
display: flex;
align-items: center;
}
/* Left Col Buttons */
.Services_Button{
width: 100%;
margin: 8px 0px 8px 0px;
padding: 10px 30px 10px 30px;
border: none;
font-family: 'Poppins Light';
font-size: 15px;
font-weight: 400!important;
letter-spacing: 1.5px;
line-height: 1.6em;
color: white;
background-color: transparent;
}
.pointer-el
{
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0px 9px 9px;
border-color: transparent transparent transparent #a6e0e4;
}
/* Left Col Active State Styles */
.active{
background-color: #a6e0e4;
font-size: 16px;
color: #231F20;
margin-top:10px!important;
margin-bottom:10px!important;
padding:12px 26px 12px 26px;
border-radius:7px 0px 0px 7px;
box-shadow: 8px 15px 25px -5px rgb(50 71 71 / 30%);
transition: background-color 0.3s ease; /* Smooth transition for background-color */
}
.active-li {
align-self: flex-end;
transform: translateX(9px);
z-index: 3;
transition: transform 0.3s ease; /* Smooth transition for transform property */
}
/* Right Column */
#Service_Viewer_Col-Right {
width: 75%;
overflow-y: scroll;
overflow-x: hidden;
background-color: #fff;
box-sizing: border-box;
padding: 60px 60px 60px 60px;
}
The solutions i have tried so far are
- Adding
position:absoluteto the<li>with the active class. This does stack the element on top but makes it sticky and results in something like this (Does not work). With position:absolute on<li>with active class - Adding
position:absoluteto the<li>with the active class and adding position:relative on either the parent<ul>or the grandparent left-column div or or addingposition:relativeon both. Results in this, withposition:relative3)Changing z-index values along with any of the above also does not work
Can anything be done about this? (Im not sure if i should include the js let me know if you need it)
When you are using overflow hidden so it will not showing outside hidden container. For this you need to add come custom white background like this.