0

I would like to align a form header text that I rotate -90° from CSS on the top and left of it column div. Basically, I rotate it and stick it against the related form that is on the right.

The thing is that, depending on the header text length, I will not have the same results if I use top:50%; on the form header DOM node. I made a picture to make it clearler :

enter image description here

As you can see, a container column align the form in the current page in both logo and form rows. The form row (after the logo) must have the fields centred on the main page, and display the form header in the left offset space.

If main form header text is longer, I get a result like this: enter image description here

The main structure is then like this (className stands for class, I am using React) in what I tried so far:

  <div className='container'>
      <!-- logo container -->
     <div className='row'>
        <div className='col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 text-center'>
           <br/>
           <img src='/img/logo.svg' className='logo_img' />
       </div>
    </div>
    <!-- form container -->
    <div className='row'>
        <div className='col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 text-center'>
         <!-- here I add 2 tested columns for the form internal layout  -->
         <div className='col-xs-1 col-sm-1 ...'>
            <h1 className='formHeader'>Form Header</h1>
         </div>
         <div className='col-xs-10 ...'>
            <!-- here I put my form fields and submit button  -->
         </div>
       </div>

I tried various approaches:

  • The version above: if I put the header in its own column, it allows me to be sure it will be well positioned in width whatever the screen size is, but the column being too small in height (only one h1 before rotation is inside), I end up not being able to align it vertically
  • If I put the header in the main form column, and I put the form in a nested column with offset (header is pulled left and positioned after the form fields column) I almost get what I want by playing with the display and position css properties but it does not solve the issue for any length of form header, it is specific to the actual header text length. Besides, I can't align top left the header on the left part of my form column.

Please don't hesitate to require more details.

Billybobbonnet
  • 3,156
  • 4
  • 23
  • 49
  • A minimal demo here would be useful...not the whole thing...just enough to demo the issue... – Paulie_D Mar 28 '16 at 12:29
  • 1
    might be a duplicate of http://stackoverflow.com/questions/36140628/resize-div-when-content-is-rotated/36141551 (at least same approach using translate. You should let your CSS as well, so we can help you out where issue would be. their can be also a way to grow container high enough(at least height=length of text) to containthe whole rotated text. – G-Cyrillus Mar 28 '16 at 12:32
  • atually we do need more details :) . full html and class + CSS added to bootstrap. You may even set a snippet to show live your code in your question :) It will help you to get relevant answers .. or tips in comments Tis is what we got at the most : http://codepen.io/anon/pen/EKXGyL – G-Cyrillus Mar 28 '16 at 12:42
  • I don't know if my question can be considered as a duplicate but the answer seems definitely the same than the question linked by @GCyrillus above. I will give it a try as soon as I can and come back with more details if it does not work. If it works, you can answer by linking your (awesome) other answer. – Billybobbonnet Mar 28 '16 at 13:33
  • By the way @GCyrillus, when you write "at least same approach using translate", does that imply there is another possible approach to achieve this? (I mean a clean approach, not the image way) – Billybobbonnet Mar 28 '16 at 13:35
  • it was a guess since no css is shown, you obviously used transform:rotate(); and probably some margins or absolute or some other technic such as inline-block/vertical-align, or ... ? :) or maybe you also took a look at writing-mode ? :) – G-Cyrillus Mar 28 '16 at 13:40

1 Answers1

1

Something like this:

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.container {
  margin-top: 10px;
}

div {
  box-shadow:1px 1px 1px  1px grey;
  height: 500px; /* demo only */
}

.rotator {
  position: relative;
}

.formHeader {
  position: absolute;
  padding: 0 1em;
  margin: 0;
  top:0;
  left: 50%;
  white-space:nowrap;
  background: pink;
  transform-origin:  center right;
  transform: translate(-100%,-50%) rotate(-90deg);
  
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
     <div class='row'>
 
           <div class='rotator col-xs-1'>
              <h1 class='formHeader'>Form Header</h1>
           </div>
           <div class='col-xs-11 ...'>
              <!-- here I put my form fields and submit button  -->
           </div>
         </div>
   </div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161