Material-ui: [Tabs] Inkbar not appearing under tabs

Created on 30 Jul 2016 · 7Comments · Source: mui-org/material-ui

The small inkbar won't appear under this tab for some reason, it could be a css thing but I couldn't figure it out, might be missing something I don't know about either, I've been pulling my hairs out but I think the tab height might be too high? I'm not sure honestly and was looking for some help.

I don't know if I've found a bug or its just a styling issue? Maybe someone can confirm?

https://github.com/kkotwal94/MobaRedux/blob/master/app/containers/Navigation.jsx

heres the link to the component, heres the stack overflow question:

http://stackoverflow.com/questions/38669319/reactjs-material-ui-inkbar-not-appearing-for-tabs

Source

kkotwal94

All 7 comments

I found the issue to be my function _handleTabChange for the onchange on tabs, i dont know why yet though, similarly if I add a onactive prop to the tab the inkbar also goes away, anyone find themselves having the same problem?

kkotwal94 on 31 Jul 2016

@kkotwal94 any update?

I am having similar trouble. The inkbar is not rendered after all, the element is simply missing and is rendered for example after I move mouse cursor (:hover) to some link that's inline styled by Radium library.

abelaska on 2 Sep 2016

I haven't worked on my personal project for a while now, so I haven't had time to coop up a solution. I'm sure it has something to do with adding "ontouchtap" or onClick events to tabs. Try opening up Tab/Tabs.jsx when you can, I think that's what i'll do. I'd probably compare that between a previous version where it was working. Their could've been a huge code change as well which could make a bit difficult. I'll probs mess around with it this weekend.

kkotwal94 on 2 Sep 2016

👍1

I updated to the latest version, my code hasn't changed I still don't understand why im having the same problem, im following an example like this one: http://www.webpackbin.com/VJDz8cxZz

My code remains the same, I updated react, material ui, and tap event @oliviertassinari

kkotwal94 on 22 Nov 2016

😕1

@kkotwal94 It could be linked to some external dependencies messing around with the style.

oliviertassinari on 22 Nov 2016

Yea possibly, for some reason i haven't thought of that i'll mess around some more

kkotwal94 on 23 Nov 2016

Sorry for revisiting this, but for some reason, setting a value for <Tabs> Was what was making my inkbar dissapear, not sure if it is still a issue (i updated material ui in my project and it looks like it is in my project)

``` rounded={false}
style={styles.root}
>
{materialIcon}

style={styles.tabs}
//value={this.state.tabIndex}
onChange={this._handleTabChange}
inkBarStyle={{backgroundColor:"#FFC107"}}>
value="8"
label="DASHBOARD"
style={styles.tab}
/>
value="7"
label="PROFILE"
style={styles.tab}
/>
value="5"
label="ABOUT"
style={styles.tab}
/>