Can I resize footer bar height?

ionic-v1
1

I want to resize bar-footer height.
I want to resize to ion-content height by resized bar-footer.
How I resize bar-footer?

2 Likes
2

Should be as simple as overriding the css.

.bar-footer{
height:60px;
}

The ion-content will automatically adjust it’s size based the height of the footer and header so no need to adjust that :wink:

2 Likes
3

or you can create css class add to <ion-footer-bar class="bar-positive foo"></ion-footer-bar>

.foo{
height: 50px !important;
}

I did this in my app to get transparent navigation header :smiley:

3 Likes
4

@ShinyArmor Very nice! You should submit that to the Ionic showcase!

1 Like
5

I will submit when i finish my app, it’s under heavy development

6

How do you do a title with different font ?

I want to do one thing like this, I want to set a different font than ionic default and also put a icon, do have some idea ?

Tks

7

It’s not different font, it’s just image. But you can do a title with any font using css and simple HTML for title.

angular.module('app.controllers', [])
.controller('HomeCtrl', '[$scope', function ($scope) {
      $scope.navTitle = '<img class="your-css-class" src="your-logo" />';
}])

In nav-view add this

<ion-view title="{{navTitle}}">

your {{navTitle}} will be replaced by your logo. If you want to use different font for title, use something like this

<span class="your-logo-css">Your Title</span>

CSS

@font-face {
    font-family: 'AnyFonts';
    src: url('../fonts/montserrat-regular-webfont.eot');
    src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff'),
         url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-regular-webfont.svg#Montserrat') format('svg');
    font-weight: normal;
    font-style: normal;
}

.your-logo-css {
      font-family: AnyFonts;
}

Use FontSquirrel to create webfont :smile:

i will create in codepen later

3 Likes
8

Thank you so much @ShinyArmor, It worked very well !!

9

Hi! I modified the height and bottom for subfooter for some reasons.

.bar.has-footer.has-tabs {
  height: 150px !important;
}

.has-footer.has-tabs {
  bottom: 60px !important;
}
.has-tabs, .bar-footer.has-tabs {
  bottom: 49px;
}

and added ion-footer bar after ion-content

<ion-footer-bar class="bar-transparent has-tabs has-footer" ng-if="!isSignedIn()">
    <div class="item item-body">
        <span class="center size-12">abcdefghijklmnopqrstuvwxyz</span>
        <button class="button button-block button-energized" ng-click="click()">
            Click Me
        </button>
    </div>
</ion-footer-bar>

What other modifications should I do so that this new height of footer bar won’t hide the content? :persevere:

1 Like
10

The content is not resizing properly in your example. If you scroll to the bottom, you can clearly see that the las Content element is getting overlapped by the footer. I’m experiencing the same issue, do you know if there’s a workaround?

2 Likes
11

Sorry am I missing something? I thought you could just override ionic sass variable

$bar-footer-height: 36px;
4 Likes
12

I am not able to get it working properly (the footer is overlapping the content) when I override the height of the footer. Please advice?

Edit:
It only works if I manually override the
.has-footer{
bottom: xx;
}

13

I know this is late but I had this same issue so I thought I’d reply with my solution for anyone with this issue in the future. I realised that I had to apply the ‘has-footer’ class to the ‘ion-content’ manually then the SASS changes take effect in the latest version of Ionic, no need for a css override.

i.e.

 <ion-content class="has-footer">