Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228603

Block width buttons become full width buttons with combined tabs and panel UI

$
0
0

I've managed to solve this as I realised that the 'padding=true' attribute (used on ion-content directives) simply adds the '.padding' class, which is provided as part of Ionic's default CSS.

In which case I simply surround any buttons that I wish to be 'button-block' but with side padding (like in the Ionic docs) with a div and add the padding class to this div.

For example:

<div class="padding">
      <button class="button button-block button-calm" ng-if="user.userType == 'carer' && connectedPatient != null" ng-click="disconnectFromPatient()">
        Disconnect from Patient
      </button>
      <button class="button button-block button-calm" ng-if="user.userType == 'patient'" ng-click="goToCarerConnect()">
        Invite Carers
      </button>
      <button class="button button-block button-assertive" ng-click="signOut()">
        Sign Out
      </button>
</div>

Resulting in the following button appearances:


Viewing all articles
Browse latest Browse all 228603

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>