How to Make Rotated Elements in a Flexbox Fixed to The Right Side of a Page

  • Home
  • Languages
  • CSS
  • How to Make Rotated Elements in a Flexbox Fixed to The Right Side of a Page

Rotated HTML Text-Inputs with CSS Flexbox

So I made the following changes to your code:

  1. Made hsig-wrapper a full-width flexbox and the first column is sorted out.

  2. Flex items shrink only as much as its content as min-width is auto by default - so set min-width: 0 to as_detail element.

See demo below:

input {  width: 100%;  resize: vertical;  text-align: center;  font-family: Arial, Helvetica, sans-serif;  border: none;  background-color: transparent;  color: black;  outline: none;  font-weight: bold;  transition: ease-in-out, width .35s ease-in-out;}
input:hover,input:focus {  background-color: #baffc9;  border-radius: 3px;}
.label-row {  height: 3.0cm;  width: 18.8cm;  display: flex;  flex-direction: row;  flex-grow: 0;  flex-wrap: nowrap;}
.label {  border: 1px dashed black;  width: 9.4cm;  display: flex;  flex-direction: row;  flex-wrap: nowrap;}
.col-left {  width: 4.4cm;}
.col-middle {  width: 1.0cm;  border-left: 1px dotted black;  border-right: 1px dotted black;}
.col-right {  width: 4.0cm;}

/* ----- column-left ----- */
.hsig-wrapper {  display: flex; /* ADDED */  height: 100%; /* ADDED */  flex-direction: column;  justify-content: space-evenly;}
.hl {  font-size: 10px;  flex: 0 1 auto;}
.sk {  font-size: 18px;  flex: 0 1 auto;}
.format {  font-size: 18px;  flex: 0 1 auto;}
.hsig {  font-size: 18px;  flex: 0 1 auto;}
.sig_add {  font-size: 10px;  flex: 0 1 auto;}

/* ----- column-middle ----- */
.loc-wrapper {  background-color: transparent;  width: 100%;  height: 100%;  display: flex;  text-align: center;  justify-content: center;  align-items: center;}
.loc {  font-size: 20px;  width: 2.9cm;  height: 0.9cm;  -moz-transform: rotate(-90deg);  -webkit-transform: rotate(-90deg);  -o-transform: rotate(-90deg);  -ms-transform: rotate(-90deg);}

/* ----- column-right ----- */
.as-wrapper {  width: 100%;  height: 100%;  display: flex;  text-align: center;  justify-content: center;  flex-direction: row;  align-items: center;  /*flex-wrap: nowrap;*/  /*justify-content: space-evenly;*/}
.as_detail {  font-size: 18px;  width: 100%;  align-self: center;  flex: 0 1 auto;  width: 0.8cm;  /*height: 30%;*/  min-width: 0; /* ADDED */  -moz-transform: rotate(-90deg);  -webkit-transform: rotate(-90deg);  -o-transform: rotate(-90deg);  -ms-transform: rotate(-90deg);}
<div id="content">
  <div class="label-row">
    <div class="label">      <div class="col-left">        <div class="hsig-wrapper">          <input type="text" class="hl" id="hl" name="hl" value="Headline">          <input type="text" class="format" id="format" name="format" value="II">          <input type="text" class="hsig" id="hsig" name="hsig" value="12 345">          <input type="text" class="sig_add" id="sig_add" name="sig_add" value="Detail">        </div>      </div>      <div class="col-middle">        <div class="loc-wrapper">          <input type="text" class="loc" id="loc" name="loc" value="ABC">        </div>      </div>      <div class="col-right">        <div class="as-wrapper">          <input type="text" class="as_detail" id="as_detail_0" name="as_detail_0" value="1">          <input type="text" class="as_detail" id="as_detail_1" name="as_detail_1" value="2">          <input type="text" class="as_detail" id="as_detail_2" name="as_detail_2" value="3">          <input type="text" class="as_detail" id="as_detail_3" name="as_detail_3" value="4">        </div>      </div>    </div>
  </div>
</div>

Make flex items overlap

Here's how I'd do this using flexbox.

.cards {  display: flex;  align-content: center;  max-width: 35em;}
.cardWrapper {  overflow: hidden;}
.cardWrapper:last-child, .cardWrapper:hover {    overflow: visible;}
.card {    width: 10em;    min-width: 10em;    height: 6em;    border-radius: 0.5em;    border: solid #666 1px;    background-color: #ccc;    padding: 0.25em;      display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}
<div class="cards">  <div class="cardWrapper">    <div class="card">card 1 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 2 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 3 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 4 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 5 blah blah blah</div>  </div></div>

Flex Layout with fixed position (no scrolling) sidebar

Please look at the similar question with provided solution: How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar.

According to your code you can also wrap your inner content in "position: fixed" wrapper:

<div class="flexitem" id="canvas-left">
    <div class="fixed">
        <p>This content should not scroll</p>
    </div>
</div>

And add proper styling in CSS:

.fixed {
    position: fixed;
    width: 57px; /* according to #canvas-left */
}

Here is an example of your code with fixed left sidebar: http://jsfiddle.net/8hm3849m/. Note that this trick won't provide you proper flexible grid for sidebars, width of the wrapper should be fixed (or set dynamically via JavaScript).

Rotated elements in CSS that affect their parent's height correctly

Assuming that you want to rotate 90 degrees, this is possible, even for non-text elements - but like many interesting things in CSS, it requires a little cunning. My solution also technically invokes undefined behaviour according to the CSS 2 spec - so while I've tested and confirmed that it works in Chrome, Firefox, Safari, and Edge, I can't promise you that it won't break in a future browser release.

Short answer

Given HTML like this, where you want to rotate .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... introduce two wrapper elements around the element that you want to rotate:

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... and then use the following CSS, to rotate anti-clockwise (or see the commented out transform for a way to change it into a clockwise rotation):

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

Stack snippet demo

p {  /* Tweak the visuals of the paragraphs for easier visualiation: */  background: pink;  margin: 1px 0;  border: 1px solid black;}.rotation-wrapper-outer {  display: table;}.rotation-wrapper-inner {  padding: 50% 0;  height: 0;}.element-to-rotate {  display: block;  transform-origin: top left;  /* Note: for a CLOCKWISE rotation, use the commented-out     transform instead of this one. */  transform: rotate(-90deg) translate(-100%);  /* transform: rotate(90deg) translate(0, -100%); */  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains     text and you want a single long vertical line of text and the pre-rotation     width of your element is small enough that the text wraps: */  white-space: nowrap;}
<div id="container">  <p>Some text</p>  <p>More text</p>  <div class="rotation-wrapper-outer">    <div class="rotation-wrapper-inner">      <p class="element-to-rotate">Some rotated text</p>    </div>      </div>  <p>Even more text</p>  <img src="https://i.stack.imgur.com/ih8Fj.png">  <div class="rotation-wrapper-outer">    <div class="rotation-wrapper-inner">      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">    </div>  </div>  <img src="https://i.stack.imgur.com/ih8Fj.png"></div>

Rotating div with left and right edges slanted/cut back to parallel

Use transform: skew(ax, ay) with ax == 0
or transform: skewY(ay)
:

div {  width: 200px;  height: 20px;  background: green;  transform: skew(0, 20deg);  transform-origin: top left;}
<div></div>

set fixed spacing for flexbox list

i noticed that on my firefox the distance between the bottom of the
website and the list for links(terms,about...) is really large

This is the nature of the webpage you have created because the content only goes as far as that height. In order for your footer element to stay at the bottom: I recommend utilizing Flexbox & setting margin-top: auto to your footer. In order for the margin to kick in, simply give your container (in this case, .body) the flex display property & a minimum height of 100vh (so that it takes at least 100% of the viewport in terms of height) and assign column as it's flex-direction. This way, the footer can always stay at the bottom on your given layout.

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

footer.cl {
    margin-top: auto;
}

Align (CSS Rotated) Element to left of its container - HTML / CSS

You can set a transform origin and then adjust the offset from the transform like this. I also removed the Flex properties on body to accomplish this correctly. You can adjust to your liking from this point.

body {  margin: 0;   /*display: flex;   justify-content: center;   align-items: center;*/  width: 100%;   height: 100vh;  position: relative;}
#wrapper {  display: flex;  justify-content: center;  background: yellow;  transform: rotate(-90deg) translate(-100%, 0);  transform-origin: left top;  position: absolute;  top: 0px;  left: 0px;}
#wrapper svg {margin: 1rem}text {font-size: 1rem}
<!-- THIS IS THE YELLOW BLOCK CONTAINING THE SVG ELEMENTS --><div id="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />    <text x="16" y="25" fill="white">Some Text 1</text>  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />    <text x="16" y="25" fill="white">Some Text 2</text>  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />    <text x="16" y="25" fill="white">Some Text 3</text>  </svg>  </div>

Related Topics

What Is Position:Relative Useful For

Change Styling on Hover Semantic-Ui-React Components

Chrome 37 Calc Rounding

Use Full Width Excluding Overflow Scrollbar with "Position: Absolute"

CSS: How to Center Box Div Element Directly in Center

Django 1.8 Static Files Doesnt Work

Cant Edit CSS Style Properties (Grayed Out & Blocked) in Chrome

Ie 11 Ignores Min-Width When Using Flex Width

Using HTML Attributes as CSS Property Values

Why Doesn't Blur(0) Remove All Text Blur in Webkit/Chrome on Retina Screens

Turn Off Alt Tags on Links with CSS

Use CSS to Make Background-Image Above Background-Color in a List

CSS Column-Count Not Respected

CSS - Underline Text But Ignore The Spaces

CSS: Is Transition: Left/Top Gpu Accelerated

Chrome Will Increase The Font Size When Zooming Out

Setting Linear Gradient Height and Width

Complex Selector Don't Work in Last Blink Version: Nth-Child(2):Nth-Last-Child(2){}


Leave a reply



Submit