1

When trying to style paper-tabs alongside iron-pages on a webpage within a div, using Flexbox, specifically display: flex, the tabs disappear. If I remove display: flex, they re-appear.

Example of HTML & CSS where tabs show:

<div class="header">
    <div class="tabs">
        <paper-tabs>
            <paper-tab id="edit-view">
                <span>Edit</span>
            </paper-tab>
            <paper-tab id="info-view">
                <span>Info</span>
            </paper-tab>
        </paper-tabs>
    </div>
</div>
<div class="tab-content">
    <iron-pages selected=${this._selectedTab}>
        <div class="tab-page">
        </div>
        <div class="tab-page">
        </div>
    </iron-pages>
</div>

.header {
    margin: 1rem 0px;
    padding: 0.6rem 0px;
    border-radius: 4px;
    background: rgb(223, 223, 223);
}

Header that shows tabs

But if I use Flexbox and add in the relevant display: flex and alignment properties

.header {
    margin: 1rem 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 0px;
    border-radius: 4px;
    background: rgb(223, 223, 223);
}

Header showing no tabs It breaks.

I checked the repository history and there was this problem in 2015, but apparently was resolved.

Guybrush Threepwood
  • 1,096
  • 2
  • 10
  • 18
  • Can you provide repro steps and some screenshots? – Lajos Arpad Aug 02 '23 at 11:46
  • 1
    @LajosArpad Sure - i will get a codepen running shortly – Guybrush Threepwood Aug 02 '23 at 12:31
  • @LajosArpad Annoyingly it isn't reproducing in Codepen.. Styling _might_ be the cause of this, but if you copy & paste the code blocks and import the linked dependencies in the question, it should hopefully be visible without `flex` and invisible with `flex`. If not, I'll presume I have a problematic HTML tag or something somewhere. – Guybrush Threepwood Aug 02 '23 at 13:20
  • This strongly suggests that you have something specific inside your site that causes the behavior we are speaking about. I think it's a good idea to dig into it and find out what the culprit is. That may instantly lead you to solve your own problem, or, if it's not enough yet, it allows you to make a minimal reproducible example. Note that you can also create a snippet here on stackoverflow. Btw: I like your username. – Lajos Arpad Aug 02 '23 at 13:30

0 Answers0