Chris
Reputation: 330
Rotated HTML Text-Inputs with CSS Flexbox
There are labels on my web page that are arranged by the following pattern:
The main container content contains rows. A row has two labels in it and a single label contains three columns. Each column can contain one or more input["text"] elements.
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 {
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%;*/
-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>On liveweave is almost the whole problem pictured.
The Problem:
- The only column that is working is col-middle.
- The left ignores the
justify-content: space-evenly;. The input-text boxes do not use the bottom space: I could not push theDetaildown to the line. - In the col-right I could rotate the input-text boxes, but their size is too small. I wanted to align them in the middle of the label (like the
locABC), but they won't move down. Every time when I tried to increase their width (from 0.8cm to 0.9cm), the alignment was destroyed.
What can I do in these cases? Is my flexbox model to complicated or even built up totally wrong? Do you have an idea?
Upvotes: 1
Views: 383
Answers (2)
Suphi Atlı
Reputation: 1
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 {
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%;*/
-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>Upvotes: 0
kukkuz
Reputation: 42352
So I made the following changes to your code:
Made
hsig-wrappera full-width flexbox and the first column is sorted out.Flex items shrink only as much as its content as
min-widthis auto by default - so setmin-width: 0toas_detailelement.
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>Upvotes: 1
Related Questions
- Left align a rotated text inside a flex
- How to place rotated text properly?
- Flexbox with rotated text
- Using CSS to rotate an input's value 90 degrees
- Rotate text 90° with the resulting div having position within parent
- Is there a way to rotate text input?
- Make rotated text take entire height of parent
- Flexbox Vertical alignment and rotation of text
- How to rotate two flexbox rows?
- How can I vertically center rotated text using Flexbox layout?