Ionic-framework: Access tabbar in shadow DOM

[georgechr]

Would it be possible to set a CSS variable for controlling width/height of tabbar inside shadow DOM?

[RHinderiks]

May i ask why you could want to increase or decrease the height of the tabbar ? and more puzzling the width ?

[georgechr]

tab-btn has a property max-width: 168px; which we would like to override so that it takes up all the available space.

[RHinderiks]

i guess you could override it with important for now

[georgechr]

The problem is that it sits inside shadow DOM for tabbar, otherwise we would have styled it as we wished

[RHinderiks]

right, thats annoying. I feel shadow dom is a huge improvement mainly for the people of ionic but as a developer it's quite restricting (which sometimes is a good thing) However i don't know enough about shadow dom so maybe their still is a way. Calling @mhartington and/or other ionic employees to take this thread over.

[mhartington]

👋

Hey there! So we're actively exposing css properties for all the components as we release new betas. While it might not be exposed now, we'll probably add a variable for you access it as we get close to RC/final.

Currently we've only exposed certain properties in order to get Theming docs done and documenting the properties we do have.

I'll add this to the backlog for now so we can track it.

[brandyscarney]

Thank you for the issue! We recently decided to refactor our tabs implementation which allows for more customization and control of the tab bar. In the latest beta, 4.0.0-beta.15 (read more on this beta in our blog here: https://blog.ionicframework.com/ionic-release-v4-beta-15-out-today/) you can style the tab-bar directly like so:

ion-tab-bar {
    height: 80px;
    width: 400px;
    margin: 0 auto;
    padding-bottom: 30px;
}

You can also style tab buttons directly using:

ion-tab-button {
  max-width: none;
}

See this codepen for an example: https://codepen.io/brandyscarney/pen/QJwXKN?editors=1100

I noticed in doing so that the content of the button is aligned to the top, so I created an issue to fix that here: https://github.com/ionic-team/ionic/issues/16231

I'm going to close this though since the original issue is solved. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.