on 12-02-2014 7:54 PM
Hello Experts,
Is there a way that I can change the color of selected items in dropdown boxes or list boxes in design studio using CSS classes. Just in the way how we can customize different parts of a crosstab(header, body etc..).
I went through the list of classes document for 1.1 but it does not have dropdown box or list boxes in it.
Thanks,
Naveen
Try this code:
.sapUiTfStd { background-color: #ffffff; color: #666666; } .sapUiTfCombo, .sapUiTfBack.sapUiTfStd { padding:0 12px 0 0; height:35px; margin-top:1px; border: solid 1px #899197; border-radius:3px; } .sapUiTfBrd.sapUiTfFoc, .sapUiTfCombo:hover { padding:0 26px 0 0; height:35px; margin-top:1px; border: solid 1px #2cc588; }
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Victor,
I have followed the linked you provided. It seems to work but it also affects my initial bex prompts. It changes the background color there as well. So I tried to place ".test" so I can just assign the test class to individual dropwdown box. However, after making the classes it still seems to apply the background color code automatically at the application level.
This works for me (added to the custom css file):
.testDD.sapUiTfStd {background: blue; color: white;}
.sapUiLbxStd li.sapUiLbxI {background: green; color: white;}
.sapUiLbxStd li.sapUiLbxI.sapUiLbxISel, .sapUiLbxStd li.sapUiLbxI.sapUiLbxISel span {background: red; color: white;}
I added the following custom css class: testDD
to the dropdown component.
Result:
Regards,
David
I will try to explain, I hope some of what I write will be understandable.
It depends how the source code looks like and what you want to do and with what approach whether you need to put a space or should not put a space between 2 or more css classes.
Example from the dropdown:
Under Trace Styles when you find the definition you want to change, for example background-color, there you can see through what css path definition it comes from, you can see it comes from the css class "sapUiTfStd" (it is strike-through right now because there is a different css path with higher priority/specificity which overwrites the default sap definition), when you look left you will find there this css class "sapUiTfStd" in the source code of the app and in the same row, in the same div there is also your custom css class. Always when several classes are applied to the same html element and you want to write a css path that targets html elements containing more than 1 css class at the same time, in this case 2 css classes, both css classes at the same time, you cannot put a space between them.
A space between means, that the 2nd css class is inside of an html element which is under the main html element as a descendant/child.
Example:
<div class="class1 class2">
<div class="class3"></div>
</div>
.class1.class2 will affect the outer div
.class2 will affect the outer div, but it has lower importance/specificity than .class1.class2, so if both definitions would be in place, the first one with the higher specificity would win
.class1 .class2 will affect nothing
.class1 .class3 will affect the inner div
.class1.class3 will affect nothing
Hi David
I had tried to modify the text -align to center in the dropdown list.
I tried .sapUiLbxStd li.sapUiLbxI {background: green; color: white;} and it works , the background become green.
But I tried the .sapUiLbxStd li.sapUiLbxI {text align: center !important;} .the content still the left align.
Do you have any idea how the meet the requirement?
Thank you!
Willy
| User | Count |
|---|---|
| 3 | |
| 3 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.