CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SBB
SBB

Reputation: 8970

Legacy Bootstrap Span Issue

I am working with a legacy bootstrap tool for my company. An issue I am having is using panels from bootstrap 3 in the legacy version.

While this is working to an extent, there are some span issues that are coming up.

I have a container with a panel on the page which is inside of a span12 (full length of the page). Within the panel, I am trying to add another panel that is full width of it. Normally I would say, span12 and it would adjust it to what is necessary but in this case, its causing it to hang over.

Here is a sample of the HTML being used: 

<div id="main" class="container">
   <div class="panel panel-primary custom-panel">
      <div class="panel-heading ph"> <span class="panel-title"><i class="icon-bullhorn"></i>&nbsp;&nbsp;Request Communication</span><button name="addComment" commenttype="request" type="button" class="btn btn-mini pull-right"><i class="icon-plus"></i>&nbsp;&nbsp;Add Comment</button></div>
      <div class="panel-body well">
         <div id="requestComments" class="tab-pane active">
            <span name="messages">
               <div name="parent_32" class="row parentMessage">
                  <div class="span12">
                     <div class="panel panel-default">
                        <div class="panel-heading">
                           <small><a target="_BLANK" href="#">Name</a> <span class="text-muted">commented <a title="Timestamp: 2015-08-24 11:20 UTC" data-toggle="tooltip" class="deco-none">2 days ago</a></span></small>
                           <div class="btn-group pull-right">
                              <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-mini dropdown-toggle" type="button"><i class="icon-cog"></i></button>
                              <ul class="dropdown-menu">
                                 <li><a messageid="32" name="deleteParent"><i class="icon-trash"></i>&nbsp;&nbsp;Delete Message</a></li>
                              </ul>
                           </div>
                        </div>
                        <div class="panel-body"><small>dgdfgdfg</small></div>
                     </div>
                  </div>
               </div>
            </span>
         </div>
      </div>
   </div>
</div>

enter image description here

Fiddle: http://jsfiddle.net/j2j6gnb1/

How can I go about making the inner panel, the full width of its parent (with the same padding it has on the left)?

Upvotes: 1

Views: 45

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Remove the margins being set on elements .parentMessage and .span and set width: 100% on the .span12 element.

.parentMessage {
    margin: 0;
}

.span12 {
    width: 100%;
    margin: 0;
}

Fiddle

Upvotes: 3

Related Questions