Header Title is cutting off


#1

Need to Show “Trip Suggestions” but it is cutting off. Here is the code

<ion-header>
  <ion-navbar>
    <ion-title>Trip Suggestions</ion-title>
  </ion-navbar>
</ion-header>


#2

First step would be to use the dev tools of your browsers to debug the HTML what is actually cutting the text off. You should be able to inspect the elements there and see which one is the culprit.


#3

Thanks for the reply
i have removed my SCSS and then it worked fine. there might be some problem with the wrong property usage


#4

I have found that if I target my CSS too broadly, those unexpected issues arise. I bet you have a general h1 styling.


#5

:slight_smile: yes you are right


#6

Good word of advise: never directly target native dom elements unless it really should apply them all. You can have only 1 main place where you set some base styles. All other styles should be applied through classnames. That’s one of my main rules to make sure these kind of issues won’t arise during a project.

I also like to make use of BEM (block, element, modifier). Or if you would prefer something like atoms, or whatever you like. It’s always pretty damn hard to write good, clean CSS. I know from practice that using code styles (even for SCSS,CSS) makes my life so much easier (and my code better maintainable).