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.

content

rows

labels

label

columns

column

input["text"]

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:

justify-content: space-evenly;

Detail

loc

ABC

What can I do in these cases? Is my flexbox model to complicated or even built up totally wrong? Do you have an idea?

1 Answer
1

So I made the following changes to your code:

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

hsig-wrapper

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.

min-width

min-width: 0

as_detail

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>

col-left

col-right

as_detail

Hand-1.2

as-detail

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy