CODEWITHSUNDEEP
twitter-bootstrap
CarbonandH20
CarbonandH20

Reputation: 361

Bootstrap: What is stopping these columns with fields/widths from collapsing properly compared to one with plain text?

I am trying to collapse a row into two parts when on a phone. This works when the columns only contain text, but when I tried to add forms (which include fixed widths), the collapsing fails. What is stopping the collapsing from working in the second case? If it had something to do with the fixed width of the fields, how do I get around that?

Both cases are shown here: http://www.bootply.com/124166#

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2" id="d2">
        <div class="row">
        <div class="col-md-6" id="inputhalf1">
            text            
        </div>
          <div class="col-md-6" id="inputhalf2">
            <div id="inputhalf2_content">
              Text
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="row">
       <div class="col-md-8 col-md-offset-2" id="d2">
        <div class="row">
        <div class="col-md-6" id="inputhalf1">
            <input class="form-control" id="cas_datepicker" type="text" placeholder="mm/dd/yyyy">
            <button class="btn btn-default" id="cas_datebutton" type="button">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
            <div id="cas_radios">
                <input name="operation" type="radio" value="plus">plus<br>
                <input name="operation" type="radio" value="minus">minus
            </div>

        </div>
          <div class="col-md-6" id="inputhalf2">
            <div id="inputhalf2_content">
              <input name="daystoaddorsubtract" class="form-control" id="cas_text2" type="number" placeholder="#">
              <div id="cas_radios">
                  <input name="cal_or_work" type="radio" value="calendar">calendar days<br>
                  <input name="cal_or_work" type="radio" value="work">work days
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>

</div>

CSS:

#d2 {
    border: solid;
}

#cas_datepicker, #cas_datebutton, #cas_radios, #cas_text2 {
    float: left;
}

#cas_datepicker {
  width: 110px;
}

#cas_text2 {
    width: 70px;
}

#inputhalf1 {
border: dotted
}

#inputhalf2 {
  border: dotted;
}

#inputhalf2_content {
}

Upvotes: 1

Views: 47

Answers (1)

Billy Moat
Billy Moat

Reputation: 21050

It would be best to avoid using fixed width on your form fields and just let them flow normally. If you have to used fixed widths on larger devices then you could change the width using media queries.

Bootstrap is a mobile first framework so that means you should be building to mobile devices first as standard. So you would introduce fixed widths for your form fields for devices of XXX resolution and higher, e.g.

@media (min-width: 768px) {

    #cas_text2 {
        width: 70px;
    }

}

The above code would give the #cas_text2 element a fixed width of 70px in devices with a minimum width of 768px. Obviously you can amend that as required.

Upvotes: 1

Related Questions