css - Buttons overlay in xs viewport because not auto resize -
i have 1 line (div tag class col-xs-6
) 2 columns of same width. inside each column, there 1 auto-resizing button max width 150px depends on length of text inside. input long text inside buttons got same max width, 150px. auto resize window xs viewport, until 1 size (i think width of window smaller 300px plus padding) buttons overlay on each other.
input[type="submit"] { position: relative; min-height: 34px; margin: 0 auto; min-width: 80px; max-width: 150px; padding: 0 10px; width: auto; display: block; border-radius: 5px; background-color: #ff7900; color: white; border: 1px solid #ff7900; } .nf-filler-control input[type="submit"] { display: inline-block !important; } .nf-button { display: inline-block; position: relative; color: white; }
<!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <div> <div style="background:green;" class="col-xs-6"> <div> <div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button"> <input type="submit" value="as crossed tosssss sxcffffxxx" /> </div> </div> </div> <div style="background:red;" class="nf-col col-xs-6"> <div> <div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button"> <input type="submit" value="as crossed tosssss sxcffffxxx" /> </div> </div> </d
the problem is: currently, div tag auto resize buttons keep same width (they don't auto resize along parent div tag). overflow outside parent div tags , overlay on each other.
what expect here is:
solution 1: when auto resize window, div tag auto resize buttons still keep same width 1 point, there no enough space both should break 2 lines (one button on each line)
solution 2: when auto resize window, div tag auto resize button auto resize (they should inside div tag, not overflow)
below code in fiddle
the reason why won't re-size because have static width , height, due fact used pixels format. change have px vw , vh. should add top: 0px; left: 0px; position absolute;
css , move around transform: translate(0-100vw, 0-100 vh);
this ensure not move around, , re-size :-)
Comments
Post a Comment