[Tabs] Inkbar not appearing under tabs

[kkotwal94]

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

[kkotwal94]

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?

[abelaska]

@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.

[kkotwal94]

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]

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

[oliviertassinari]

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

[kkotwal94]

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

[kkotwal94]

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}
          <div style={styles.container}>
            <Tabs
              style={styles.tabs}
              //value={this.state.tabIndex}
              onChange={this._handleTabChange}
              inkBarStyle={{backgroundColor:"#FFC107"}}>
              <Tab
                value="8"
                label="DASHBOARD"
                style={styles.tab}
                 />
               <Tab
                 value="7"
                 label="PROFILE"
                 style={styles.tab}
               />
                <Tab
                value="5"
                label="ABOUT"
                style={styles.tab}
                />
            </Tabs>


          </div>

        </Paper>```