HTML / CSS，电子：Tabpane滚动条滚动和标签溢出

时间：2018-04-24 07:06:03

标签： html css electron scrollbar

我正在设计一个带有tabpane的电子应用程序。但是，当用户使窗口变小或添加更多选项卡时，应该让用户看到所有选项卡的滚动条无法正常工作。滚动条允许一点点移动，但大多数标签都会溢出。我已在此处上传了该应用的精简版代码段，以便您更详细地查看我的问题。

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.window {
    position: relative;
    display: flex;
    flex-grow: 1;
}

.window__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.action-bar {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    width: 44px;
    transition: width 0.2s ease;
}

.action-bar .action-bar__item {
    white-space: nowrap;
    padding: 6px 12px;
}

.action-bar i {
    font-size: 20px;
    margin-right: 22px;
}

.action-bar__spacer {
    flex-grow: 1;
}

.console {
    position: relative;
    height: 44px;
    transition: all 0.5s ease;
    min-height: 44px;
    max-height: 50%;
    overflow: hidden;
    font-size: 13px;
}



.tabpane {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.tabpane .tabpane__tabs {
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    overflow-x: auto;
}

.tabpane .tabpane__tabs li {
    position: relative;
    display: inline-block;
    padding: 8px;
    font-size: 13px;
    min-width: 80px;
    max-width: 160px;
    border: solid #1E1E1E;
    border-width: 0 1px;
    margin-right: -5px;
    color: #8D8D8D;
    background: #333333;
}

.tabpane .tabpane__tabs li:hover {
    cursor: pointer;
}

.tabpane .tabpane__tabs li.tab--active {
    border-top-width: 1px;
    padding-top: 7px;
    background: #1E1E1E;
    color: white;
    z-index: 2;
}

.tabpane .tabpane__tabs li i {
    float: right;
    visibility: hidden;
}

.tabpane .tabpane__tabs li:hover i, .tabpane .tabpane__tabs li.tab--active i {
    visibility: visible;
}

#draggableTab {
    color: #8D8D8D;
    background-color: rgba(51,51,51,0.9);
    outline: 1px solid rgba(64,64,64,0.9);
    padding: 7px 8px;
    font-size: 13px;
    min-width: 80px;
    cursor: pointer;
    position: fixed;
    z-index: 10030;
    pointer-events: none;
    white-space: nowrap;
}

#draggableTab i {
    color: white;
    float: right;
    opacity: 0.3;
    position: relative;
    z-index: 9999;
}

.tabpane__panes {
    position: relative;
    display: flex;
    flex-grow: 1;
    overflow-y: scroll;  
}

.tabpane__panes li {
    display: none;
}

.tabpane__panes li.pane--active {
    display: initial;
    flex: 1;
    padding: 0 44px;
    background: #1E1E1E;
}

/* Colors */
.theme--dark {
    color: white;
}

.shade--light {
    background: #333333;
}

.shade--neutral {
    background: #252526;
}

.shade--dark {
    background: #1E1E1E;
}

.shade--darker {
    background: #141516;
}
<!DOCTYPE html>
<html>

<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>

<body class="theme--dark shade--dark">
    <div class="window">
        <ul class="action-bar shade--neutral">
            <li class="action-bar__item" title="Expand"><i class="fa fa-bars" aria-hidden="true"></i></li>
            <li class="action-bar__item" title="Home" data-template="home"><i class="fa fa-home" aria-hidden="true"></i>Home</li>
            <li class="action-bar__item" title="Search" data-template="search"><i class="fa fa-search" aria-hidden="true"></i>Search</li>
            <li class="action-bar__item" title="Download" data-template="download"><i class="fa fa-download" aria-hidden="true"></i>Download</li>
            <li class="action-bar__item" title="Statistics" data-template="statistics"><i class="fa fa-pie-chart" aria-hidden="true"></i>Statistics</li>
            <li class="action-bar__item" title="Help" data-template="help"><i class="fa fa-question-circle" aria-hidden="true"></i>Help</li>
            <li class="action-bar__divider shade--light"></li>
            <li class="action-bar__item" title="Lights On"><i class="fa fa-sun-o" aria-hidden="true"></i>Lights On</li>
            <li class="action-bar__item" title="Console"><i class="fa fa-code" aria-hidden="true"></i>Console</li>
            <li class="action-bar__spacer"></li>
            <li class="action-bar__item" title="Lock"><i class="fa fa-lock" aria-hidden="true"></i>Lock</li>
            <li class="action-bar__item" title="Settings" data-template="settings"><i class="fa fa-cog" aria-hidden="true"></i>Settings</li>
        </ul>
        <div class="window__content">
            <div class="tabpane">
                <ul class="tabpane__tabs shade--neutral">
                    <li template="home" source="undefined" class="tab--active left">
                        Home
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_1" source="undefined" class="">
                        page 1
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_2" source="undefined" class="">
                        page 2
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_3" source="undefined" class="">
                        page 3
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_4" source="undefined" class="">
                        page 4
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_5" source="undefined" class="">
                        page 5
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_6" source="undefined" class="">
                        page 6
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_7" source="undefined" class="">
                        page 7
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_8" source="undefined" class="">
                        page 8
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                </ul>
                <ul class="tabpane__panes">
                    <li class="pane--active">
                        <h1>Hello</h1>
                        <div style="max-width: 400px;">
                            <p>Try resizing your browser window until some tabs are hidden and a scrollbar appears.</p>
                            <p>I have removed the JavaScript for this example don't expect buttons to work. The scrollbar however needs to work no matter the height of the console window below the tabs or the width of the action bar to the left.</p>
                        </div>
                    </li>
                    <li>page for page 2</li>
                    <li>page for page 3</li>
                    <li>page for page 4</li>
                    <li>page for page 5</li>
                    <li>page for page 6</li>
                    <li>page for page 7</li>
                    <li>page for page 8</li>
                </ul>
            </div>
            <div class="console console--is-closed shade--darker">
                <div class="console__close"><span class="lnr lnr-cross"></span></div>
                <div class="console__area">
                    <div class="console__resize-bar"></div>
                    <p><span class="console__point">Console> </span><input type="text" class="console__input"></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

3 个答案:

答案 0 :(得分：1)

问题是你的tabpane的宽度。它不应该是100％（默认值），因为左侧有操作栏

.tabpane {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
position: relative;
}

添加

width:90%;

或任何100％ - 44px将是

答案 1 :(得分：1)

我认为这对你有用。

只需从flex-grow: 1;移除.window__content并添加width: calc(100% - 44px);

即可

width: calc(100% - 44px); == width: calc(100% - .action-bar[width]); 

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.window {
    position: relative;
    display: flex;
    flex-grow: 1;
}

.window__content {
    display: flex;
    flex-direction: column;
    width: calc(100% - 44px);
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.action-bar {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    width: 44px;
    transition: width 0.2s ease;
}

.action-bar .action-bar__item {
    white-space: nowrap;
    padding: 6px 12px;
}

.action-bar i {
    font-size: 20px;
    margin-right: 22px;
}

.action-bar__spacer {
    flex-grow: 1;
}

.console {
    position: relative;
    height: 44px;
    transition: all 0.5s ease;
    min-height: 44px;
    max-height: 50%;
    overflow: hidden;
    font-size: 13px;
}



.tabpane {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.tabpane .tabpane__tabs {
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    overflow-x: auto;
}

.tabpane .tabpane__tabs li {
    position: relative;
    display: inline-block;
    padding: 8px;
    font-size: 13px;
    min-width: 80px;
    max-width: 160px;
    border: solid #1E1E1E;
    border-width: 0 1px;
    margin-right: -5px;
    color: #8D8D8D;
    background: #333333;
}

.tabpane .tabpane__tabs li:hover {
    cursor: pointer;
}

.tabpane .tabpane__tabs li.tab--active {
    border-top-width: 1px;
    padding-top: 7px;
    background: #1E1E1E;
    color: white;
    z-index: 2;
}

.tabpane .tabpane__tabs li i {
    float: right;
    visibility: hidden;
}

.tabpane .tabpane__tabs li:hover i, .tabpane .tabpane__tabs li.tab--active i {
    visibility: visible;
}

#draggableTab {
    color: #8D8D8D;
    background-color: rgba(51,51,51,0.9);
    outline: 1px solid rgba(64,64,64,0.9);
    padding: 7px 8px;
    font-size: 13px;
    min-width: 80px;
    cursor: pointer;
    position: fixed;
    z-index: 10030;
    pointer-events: none;
    white-space: nowrap;
}

#draggableTab i {
    color: white;
    float: right;
    opacity: 0.3;
    position: relative;
    z-index: 9999;
}

.tabpane__panes {
    position: relative;
    display: flex;
    flex-grow: 1;
    overflow-y: scroll;  
}

.tabpane__panes li {
    display: none;
}

.tabpane__panes li.pane--active {
    display: initial;
    flex: 1;
    padding: 0 44px;
    background: #1E1E1E;
}

/* Colors */
.theme--dark {
    color: white;
}

.shade--light {
    background: #333333;
}

.shade--neutral {
    background: #252526;
}

.shade--dark {
    background: #1E1E1E;
}

.shade--darker {
    background: #141516;
}
<!DOCTYPE html>
<html>

<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>

<body class="theme--dark shade--dark">
    <div class="window">
        <ul class="action-bar shade--neutral">
            <li class="action-bar__item" title="Expand"><i class="fa fa-bars" aria-hidden="true"></i></li>
            <li class="action-bar__item" title="Home" data-template="home"><i class="fa fa-home" aria-hidden="true"></i>Home</li>
            <li class="action-bar__item" title="Search" data-template="search"><i class="fa fa-search" aria-hidden="true"></i>Search</li>
            <li class="action-bar__item" title="Download" data-template="download"><i class="fa fa-download" aria-hidden="true"></i>Download</li>
            <li class="action-bar__item" title="Statistics" data-template="statistics"><i class="fa fa-pie-chart" aria-hidden="true"></i>Statistics</li>
            <li class="action-bar__item" title="Help" data-template="help"><i class="fa fa-question-circle" aria-hidden="true"></i>Help</li>
            <li class="action-bar__divider shade--light"></li>
            <li class="action-bar__item" title="Lights On"><i class="fa fa-sun-o" aria-hidden="true"></i>Lights On</li>
            <li class="action-bar__item" title="Console"><i class="fa fa-code" aria-hidden="true"></i>Console</li>
            <li class="action-bar__spacer"></li>
            <li class="action-bar__item" title="Lock"><i class="fa fa-lock" aria-hidden="true"></i>Lock</li>
            <li class="action-bar__item" title="Settings" data-template="settings"><i class="fa fa-cog" aria-hidden="true"></i>Settings</li>
        </ul>
        <div class="window__content">
            <div class="tabpane">
                <ul class="tabpane__tabs shade--neutral">
                    <li template="home" source="undefined" class="tab--active left">
                        Home
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_1" source="undefined" class="">
                        page 1
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_2" source="undefined" class="">
                        page 2
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_3" source="undefined" class="">
                        page 3
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_4" source="undefined" class="">
                        page 4
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_5" source="undefined" class="">
                        page 5
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_6" source="undefined" class="">
                        page 6
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_7" source="undefined" class="">
                        page 7
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                    <li template="page_8" source="undefined" class="">
                        page 8
                        <i class="fa fa-times" aria-hidden="true" title="Close (Ctrl+W)"></i>
                    </li>
                </ul>
                <ul class="tabpane__panes">
                    <li class="pane--active">
                        <h1>Hello</h1>
                        <div style="max-width: 400px;">
                            <p>Try resizing your browser window until some tabs are hidden and a scrollbar appears.</p>
                            <p>I have removed the JavaScript for this example don't expect buttons to work. The scrollbar however needs to work no matter the height of the console window below the tabs or the width of the action bar to the left.</p>
                        </div>
                    </li>
                    <li>page for page 2</li>
                    <li>page for page 3</li>
                    <li>page for page 4</li>
                    <li>page for page 5</li>
                    <li>page for page 6</li>
                    <li>page for page 7</li>
                    <li>page for page 8</li>
                </ul>
            </div>
            <div class="console console--is-closed shade--darker">
                <div class="console__close"><span class="lnr lnr-cross"></span></div>
                <div class="console__area">
                    <div class="console__resize-bar"></div>
                    <p><span class="console__point">Console> </span><input type="text" class="console__input"></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

希望这对你有所帮助。

答案 2 :(得分：0)

我想; 

.window__content {
    width: 90%; // add
}
相关问题
最新问题