CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
greener
greener

Reputation: 5069

Responsive design toggle using Bootstrap

I have this responsive design using Bootstrap's grid system:

HTML

<div class="container">
    <div class="col-xs-12 col-md-7 view">
        <div id="panelviewer">  
            <div class="row">
                <div class="col-xs-12 col-md-6 panel1"><a href="javascript:void(0)">ONE</a></div>
                <div class="col-xs-12 col-md-6 panel2"><br><br><a href="javascript:void(0)">TWO</a></div>           
            </div>
        </div>      
    </div>
</div>

CSS

.container {
    max-width:600px;
    overflow:visible;
}
.view {
    border:dashed #333 1px;
}
.row {
    overflow:visible;
}
#panelviewer {
    position:relative;
}
#panelviewer .row {
    white-space:nowrap;
}
.panel1 {
    display:inline-block;
    float:none;
    background:#ccc;
    vertical-align:top
}
.panel2 {
    display:inline-block;
    float:none;
    background:#eee;
    vertical-align:top
}
@media (min-width: 990px) {
    #panelviewer {
        width:671px;
    }
}
.open {
    right:100%;
    margin-left:-34px;
}

I'm trying the create a toggle effect bringing a div into, and out of, view. I can't seem to the get the measurements right. Specifically, I have these questions:

  1. Why is a 100% right offset combined with a margin-left value not bringing the entire div into view?
  2. Why is the div's width not fitting to the parent (desktop only)?
  3. Why is there a 4px gap between the two divs?

Take a look at (and resize) the JsFiddle demo to see what I mean.

Upvotes: 0

Views: 271

Answers (2)

greener
greener

Reputation: 5069

Following Terry's answer, I ended up doing away with the padding on the parent div view. This brought the divs into line with the exception of the 4px space.

I then used the <!-- --> hack to remove it:

<div class="row">
   <div class="col-xs-12 col-md-6 panel1">
      <a href="javascript:void(0)">ONE</a>
   </div><!--
--><div class="col-xs-12 col-md-6 panel2">
      <br><br><a href="javascript:void(0)">TWO</a>
   </div>
</div>

See jsfiddle

Upvotes: 1

Terry
Terry

Reputation: 66103

Some answers to your question:

  1. This is because there are negative margins influencing the position of each panels from Bootstrap CSS
  2. Padding is declared in the parent, and when specifying 100% width on the panels, they will stretch to the content-box width of the parent, which excludes paddings.
  3. This is because you have declared the two elements as inline-block elements: this means that the browser will treat them as inline elements when laying them out, and interpreting any whitespace between them as space: so the two elements are treated like two separate words.

What I would suggest is that you reset the margins and paddings for the .row element, and then instead of playing with both left and right positions, stick to one. Declare the individual panels as block-level elements, and use absolute positioning. However, since absolute positioning takes them out of the document flow, you will need to declare an explicit height for the parent.

.row {
    overflow:visible;
    position: relative;
    width: 100%;
    height: 50px; /* Or any desired value */
    margin: 0;
}
#panelviewer {
    position: relative;
}
.row > div {
    position: absolute;
    width: 100%;
}
.panel1 {
    display: block;
    background: #ccc;
}
.panel2 {
    display: block;
    background: #eee;
    left: 100%;
}
.open {
    left: -100%;
}

http://jsfiddle.net/teddyrised/7HcQ8/6/

Upvotes: 1

Related Questions