Unable to center text within a CSS div rotated 90 degrees due to width limitations caused by rotation; solution involves utilizing flexbox

Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below: https://i.sstatic.net/QGTEB.png

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
}

Answer №1

For more information, you might want to check out this article on writing-mode.

.vertical-lr {
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  /* actually 
  writing-mode:sideways-lr; would be the one , but not avalaible everywhere so, let's transform */
  transform: scale(-1, -1);
  background: green;
  text-align: center;
  width: 1.5em;
  line-height: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
}

.flex {
  display: flex;
}
/* Is this what you're looking for? */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0.5em;
}

.fill-area-content {
  overflow: auto;
  flex: 1;
  height: 100%;
}

/* your code */
.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 {}

.overflow-hidden {
  overflow: hidden
}

.rotateddiv {
  width 300px;
  height: 24px;
  text-align: center;
  background: green;
}

.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
}
<div class='flexbox-parent-console overflow-hidden'>
  <div class='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class='bg-black-10 w25p flex  bg-light-gray'>
    <div class=' vertical-lr'>
      Parameters
    </div>
  </div>
</div>

Answer №2

I've put together some helpful tips for you.

To see the position update, try adjusting the CSS value of .post-list-section min-height or adding content to it.

One solution is to give your rotating element a set width (even if it's not visually noticeable) and then translate it by half of this size before applying the rotation.

.flexbox-parent-console {
  display: flex;
  overflow: hidden;
  width: 100%;
  position: relative;
  background: #EEE;
}
.post-list-section {
  min-height: 300px;
  width: calc(100% - 1.5em);
  background: #ABB;
}
.nav-section {
  margin: auto 0; 
  width: 1.5em;
  line-height: 1.5em;
  height: 100%;
}
.nav-section > div {
    width: calc(200px + 1.5em);
    margin: 0;
    text-align: center;
    transform-origin: 50% 50%;
    transform: translateX(-100px) rotate(90deg);
    position: relative;
}
     <div class='flexbox-parent-console overflow-hidden'>
        <div class='post-list-section'>
            Post list
        </div>
        <div class='nav-section'>
            <div>
                Parameters
            </div>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elements are failing to respond to the padding and margin adjustments in my CSS styling

I've been experimenting with creating a visually appealing div that serves as the centerpiece of a website. Imagine it resembling a standard "news" link. The width set at 80%, an image aligned to the left with a border, a headline detailing the lates ...

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Anticipated outcome: Upon selecting an item, the Menu list will promptly close, and the Select component will no longer display a focus state. The borderBottom will change to 1px solid, and the backgroundColor will turn to white. Current situation: Sele ...

Executing Cross-Component Communication in Angular 7: A Quick Guide

I've encountered a challenge with a checkbox in the header component. If the checkbox is checked, I need to display an alert message when the application loads. The tricky part is that the checkbox is linked to the home component. Therefore, if I am o ...

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

[php][html] stuck on trying to solve this error

Any help in figuring out the error on line 37 would be greatly appreciated. I've tried moving the ""; after echo and putting the entire PHP code in an img class="profilePic" src="http://i.imgur.com/ZICYW5z.png"/> and then using echo for the name (I ...

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

Enhance your browsing experience with Fire-fox add-on that automatically triggers JavaScript after YouTube comments have

I am currently working on creating an add-on for the Firefox browser. I have implemented a page-mod that triggers a script when specific pages (such as Youtube) are loaded, allowing it to communicate data back to the main script. However, I am encountering ...

How can I view a comprehensive list of updates made to a webpage?

Is it possible to track and display all the modifications made to a web page? This includes new HTML elements added, old elements removed, and any changes in the location of existing elements. Currently, I am utilizing Selenium WebDriver with Java. Below ...

Display toggle malfunctioning when switching tabs

I am currently working on implementing a search function with tabbed features. Everything seems to be displaying correctly without any errors. However, the issue arises when I try to click on any tab in order to show or hide specific content from other tab ...

Tips for Creating an Upward-Dropping Dropdown Menu in HTML/JavaScript When Space is Limited on the Page

Hello, I am currently seeking a solution to adjust my dropdown menu so that it appears above instead of below when the page doesn't have enough space to display it fully. My tools for this project include HTML, Javascript, CSS, and JQuery exclusively. ...

Create a function that replaces items with alphabets

My goal is to create a straightforward hangman game. When a category is chosen and the "New Word" button is clicked, a random word from the selected list will be displayed as underscores. As letters are guessed and matched with those in the word, they will ...

What are the reasons for not utilizing JSS to load Roboto font in material-ui library?

Why does Material-UI rely on the "typeface-roboto" CSS module to load the Roboto font, even though they typically use JSS for styling components? Does this mix of JSS and CSS contradict their usual approach? ...

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

I'm experiencing an issue with this code where it opens another webpage while leaving the login screen active. I've tried multiple ways to redirect it, such as window.location.href and window.location.replace, but nothing seems to be working. Ide ...

Performing an AJAX request inside of another AJAX request

I have integrated buttons into my website that are activated by JS AJAX loads. By clicking on these buttons, a JavaScript function is executed to load the contents of a PHP file into a specific div element. This setup is crucial as I want to avoid the enti ...

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

What is the best way to save newly added elements on a webpage that were submitted by the

I am looking for a way to save the changes made by users on my webpage so that they can navigate to different pages and come back without losing any added elements. These changes should be retained even when the user goes back to edit the webpage, but I pr ...

The color of the progress bar in JS is not displaying properly

My work involves using jQuery to manipulate progress bars. The issue I am facing is defining standard colors that should be displayed on the progress bar based on the value received. Here is my code: var defaultSegmentColors = ['#FF6363', &ap ...

Tips for loading a webpage directly to the center instead of the top position

Is there a way to make the page open at a specific div halfway down the page instead of starting from the top? Here is an example: <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"> <div id="d5"> <div id="d6"> Do ...

The issue of JQuery and document ready being triggered multiple times while loading data into a control

Ever since implementing the load function to load content into a DIV upon document ready, I've noticed that all associated functions are firing multiple times (often twice, and sometimes endlessly). The scripts included in the head tag of all pages a ...

How can I send a current variable through PHP?

I have a pressing deadline and I need some guidance before moving forward. Can someone please advise if what I'm attempting is feasible or if there's a quicker solution? I encountered some problems with an accordion menu, so as a temporary fix, ...