Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below:
The desired width for the tab on the right is only 25px. To achieve this layout, I am utilizing flexbox for the container that houses the purple parameter list along with the right-side tab.
However, when I set the width to 25px for this flexbox, the rotated div inside inherits the same width, making it challenging to center the "parameters" title. If anyone has insights on how to tackle this issue effectively, I would appreciate your assistance!
Below is the relevant code snippet from a React JS file:
return (
<div className='flexbox-parent-console overflow-hidden'>
<div className='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
<PostListArray />
</div>
<div className='bg-black-10 w25p self-center bg-light-gray'>
<div className='r90 rotateddiv'>
Parameters
</div>
</div>
</div>
)
CSS styles applied:
.flexbox-parent-console {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.self-center {
-ms-flex-item-align: center;
align-self: center
}
.overflow-hidden {
overflow: hidden
}
.fill-area-content {
overflow: auto;
}
.r90 {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateddiv {
width 300px;
height: 24px;
text-align: center;
background: green;
}
//Non Essentials
.b--light-gray {
border-color: #eee
}
.bg-black-10 {
background-color: rgba(0, 0, 0, .1)
}
.bw2 {
border-width: .25rem
}
.b--solid {
border-style: solid
}
.pa2 {
padding: .5rem
}