james dean 999 james dean 999 - 3 months ago 49
CSS Question

Ionic Header with Title and 2 Buttons on right side

I am using Ionic to build my app and I have a modal view that pops up and am trying to have a

HEADER TITLE
and then have 2 buttons on the right of the
TITLE
but when I try to do this it always puts one of the buttons on the left. I Here is the main code snippet:



<h1 class="title">Title!</h1>

<div class="buttons">
<button class="button">Right Button</button>
</div>
<div class="buttons">
<button side="right" class="button">Left Button</button>
</div>
</ion-header-bar>


Full code available here.

Answer

That happens because Ionic selects the buttons class following this rule:

.bar .title + .buttons { ... }

That means, that these styles only apply to the element of class buttons, that's directly following the element with class title! See more information about the plus selector on MDN.

Just put the two buttons together in the div wrapper to avoid this behaviour:

<div class="buttons">
  <button class="button">Right Button</button>
  <button class="button">Left Button</button>
</div>

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Ionic Template</title>
  <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
</head>

<body>
  <ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">Title!</h1>
      <div class="buttons">
        <button class="button">Right Button</button>
        <button class="button">Left Button</button>
      </div>
    </ion-header-bar>
  </ion-modal-view>
</body>

</html>