CODEWITHSUNDEEP
htmlcssangularjsionic-framework
UniSound Waterloo
UniSound Waterloo

Reputation: 561

Trouble setting the height of ionic button-bar

I am creating a mobile app with ionic framework. I want to adjust the button bar to a little bit smaller. I tried the following code and nothing seems to be happening.Please refer to this image.

    <div class="button-bar" style="height:1%;">
        <button class="button button-outline button-full button-energized"><b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

Upvotes: 0

Views: 980

Answers (2)

dbrree
dbrree

Reputation: 623

Since I can't actually utilize ionic classes in jsfiddle. Try the following:

    <div class="button-bar" style="height:50px;">
        <button class="button button-outline button-full button-energized">  <b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

Try to actually use a pixel value instead of a %. The percentage isn't going to give you the result you want in this particular instance. Percentage will only work if the parent container has a set height.

Also, You can try targetting the individual buttons like this: 

       <div class="button-bar"">
            <button class="button button-outline button-full button-energized" style="height:50px;>  <b>Connection</b></button>       
            <button class="button button-outline button-full button-energized" style="height:50px;><b>
            My Music</b></button>    
        </div>

I personally would recommend creating a separate style sheet to accomplish this and just target the button-bar or the button directly like this:

CSS:

.button {
  height: 50px;
}

or

.button-bar {
  height: 50px;
}

Upvotes: 2

user3770777
user3770777

Reputation: 76

I think there is some min-height adding on button from ionic.css. overide it using .button-bar .button {min-height: some px}

Upvotes: 1

Related Questions