2016-09-22 8 views
0

CSSの問題については、あなたの助けが必要です。 https://angular-ui.github.io/bootstrap/#/dropdown親の名前属性に従ってCSSクラスを変更する方法

要素は生成されたコードにカプセル化されているため、idやその他のものを与えることはできません。 私がアクセスできる唯一の属性は、変更が必要な要素を含むdiv(name = "OrganizationTypes")です。

生成されたコードは次のようになります。

<div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown ng-pristine ng-valid ng-isolate-scope ng-not-empty open ng-touched" 
style="width: 100%; display: inline-block;" tabindex="0" uib-dropdown="" auto-close="outsideClick" 
name="OrganizationTypes" items="vm.availableOrganizationTypes" ng-model="vm.data.organizationTypes" type="text"> 
<ul class="ui-select-match form-control dropdown-toggle" uib-dropdown-toggle="" style="margin-bottom:2px;height:auto!important;min-height:31px;" aria-haspopup="true" aria-expanded="true"> 
    <!-- ngRepeat: selected in vm.selectedLabel track by selected.path --> 
</ul> 

<!-- I need to modify dropdown-menu for this ul --> 
<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu" style="width:inherit; overflow:auto; max-height:20em" ng-click="$event.stopPropagation()"> 
    <li class="ui-select-choices-group"> 
     <div> 
      ... 
     </div> 
    </li> 
</ul> 
</div> 

ブートストラップクラスは次のように定義している:

.dropdown-menu { 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 1000; 
display: none; 
min-width: 160px; 
padding: 5px 0; 
margin: 2px 0 0; 
font-size: 14px; 
text-align: left; 
list-style: none; 
background-color: #fff; 
background-clip: padding-box; 
border: 1px solid #ccc; 
border: 1px solid rgba(0,0,0,.15); 
border-radius: 4px; 
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
box-shadow: 0 6px 12px rgba(0,0,0,.175); 
} 

と私は相対的に位置を変更する必要があります。

どうすればいいですか?新しいドロップダウンメニューを再定義する必要がありますが、セレクタの仕組みはわかりません。私は事前に

感謝:(CSSで絶対に無能だよ!

答えて

1

たぶん私はあなたの質問を誤解していますが、私はあなたが[attribute=value]セレクターを探していると思う。

ここでは、例を見つけることができますCSS [attribute=value] Selectorあなたのケースでは

は、私はあなたがこのようなセレクタを構築すべきだと思う:

div[name=OrganizationTypes] .dropdown-menu { 
    position: relative; 
} 

知らせます私たちはそれがあなたが探しているものなら)=)

+1

はい、それは私が探しているものです、それは動作します。ありがとうございました。 – Karine

関連する問題