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

ionic-v1
1

I’ve got the latest beta (the helium one) and I’ve combined the tabs and slide panel interfaces (which is really nice btw).

I’ve found an odd quirk though. The block-buttons go all the way to the edge, just like the button-full buttons.

Is this a quirk of this set-up or am I doing it wrong? The tabs and slide panel work wonderfully.

1 Like
2

Can you put a codepen together of this, I think I know what you mean but I just want to be sure.

3

Just combine the tabs and slide menu then put both types of button on any page. They’ll be the same width.

4

So the different is small details.

Button Block

Adding button-block to a button applies display: block display. A block button will however go 100% of its parent’s width. In the example, the button’s containing content element also has padding applied, so there is some breathing room between the edge of the device and the buttons.

Button Full

Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. This style is useful when the button should stretch across the entire width of the display. Additionally, the button’s parent element does not have padding applied.

So the Button block will have a border to the left and right. In every version I went be to reference, they both look the same as the do in beta 10

5

This is different to the demos though, and also different if you just use tabs - the block button has very obvious left and right margins. Doing it this way makes them practically the same.

6

Block Buttons

In the example, the button’s containing content element also has padding applied, so there is some breathing room between the edge of the device and the buttons.

The block buttons are shorter in the css page demo because the parent container has padding applied.

Full Width Block Buttons

Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. This style is useful when the button should stretch across the entire width of the display. Additionally, the button’s parent element does not have padding applied.

In that example on the css page, the parent container does not have padding applied.

If there is still some confusion, please put together a codepen where you are getting this.

7

I’ll try it with some padding on the container and get back to you.

8

With padding="true", the problem solved. I have to find out for a while before notice this attribute in the demo.

9

Hi I have the same problem (with the combnination of tabs and side menu, the block button are full width), could you be more explicit on the padding="true" solution please ? Thanks.

10

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: