Search code examples
twitter-bootstrapresponsive-designmobile-angular-ui

Bootstrap responsive grid not working with mobileangularui

I am trying out the responsive grid in bootstrap. I have created a project in Angular JS, mobile-angular-ui and phone gap.

In one of the html pages, I have the following code.

<div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6">Jane Doe</div>
      <div class="col-xs-12 col-sm-6 col-md-6">House 10, Street 8, City.</div>
      <div class="col-xs-12 col-sm-6 col-md-6">John Doe</div>
      <div class="col-xs-12 col-sm-6 col-md-6">Apartment 10A, Blding XYZ, Block 10, City.</div>
</div>

I tried this out in screen sizes 320x480 (iPhone 4) and 768x1024 (iPad). What I wanted to happen is:

  • on the iphone's screen size, it should have shown a table with 1 column and 4 rows
  • on iPad's screen size it should have shown a table with 2 columns and 2 rows.

However, the result is as the same for both:

iPad:

enter image description here

iPhone:

enter image description here

Desktop Browser:

enter image description here

How do I achieve this behaviour?

Solution

  • After a lot of testing with different permutations and combinations, we came to the conclusion that the sm screen size is getting ignored. Probably a bug in mobile-angular-ui?

    The responsiveness is working for the xs and md screen sizes. As I successively increase the screen size, the responsiveness jumps from xs to md.

    So, I changed the default screen sizes in mobile-angular-ui as per my requirements and used only the xs, md and lg size classes.

    <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-3">Jane Doe</div>
    <div class="col-xs-12 col-md-6 col-lg-3">House 10, Street 8, City.</div>
    <div class="col-xs-12 col-md-6 col-lg-3">John Doe</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Apartment 10A, Blding XYZ, Block 10, City.</div>
</div>