Skip to Content
0

Different CSS for same component in design studio

Feb 20, 2017 at 03:09 PM

135

avatar image

Hi team,

I want to apply two different set of CSS for two different radio button groups in the same dashboard.

For this, I have used the following CSS:

/*Radiobuttongroup1 */

.myRadiobutton{

}

.sapMLabel {

color: black;

font-size: 16px;

font-weight: normal;

}

/*Radiobuttongroup2 */

.myRadiobutton1{

/* color: white; */

}

.sapMLabel {

color: white;

font-size: 16px;

font-weight: normal;

}

I can still see that the first CSS class is overwritten by the second CSS class.

Any suggestions??

Regards

Sumit

10 |10000 characters needed characters left characters exceeded

Sumit - you are overwriting it in the CSS code by calling the CSS class myRadiobutton1 twice

I recommend you debug it using https://blogs.sap.com/2014/05/11/how-to-find-and-change-the-css-class-design-studio/ to see how radio button group 2 can be differentiated.

0

Thanks Tammy. Let me try this option.

0
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Vidhya V Feb 21, 2017 at 11:10 AM
0

Hi,

I have corrected the above CSS code,

/*Radiobuttongroup1 */

.myRadiobutton.sapMLabel {

color: black;

font-size: 16px;

font-weight: normal;

}

/*Radiobuttongroup2 */

.myRadiobutton1.sapMLabel {

color: white;

font-size: 16px;

font-weight: normal;

}

And apply above class name to each radio button. Please check and let me know.

Regards,

Vidhya.C

Show 3 Share
10 |10000 characters needed characters left characters exceeded

Thanks a mil Vidya. This would really help.

Regards

Sumit

0

Hi Vidhya,

I have tried this and it partially works for me.

I am trying to hide the column header in crosstab-1 but want to show the column header in crosstab-2. But, if I set the visibility of the below mentioned code as hidden for first crosstab and visible for second crosstab, then it shows the column header for both the crosstabs and somehow overwrites the CSS for the second crosstab.

Please see my CSS below.

.myCrosstab.sapzenmyCrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault { visibility: hidden; }

.myCrosstab1.sapzenmyCrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault { visibility: visible; }

0

Please check your CSS class name has been assigned properly for cross tabs.

And then create new ticket for this.

Please accept my answer for previous question.

0