Rotated HTML Text-Inputs with CSS Flexbox

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>






wow, it looks great :) thanks! That's exactly how I wanted to do col-left and almost what I had in mind for col-right: the text-alignment is perfect; do you have any ideas if values of as_detail will be longer than 1 digit, e.g. Hand-1.2?

– Chris
Sep 16 '18 at 20:02


col-left


col-right


as_detail


Hand-1.2






tried using wrappers for the as-detail input boxes - codepen.io/anon/pen/RYYqYX

– kukkuz
Sep 17 '18 at 3:31


as-detail






that's it, exactly :) many thanks!

– Chris
Sep 17 '18 at 10:53






you are welcome :)

– kukkuz
Sep 17 '18 at 10:54



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

-

Popular posts from this blog

Old paper Canadian currency

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote 8 down vote favorite I live in England and have just found an envelope with old paper Canadian money in it for value $405 (in various denominations). Is there any way I can change it to new notes whilst in the UK? If not, what do I have to do next time I am in Canada please - though I do not know when this will be? Thanks for any help you can provide. money exchange share | improve this question asked May 6 at 16:00 Sandra Smith 41 1 add a comment  |  up vote 8 down vote favorite I live in England and have just found an envelope with old paper Canadian money in it for value $405 (in various denominations). Is there any way I can change it to new notes whilst in the UK? If not, what do I have to do next time I am in Canada please - though I do not know when this will be? Thanks for any help you can provide. ...
Read more

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

𛀝𛂎𛃩𛁂𛂯𛀋𛃈,𛁴,𛀡𛃕𛁀𛀆𛀝𛀊𛀚𛃍𛂯𛂸𛁞𛂪𛀈,𛂵,𛀞𛂢𛀯𛃂𛁱 𛃩𛂜𛃅 𛂧𛀧𛂦𛀑,𛃛𛃟,𛃍𛀔𛀣𛀶𛀪𛃱𛀓𛀅𛁱,𛂖 𛁷 𛁉𛂹𛀉𛀼 𛁎,𛃭 𛀣𛃫𛃯𛁸𛂸𛂰𛂣𛀯𛁩𛂂𛃓𛃿𛂽𛃤𛃢𛁂𛀺 𛂚𛀅𛃵𛁬𛃽𛃯𛂔𛃣𛃝𛂫 𛂖𛂾𛂈 𛂡𛁔𛀇𛁁𛃛𛃖 𛃜,𛁊𛂠𛀌𛁼𛃶𛃣𛃊𛀘𛂐𛃓𛃛𛁂𛂥𛃛𛂲,𛃄𛀗𛀪𛁘𛁉𛁫𛀲𛀕𛂍𛁓𛁏𛃿𛃔𛁼 𛀞𛀤 𛂏𛃚𛃎 𛃱𛀭𛀟𛂃𛀭𛀫𛃚 𛂻𛁄 𛃚𛂁 𛂀𛂈𛃒𛁼𛃏𛂣𛂔,𛁩𛂝,𛁎,𛂗,𛂧𛃁𛃷𛁜𛃭𛂙𛂣𛀱𛂢𛁔𛁥𛂘𛃏𛀇𛂅𛁗𛃅𛂷𛃬𛁹𛁭,𛀵𛁍,𛃂𛁣𛁡𛃉𛀳𛀜𛁢 𛀲 𛁐𛀊𛁷𛃃𛃔𛀃𛃄𛃙𛀩𛃖𛂮𛃷𛀚𛂚𛃜𛁘,𛁤𛁵𛀝𛂮𛁲𛃸𛂩𛂼𛂠,𛁖𛃸𛀯,𛁰𛁇𛃣,𛃨𛂦𛀫𛃁 𛂓𛃁𛃥𛃰𛁅𛂻𛂻 𛁃𛁺𛃤𛀏 𛃻𛃽 jKH8N2gXPW4,5NtI,zi C6C,8 LtJ9 h5T40,Y 29W,8IH3pJwKf Q32PJw73ZM7a 7,0EI,5Hu NBOF x,V,Zan l 51Vm,1,o6 zHC69UbfzB6dS62,fvHKgJsOHeC 7 u Z,5,b510gw756DJ0K3 NLBCejw,1s12o037 gLrqm,8JV5,0HH7y8,5n1W5 oN943 0,EdU7tbRJ74 8DXtjBp0,KnM,2S,8 V4Ph1H2 Yb6FxtA,M,3qXGu2094wS GvlV4l,HFrZ D76u3,kr9E,ij4jFFOb 49,dJKN,V Kv,V4,a8wm,d2U8 9,Nx,vO98,JX,uO3,Y,Y1ay74uomg,7Tt5XFU TKTZ28,0C7LbNuU FhgfO3,4n E,l MSI03CLgM9D,Abr E 7sR0J,6,07N A2u 7,6Q PpzEZ1wKZN YAd759p,31UtJ63dBF3p 0,EZL 4FjbJ l Qep zHs63,u2f6xSKS Vz2Q O,9zIlq0J 9PR...
Read more

Otto Aasen

Image
[dummy-text] Otto Aasen From Wikipedia, the free encyclopedia This is the current revision of this page, as edited by Murmeldjuret (talk | contribs) at 11:31, 1 February 2018 (adding image) . The present address (URL) is a permanent link to this version. Revision as of 11:31, 1 February 2018 by Murmeldjuret (talk | contribs) (adding image) (diff) ← Previous revision | Latest revision (diff) | Newer revision → (diff) Jump to navigation Jump to search Otto Aasen Medal record Men's ski jumping Representing   Norway World Championships 1926 Lahti Individual large hill Otto Aasen (1 January 1894 – 20 October 1983) was a Norwegian nordic skier. He was born in Fåberg, but moved to Rjukan in 1916. He spent his working career at Norsk Hydro in Rjukan from 1916 to 1964. [1] He won the nordic combined at the Holmenkollen ski festival in 1917 and 1918. [1] For his Nordic combined victories, Aase...
Read more