Button-bar custom width

1

Hi all.

I have a button-bar with two child buttons, this gives them half the width each by default. I want to give one of them 75% with, and 25% for the other button. How to do that?

Thanks.

2

To make the first button 75%:

<div class="button-bar custom-width-bar">
    <a class="button">First</a>
    <a class="button">Second</a>
</div>

.button-bar.custom-width-bar .button:first-child {
  width: 75%;
  min-width: 75%;
}

To make the second:

.button-bar.custom-width-bar .button:first-child {
  width: 25%;
  max-width: 25%;
}
1 Like
3

It works! Thanks @brandyshea for your reply.

1 Like
4

Hi,

I recently started using Ionic. I’m basically trying to achieve the same goal as wassimans. I followed the advice you gave to the original poster; however, I noticed that depending on the screen size, the second button may not be displayed.

I’m assuming that’s because we only defined it a max-width and not a min-width.

Do you know how I would go about ensuring that both buttons are displayed regardless of the screen size?

Thanks in advance for the help.

5

Which approach are you taking above? This one?

.button-bar.custom-width-bar .button:first-child {
  width: 25%;
  max-width: 25%;
}

I’m not able to see the problem you’re having, could you share some of your markup with me, please? :smile:

6

My mistake, I realized that I wasn’t thinking about it clearly. The button itself is taking up the correct percentage of the screen; however, the icon I’m using for the button doesn’t get adjusted.

So yeah, nothing wrong with the button bar.

Thanks for the quick response though, appreciate it!

1 Like