Using boxes with and without solid header breaks responsive layout

[YasserHassan]

Currently the outer box container (the DIV with class="box") has different top and bottom borders. Without solid header, the top and bottom borders are 1px/1px. In the case of a regular header, the top and bottom borders are 3px/0 respectively. When both boxes are used in sequence in a responsive design, this can create a gap in the locations because of this 1px difference. A practical example is shown below, assume R = regular box, S = solid box.

R1 S1
   S2
S3 S4

Notice the gap below R1 whose height would be 1px more than S1 pushing S2 to the right under S1 instead of beneath R1 if the flow was normal.

[almasaeed2010]

This depends on your implementation of the grid. When using Bootstrap's grid system, this would not happen:

ROW
  COL1      COL2
  R1        S1
  S3        S2
            S4
  /COL1    /COL2
/Row

[YasserHassan]

Yes I am using Bootstrap grid and my implementation is something like this:

ROW
R1(col-6) S1(col-6) S2(col-6) S3(col-6) S4(col-6) ...etc
/ROW

So the elements would be automatically rearranged horizontally, left to right, on window resizing or element removal. Using columns would restrict that and the result would not be as good in my opinion.

[almasaeed2010]

Are you applying the col-* classes to the box or on a containing <div>?

[YasserHassan]

I'm applying it to the box's containing DIV. It does not work with the box's own DIV.

[almasaeed2010]

I must be misunderstanding something then. Could you please provide the code or a screenshot of the issue. Access to the page would be preferable. Thanks.

[YasserHassan]

According to #437, we can ignore the responsive part and consequently I'm not sure if that 1 pixel difference would be an issue anymore. However, if you are seeking pixel-level perfection, go to the widgets example page and look at Firebug layout numbers of the boxes shown below. You'll find different top and bottom pixels with different total in each.

[almasaeed2010]

I got that part but how does that affect the consistency of the template? Different elements can have different sizes. The solid and regular boxes are defined for different purposes. At least this is how I thought of it when I built it. If I add the 3px top border or passing to the header of the solid box, it will create an odd look. Same goes for removing the 3px from the regular box.

I would simply not add differently styled boxes on the same page except for emphasis on certain blocks.

@YasserHassan are you using AdminLTE in a certain project? It seems like you are interested in it and I like seeing the template in action.

[YasserHassan]

I was under the impression that these boxes should have the same dimensions for a possible mixed use. Normally such slight difference would not have any effect. In my case, I was experimenting with different styles and colors on the same page with auto arrangement to choose one to stick to then use it alone as you mentioned. This is where that slight difference broke it. Again this is not longer relevant according to #437.

Yes I am using the template in a project but it is not online yet. By the way @almasaeed2010, AdminLTE is becoming very popular, congratulations.