CODEWITHSUNDEEP
jquerycssjquery-mobileresponsive-design
deblocker
deblocker

Reputation: 7687

Bottom alignment of widgets inside ui-grid blocks

I am using the JQM grids for grouping and dividing content. Is there a way to align the content to the bottom of the ui-grid-a or ui-grid-b? I tried many of the proposed solutions to make the ui-block-a and ui-block-b divs the same height, but none of them played nicely together with the JQM grid system.

Below is an example with two flipswitch widgets which have labels of different text lenght. How can I keep the widgets always vertical aligned? (Pure CSS but w/out Flex appreciated)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
    <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
    <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
    <label for="flip-checkbox-2">Flipswitch 2:</label>
    <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

Upvotes: 2

Views: 468

Answers (3)

Sally CJ
Sally CJ

Reputation: 15620

In reply to your answer:

Though I can't fully understand why, setting the block width to 49% instead of 50% does the job

Check these out:

a series of inline-block elements formatted like you normally format HTML will have spaces in between them

— Fighting the Space Between Inline Block Elements by CSS-TRICKS

One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.

— Remove Whitespace Between Inline-Block Elements by David Walsh

So setting the display of the .ui-block-a and .ui-block-b to inline-block gives you the ability to vertically-align the elements at the bottom (of its parent/container) — by setting their vertical-align to bottom.

However, setting their width to 50% will push the .ui-block-b down below the .ui-block-a because of the (white)space between the elements, in the HTML code:

</div>
<div class="ui-block-b">

There are several ways you can choose from in order to fix that issue:

  • Remove the spaces

    • </div><div class="ui-block-b">

    Or use the "comment trick" (I used this in the Code Snippet):

    </div><!--
--><div class="ui-block-b">

  • Apply a Negative Margin on the inline-block elements

    • .ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
  margin-right: -4px;
}

  • Use font-size: 0 on the parent

    • .ui-grid-a.align-widgets {
  font-size: 0; /* Removes the `inline-block` gaps. */
}

.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
  font-size: 12px;
}

    For more details, see:

    /* JQM Better alignment for grids with long heading text */
.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a align-widgets">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
            <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div><!--
          This comment block removes the `inline-block` gaps, allowing you to use
          a 50% width on `.ui-block-a` and `.ui-block-b`.
        --><div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-2">Flipswitch 2:</label>
            <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

    Upvotes: 0

    Taki
    Taki

    Reputation: 17654

    you can use display:table on the parent and display:table-cell for the children :

    .ui-grid-a.align-widgets{
  display: table;
}
.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: table-cell;  
  float: none;  
  vertical-align: bottom;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a align-widgets">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
            <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-2">Flipswitch 2:</label>
            <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

    Upvotes: 1

    deblocker
    deblocker

    Reputation: 7687

    Though I can't fully understand why, setting the block width to 49% instead of 50% does the job:

    /* JQM Better alignment for grids with long heading text */
.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 49%;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a align-widgets">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
            <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-2">Flipswitch 2:</label>
            <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

    Upvotes: 0

    Related Questions