0

I'm trying to get a vertical TabStrip setup in my React app.

Test render currently looks like this:

public render() {
        return (
            <React.Fragment>
                <TabStrip
                    selected={this.state.selected}
                    onSelect={this.handleSelect}
                    tabPosition="left"
                >
                    <TabStripTab title="T" />
                    <TabStripTab title="T" />
                </TabStrip>
            </React.Fragment>
        );
    }

Instead of this showing a vertical TabStrip, it's showing as horizontal.

When I look at chrome DevTools, I can see a difference in my app and the demo app at https://www.telerik.com/kendo-react-ui/components/layout/tabstrip/tabs/

I seem to be missing a div <div class="k-tabstrip-items-wrapper k-vstack"> which should come below the initial TabStrip div. If I manually add this div into the chrome DevTools, the TabStrip is vertical, as expected.

I've tried adding a div to the TabStrip in React, but it returns an error

"Warning: TabStripTab(...): No render method found on the returned component instance: you may have forgotten to define render."

Any ideas?

Daniel Lawton
  • 416
  • 3
  • 9
  • 30
  • I was unable to reproduce the problem. You can check this [stackblitz](https://stackblitz.com/edit/react-ygcnay?file=app/main.jsx) example that contains the code you've posted. – tromgy May 11 '22 at 11:40
  • @tromgy that's weird. Don't know why I'm facing this particular issue.. I will add I'm trying to render this code inside of another div, but I don't see why that would be an issue – Daniel Lawton May 11 '22 at 12:25

0 Answers0