1. 首頁
  2. 問答
  3. CSS - 我該怎麼做才能解決這個問題？

CSS - 我該怎麼做才能解決這個問題？

2015-02-11 118 views
-4

我使用選定的庫，我的下拉菜單顯示爲這樣，我該如何解決這個問題。 謝謝。 dropdownCSS - 我該怎麼做才能解決這個問題？

就像你可以在圖片上看到的值的列表出現在另一個元素下，而不是在第一個計劃，所以值的列表是不可見的。 我應該在CSS中更改以解決該問題。

這裏是CSS：

/*! 
Chosen, a Select Box Enhancer for jQuery and Prototype 
by Patrick Filler for Harvest, http://getharvest.com 

Version 1.2.0 
Full source at https://github.com/harvesthq/chosen 
Copyright (c) 2011-2014 Harvest http://getharvest.com 

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md 
This file is generated by `grunt build`, do not edit it by hand. 
*/ 

/* @group Base */ 
.chosen-container { 
    position: relative; 
    display: inline-block; 
    vertical-align: middle; 
    font-size: 13px; 
    zoom: 1; 
    *display: inline; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
} 
.chosen-container * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.chosen-container .chosen-drop { 
    position: absolute; 
    top: 100%; 
    left: -9999px; 
    z-index: 1010; 
    width: 100%; 
    border: 1px solid #aaa; 
    border-top: 0; 
    background: #fff; 
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); 
} 
.chosen-container.chosen-with-drop .chosen-drop { 
    left: 0; 
} 
.chosen-container a { 
    cursor: pointer; 
} 

/* @end */ 
/* @group Single Chosen */ 
.chosen-container-single .chosen-single { 
    position: relative; 
    display: block; 
    overflow: hidden; 
    padding: 0 0 0 8px; 
    height: 25px; 
    border: 1px solid #aaa; 
    border-radius: 5px; 
    background-color: #fff; 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); 
    background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
    background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
    background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
    background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
    background-clip: padding-box; 
    box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); 
    color: #444; 
    text-decoration: none; 
    white-space: nowrap; 
    line-height: 24px; 
} 
.chosen-container-single .chosen-default { 
    color: #999; 
} 
.chosen-container-single .chosen-single span { 
    display: block; 
    overflow: hidden; 
    margin-right: 26px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.chosen-container-single .chosen-single-with-deselect span { 
    margin-right: 38px; 
} 
.chosen-container-single .chosen-single abbr { 
    position: absolute; 
    top: 6px; 
    right: 26px; 
    display: block; 
    width: 12px; 
    height: 12px; 
    background: url('chosen-sprite.png') -42px 1px no-repeat; 
    font-size: 1px; 
} 
.chosen-container-single .chosen-single abbr:hover { 
    background-position: -42px -10px; 
} 
.chosen-container-single.chosen-disabled .chosen-single abbr:hover { 
    background-position: -42px -10px; 
} 
.chosen-container-single .chosen-single div { 
    position: absolute; 
    top: 0; 
    right: 0; 
    display: block; 
    width: 18px; 
    height: 100%; 
} 
.chosen-container-single .chosen-single div b { 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: url('chosen-sprite.png') no-repeat 0px 2px; 
} 
.chosen-container-single .chosen-search { 
    position: relative; 
    z-index: 1010; 
    margin: 0; 
    padding: 3px 4px; 
    white-space: nowrap; 
} 
.chosen-container-single .chosen-search input[type="text"] { 
    margin: 1px 0; 
    padding: 4px 20px 4px 5px; 
    width: 100%; 
    height: auto; 
    outline: 0; 
    border: 1px solid #aaa; 
    background: white url('chosen-sprite.png') no-repeat 100% -20px; 
    background: url('chosen-sprite.png') no-repeat 100% -20px; 
    font-size: 1em; 
    font-family: sans-serif; 
    line-height: normal; 
    border-radius: 0; 
} 
.chosen-container-single .chosen-drop { 
    margin-top: -1px; 
    border-radius: 0 0 4px 4px; 
    background-clip: padding-box; 
} 
.chosen-container-single.chosen-container-single-nosearch .chosen-search { 
    position: absolute; 
    left: -9999px; 
} 

/* @end */ 
/* @group Results */ 
.chosen-container .chosen-results { 
    color: #444; 
    position: relative; 
    /*overflow-x: hidden; 
    overflow-y: auto;*/ 
    margin: 0 4px 4px 0; 
    padding: 0 0 0 4px; 
    max-height: 240px; 
    -webkit-overflow-scrolling: touch; 
} 
.chosen-container .chosen-results li { 
    display: none; 
    margin: 0; 
    padding: 5px 6px; 
    list-style: none; 
    line-height: 15px; 
    word-wrap: break-word; 
    -webkit-touch-callout: none; 
} 
.chosen-container .chosen-results li.active-result { 
    display: list-item; 
    cursor: pointer; 
} 
.chosen-container .chosen-results li.disabled-result { 
    display: list-item; 
    color: #ccc; 
    cursor: default; 
} 
.chosen-container .chosen-results li.highlighted { 
    background-color: #3875d7; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); 
    background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%); 
    background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%); 
    background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%); 
    background-image: linear-gradient(#3875d7 20%, #2a62bc 90%); 
    color: #fff; 
} 
.chosen-container .chosen-results li.no-results { 
    color: #777; 
    display: list-item; 
    background: #f4f4f4; 
} 
.chosen-container .chosen-results li.group-result { 
    display: list-item; 
    font-weight: bold; 
    cursor: default; 
} 
.chosen-container .chosen-results li.group-option { 
    padding-left: 15px; 
} 
.chosen-container .chosen-results li em { 
    font-style: normal; 
    text-decoration: underline; 
} 

/* @end */ 
/* @group Multi Chosen */ 
.chosen-container-multi .chosen-choices { 
    position: relative; 
    overflow: hidden; 
    margin: 0; 
    padding: 0 5px; 
    width: 100%; 
    height: auto !important; 
    height: 1%; 
    border: 1px solid #aaa; 
    background-color: #fff; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); 
    background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); 
    background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); 
    background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%); 
    background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); 
    cursor: text; 
} 
.chosen-container-multi .chosen-choices li { 
    float: left; 
    list-style: none; 
} 
.chosen-container-multi .chosen-choices li.search-field { 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
} 
.chosen-container-multi .chosen-choices li.search-field input[type="text"] { 
    margin: 1px 0; 
    padding: 0; 
    height: 25px; 
    outline: 0; 
    border: 0 !important; 
    background: transparent !important; 
    box-shadow: none; 
    color: #999; 
    font-size: 100%; 
    font-family: sans-serif; 
    line-height: normal; 
    border-radius: 0; 
} 
.chosen-container-multi .chosen-choices li.search-choice { 
    position: relative; 
    margin: 3px 5px 3px 0; 
    padding: 3px 20px 3px 5px; 
    border: 1px solid #aaa; 
    max-width: 100%; 
    border-radius: 3px; 
    background-color: #eeeeee; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); 
    background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-size: 100% 19px; 
    background-repeat: repeat-x; 
    background-clip: padding-box; 
    box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05); 
    color: #333; 
    line-height: 13px; 
    cursor: default; 
} 
.chosen-container-multi .chosen-choices li.search-choice span { 
    word-wrap: break-word; 
} 
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close { 
    position: absolute; 
    top: 4px; 
    right: 3px; 
    display: block; 
    width: 12px; 
    height: 12px; 
    background: url('chosen-sprite.png') -42px 1px no-repeat; 
    font-size: 1px; 
} 
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { 
    background-position: -42px -10px; 
} 
.chosen-container-multi .chosen-choices li.search-choice-disabled { 
    padding-right: 5px; 
    border: 1px solid #ccc; 
    background-color: #e4e4e4; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); 
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
    color: #666; 
} 
.chosen-container-multi .chosen-choices li.search-choice-focus { 
    background: #d4d4d4; 
} 
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { 
    background-position: -42px -10px; 
} 
.chosen-container-multi .chosen-results { 
    margin: 0; 
    padding: 0; 
} 
.chosen-container-multi .chosen-drop .result-selected { 
    display: list-item; 
    color: #ccc; 
    cursor: default; 
} 

/* @end */ 
/* @group Active */ 
.chosen-container-active .chosen-single { 
    border: 1px solid #5897fb; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
} 
.chosen-container-active.chosen-with-drop .chosen-single { 
    border: 1px solid #aaa; 
    -moz-border-radius-bottomright: 0; 
    border-bottom-right-radius: 0; 
    -moz-border-radius-bottomleft: 0; 
    border-bottom-left-radius: 0; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff)); 
    background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%); 
    background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%); 
    background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%); 
    background-image: linear-gradient(#eeeeee 20%, #ffffff 80%); 
    box-shadow: 0 1px 0 #fff inset; 
} 
.chosen-container-active.chosen-with-drop .chosen-single div { 
    border-left: none; 
    background: transparent; 
} 
.chosen-container-active.chosen-with-drop .chosen-single div b { 
    background-position: -18px 2px; 
} 
.chosen-container-active .chosen-choices { 
    border: 1px solid #5897fb; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
} 
.chosen-container-active .chosen-choices li.search-field input[type="text"] { 
    color: #222 !important; 
} 

/* @end */ 
/* @group Disabled Support */ 
.chosen-disabled { 
    opacity: 0.5 !important; 
    cursor: default; 
} 
.chosen-disabled .chosen-single { 
    cursor: default; 
} 
.chosen-disabled .chosen-choices .search-choice .search-choice-close { 
    cursor: default; 
} 

/* @end */ 
/* @group Right to Left */ 
.chosen-rtl { 
    text-align: right; 
} 
.chosen-rtl .chosen-single { 
    overflow: visible; 
    padding: 0 8px 0 0; 
} 
.chosen-rtl .chosen-single span { 
    margin-right: 0; 
    margin-left: 26px; 
    direction: rtl; 
} 
.chosen-rtl .chosen-single-with-deselect span { 
    margin-left: 38px; 
} 
.chosen-rtl .chosen-single div { 
    right: auto; 
    left: 3px; 
} 
.chosen-rtl .chosen-single abbr { 
    right: auto; 
    left: 26px; 
} 
.chosen-rtl .chosen-choices li { 
    float: right; 
} 
.chosen-rtl .chosen-choices li.search-field input[type="text"] { 
    direction: rtl; 
} 
.chosen-rtl .chosen-choices li.search-choice { 
    margin: 3px 5px 3px 0; 
    padding: 3px 5px 3px 19px; 
} 
.chosen-rtl .chosen-choices li.search-choice .search-choice-close { 
    right: auto; 
    left: 4px; 
} 
.chosen-rtl.chosen-container-single-nosearch .chosen-search, 
.chosen-rtl .chosen-drop { 
    left: 9999px; 
} 
.chosen-rtl.chosen-container-single .chosen-results { 
    margin: 0 0 4px 4px; 
    padding: 0 4px 0 0; 
} 
.chosen-rtl .chosen-results li.group-option { 
    padding-right: 15px; 
    padding-left: 0; 
} 
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { 
    border-right: none; 
} 
.chosen-rtl .chosen-search input[type="text"] { 
    padding: 4px 5px 4px 20px; 
    background: white url('chosen-sprite.png') no-repeat -30px -20px; 
    background: url('chosen-sprite.png') no-repeat -30px -20px; 
    direction: rtl; 
} 
.chosen-rtl.chosen-container-single .chosen-single div b { 
    background-position: 6px 2px; 
} 
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { 
    background-position: -12px 2px; 
} 

/* @end */ 
/* @group Retina compatibility */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) { 
    .chosen-rtl .chosen-search input[type="text"], 
    .chosen-container-single .chosen-single abbr, 
    .chosen-container-single .chosen-single div b, 
    .chosen-container-single .chosen-search input[type="text"], 
    .chosen-container-multi .chosen-choices .search-choice .search-choice-close, 
    .chosen-container .chosen-results-scroll-down span, 
    .chosen-container .chosen-results-scroll-up span { 
    background-image: url('[email protected]') !important; 
    background-size: 52px 37px !important; 
    background-repeat: no-repeat !important; 
    } 
} 
/* @end */

來源

2015-02-11 Cyrille MODIANO

+0

呃....解決什麼問題？ – gitsitgo 2015-02-11 16:21:18

+0

嗨， 正如你所看到的圖片，下拉列表是不可見的，當我點擊顯示列表，它出現在下面。對不起，如果不明確。 – 2015-02-11 16:34:35

+0

@ user3515709你提供了CSS很好，但是從上面我們看不到哪個元素有什麼CSS代碼。你有一個工作的例子嗎？或者，也許你可以添加它的HTML/PHP部分。同樣，我可以從CSS註釋中看到您已經從這裏下載了腳本：[http://harvesthq.github.io/chosen/](http://harvesthq.github.io/chosen/）也許你應該閱讀它再次，[有明確的指示]（http://harvesthq.github.io/chosen/）如何使用它。 – balintpekker 2015-02-12 06:30:58

回答

0

元素示出在頂部或下方彼此可以在CSS用z-index屬性進行管理。您可以爲頂部的元素應用-1。

瞭解更多：http://www.w3schools.com/cssref/pr_pos_z-index.asp

來源

2015-02-12 20:19:37 mico

+0

嗨，我可以看到在CSS中爲選擇下拉和選擇搜索類定義了z-index，這些值看起來相當高，但是沒有爲選擇結果定義z-index，其中包含項名單，可能是什麼原因？ – 2015-02-13 15:06:00

+0

我不能說原因，但你可以添加相同的值（1010）到搜索部分關閉CSS例如通過瀏覽器上的Firefox開發工具，你會立即看到它是如何幫助或不？ – mico 2015-02-13 21:49:46

+0

開發工具使您可以改變CSS來測試網站如何使用不同的設置，而無需觸摸實際的源代碼。只要玩CSS設置來找到正確的組合，然後你可以添加到實際的CSS文件，如果你有訪問。欲瞭解更多信息：https：//developer.mozilla.org/en-US/docs/Tools/Web_Console – mico 2015-02-13 21:55:31

0

將下拉帶班 '選擇，向上' 一個div

<div class="chosen-upward"> 
    your dropdown with class 'chosen-select' 
</div>

內添加到風格

.chosen-upward.chosen-drop{top:inherit!important; bottom:33px!important;border-bottom-right-radius:0px!important;border-bottom-left-radius:0px!important;border-top-right-radius:4px;border-top-left-radius:4px;box-shadow:none!important;}

這將使下拉出現上述的選擇控制。

來源

2017-05-02 10:07:32 pryashrma

相關問題

 相關問題