Bootstrap inputs align in CSS Box

Question

I have a problem with my css box , i created jsfiddle

the inputs need to be aligned vertically and horizontally
I need to make a responsive CSS box to control the div

Here my CSS:

 .CssBox .MargingBox input#MarginTop,
 .CssBox .BorderBox input#BorderTop,
 .CssBox .PaddingBox input#PaddingTop {
    left: 45%;
    top: 12px;
 }

 .CssBox .MargingBox input#MarginRight,
 .CssBox .BorderBox input#BorderRight,
 .CssBox .PaddingBox input#PaddingRight {
    top: 50%;
    right: 8px;
 }

 .CssBox .MargingBox input#MarginBottom,
 .CssBox .BorderBox input#BorderBottom,
 .CssBox .PaddingBox input#PaddingBottom {
    left: 46%;
    bottom: 6px;
 }

 .CssBox .MargingBox input#MarginLeft,
 .CssBox .BorderBox input#BorderLeft,
 .CssBox .PaddingBox input#PaddingLeft {
    top: 46%;
    left: 8px;
 }

@amit , yes it is happening due to different values of top and left :D — Mohamed Samy
– Mohamed Samy, Commented Aug 24, 2015 at 10:59
@MohamedSamy it's due to you are providing the all 3 main div's height as hard coded that and you need to set left right bottom top with respect to divide by 3 of them — Himesh Aadeshara
– Himesh Aadeshara, Commented Aug 24, 2015 at 11:11

Masoom · Accepted Answer · 2015-08-24 11:24:59Z

1

Playing with top, right, bottom, left values is not enough. You should give negative margin and change the height of all the boxes to get this effect.

If width of the input box is 30px and height is 25px you should give negative margin = width(or)height/2 respective it.

Working fiddle here: http://jsfiddle.net/MasoomS/xecps98v/1/

edited Aug 24, 2015 at 11:24

answered Aug 24, 2015 at 11:16

Masoom

7311 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohamed Samy Over a year ago

Thanks Man , you save me life

andyb · Accepted Answer · 2015-08-24 12:09:25Z

If you correct the height of the various containers so that the height and margins add up correctly to the parent's height you could use calc to move each <input> into the correct position. Please note I had to change the .MargingBox to use the default box-sizing of content-box; otherwise the calculated width and height included the 1px margin which shifted the outer left and right inputs up by 1px.

.CssBox .MargingBox {
    position: relative;
    border: 1px dashed #CCC;
    height: 250px;
}
.CssBox .BorderBox {
    position: relative;
    margin: 44px;
    height:162px;
    background-color: #E3E7ED;
}
.CssBox .PaddingBox {
    position:relative;
    top:44px;
    margin: 44px;
    height:74px;
    background-color: #FAFAFA;
}
.CssBox input {
    width: 30px !important;
    height: 25px;
    position: absolute;
    padding: 5px;
    text-align: center;
    border-radius: 0;
}
.CssBox .MargingBox input#MarginTop, .CssBox .BorderBox input#BorderTop, .CssBox .PaddingBox input#PaddingTop {
    left: calc(50% - 30px);
    top: 12px;
}
.CssBox .MargingBox input#MarginRight, .CssBox .BorderBox input#BorderRight, .CssBox .PaddingBox input#PaddingRight {
    top: calc(50% - 12.5px);
    right: 8px;
}
.CssBox .MargingBox input#MarginBottom, .CssBox .BorderBox input#BorderBottom, .CssBox .PaddingBox input#PaddingBottom {
    left: calc(50% - 30px);
    bottom: 6px;
}
.CssBox .MargingBox input#MarginLeft, .CssBox .BorderBox input#BorderLeft, .CssBox .PaddingBox input#PaddingLeft {
    top: calc(50% - 12.5px);
    left: 8px;
}
.CssBox .MargingBox {
    box-sizing: content-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-body container">
    <div class="row-fluid">
        <div class="col-sm-8 CssBox">
            <div class="MargingBox">
                <input type="text" class="form-control margin_part" id="MarginTop" placeholder="-">
                <input type="text" class="form-control margin_part" id="MarginRight" placeholder="-">
                <input type="text" class="form-control margin_part" id="MarginBottom" placeholder="-">
                <input type="text" class="form-control margin_part" id="MarginLeft" placeholder="-">
                <div class="BorderBox">
                    <input type="text" class="form-control .padding_part" id="BorderTop" placeholder="-">
                    <input type="text" class="form-control .padding_part" id="BorderRight" placeholder="-">
                    <input type="text" class="form-control .padding_part" id="BorderBottom" placeholder="-">
                    <input type="text" class="form-control .padding_part" id="BorderLeft" placeholder="-">
                    <div class="PaddingBox row-fluid">
                        <input type="text" class="form-control" id="PaddingTop" placeholder="-">
                        <input type="text" class="form-control" id="PaddingRight" placeholder="-">
                        <input type="text" class="form-control" id="PaddingBottom" placeholder="-">
                        <input type="text" class="form-control" id="PaddingLeft" placeholder="-">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4"></div>
</div>

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-24 11:19:27Z

0

I would suggest that you dont use Bootstraps CSS with this and use your own using Flex/Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) CSS as this will have a better outcome. Also use media queries so the box shows correctly on smaller displays/resizing

edited Aug 24, 2015 at 11:19

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Aug 24, 2015 at 10:56

Anthony Broadbent

4034 silver badges15 bronze badges

Collectives™ on Stack Overflow

Bootstrap inputs align in CSS Box

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related