Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Double clicking a tab causes a small white bar to appear #300

Closed
mbkupfer opened this issue Jul 19, 2019 · 2 comments
Closed

Double clicking a tab causes a small white bar to appear #300

mbkupfer opened this issue Jul 19, 2019 · 2 comments

Comments

@mbkupfer
Copy link

A small white bar appears below a tab when it is clicked twice. From my devtools console, it appears to create some type nested element, but it disappears when I try to expand the <li> tag. How do I remove, or change the color, of this bar?

Before:
Screen Shot 2019-07-19 at 1 55 01 PM

After:
(When I try to expand <li>, the tab reverts back to the before state.)
Screen Shot 2019-07-19 at 1 55 07 PM

In addition to the react-tabs styles, I've also added the following overriding styles:

.tabs {
    margin: 24px 20px;
    background-color: #d1d5d7;
    min-height: 88%;
}

.react-tabs__tab-list {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
}

.react-tabs__tab {
    width: calc(100% / 2);
    color: #586069;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 3px solid transparent !important;
    border-left: 1px solid #455560 !important;
    border-right: 1px solid #455560 !important;
    border-bottom: 0px !important;
    background-color: #fafbfc;
    padding: 1px !important;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
}

.react-tabs__tab--selected {
    color: black;
    border-top: 3px solid rgb(238, 49, 36) !important;
    border-right: 1px solid #455560 !important;
    border-left: 1px solid #455560 !important;
    background-color: #d1d5d7;
}

/* Remove the outside borders of the outside tabs */
.react-tabs__tab:nth-child(1) {
    border-left: 0px !important;
}

.react-tabs__tab:nth-last-child(1) {
    border-right: 0px !important;
}

.react-tabs__tab-panel {
    padding: 0px 10px 20px;
}
@mbkupfer
Copy link
Author

Looking in the react-dev tools console, I actually saw something interesting...it looks like the tab is not focussed which is related to #272. Perhaps this has something to do with it? I'll try and dig deeper when I have a free chance, but hopefully someone knows of a solution in the meantime.

Much thanks!

Before:

Screen Shot 2019-07-19 at 2 04 06 PM

After:

Screen Shot 2019-07-19 at 2 04 17 PM

@mbkupfer
Copy link
Author

I was able to figure this out rather quickly. I just needed to overwrite the background color for the following selector:

.react-tabs__tab:focus:after {
    background: <my-new-color>;
}

@danez , perhaps this could be improved by programmatically setting this color to match the tab-panel color? That way, no white bar gets created when the tab panel is not white?

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant