cancel
Showing results for 
Search instead for 
Did you mean: 

Not able to see customized CSS in to my code.

rahulthorat123
Explorer
0 Kudos

Hello All, I am not able to see customized CSS in to my code. Please advise 

CssCode:  .IconTabFilter_PIMD .sapMITBAll .sapMITBText

{ max-height: 4rem !important;   

         max-width: 7rem !important; }

Index Code: <link type="text/css" href="CSS/ControlStyle.css" rel="stylesheet" /> and 

XML view code : <IconTabFilter  id="UPMD_ITF5" text="Milestones and status of quality Control"  class="IconTabFilter_PIMD" showAll="true" design="sap.m.IconTabFilterDesign.Horizontal" >                       

</IconTabFilter>

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Rahul,

You CSS class is not working because may be you are picking wrong classs/id for the Icon tab Bar control

Solution: Using inspect element in chrome developer console pick up the icon tab bar and find the appropriate class to apply the CSS


If you are still stuck share your code here, I''ll try to help. Create a new Gist · GitHub


Regards,

Devaarth

rahulthorat123
Explorer
0 Kudos

Hello Devaarth,

Thanks for replay,

I have checked i think i have used correct class.

Please find below screen shots Issue Screen.png and After Manual editing.png.

Where i have applyed my CSS for Icon Tab Bar, where text of the IconTab not get full displayed please see screen shot Issue Screen.png. After manual editing the .sapMITBAll .sapMITBText class file for values      

max-height: 3rem;

max-width: 4rem;

to

max-height: 4rem;

max-width: 5rem;

but when i pass this value by CSS it not work.

Please guide me here.

Thanks,

Rahul


Issue Screen.png

After Manual editing.png


vijay_kumar49
Active Contributor
0 Kudos

Rahul,

Did u try my example code?

rahulthorat123
Explorer
0 Kudos

Yes Vijay i have try but still i am facing same issue.

vijay_kumar49
Active Contributor
0 Kudos

I tied in eclipse its working. pls share your code.

Former Member
0 Kudos

Hi Rahul,

What I can see from your customized CSS is that you are applying CSS to the complete class. What you can do is pick up that selected id and the class(if any) and apply the CSS.

Use the plus sign on right side of the box where you are put CSS code and add the CSS to that class.

Regards,

Devaarth

Answers (2)

Answers (2)

Former Member
0 Kudos

Hi Rahul ,

Can you tell me what exactly you want to change in Css for icontab Filter control ?

Thanks

Viplove

rahulthorat123
Explorer
0 Kudos

Yes

vijay_kumar49
Active Contributor
0 Kudos

Create css file as per below screen shot.

element.css


div.sapMBtnInner.sapMBtnAccept {  

    background-color: #cc1919;  

}

.sapMFooter-CTX .sapMBtn:hover>.sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive) {

    background-color: #007cc0;

    border-color: #007cc0;

}

index.html


<script

            id="sap-ui-bootstrap"

            src="resources/sap-ui-core.js"

            data-sap-ui-theme="sap_bluecrystal"

            data-sap-ui-libs="sap.m, sap.ui.layout"

            data-sap-ui-xx-bindingSyntax="complex"

            data-sap-ui-resourceroots='{

                "sap.ui.demo.myFiori": "./"

            }' >

        </script>

       <link rel="stylesheet" href="Style/element.css"/>

Calls the "element.css" file where you want. for example:


<Button class ="div.sapMBtnInner.sapMBtnAccept"

                        text="{i18n>EditButtonText}"

                        type="Accept"

                        icon="sap-icon://accept"

                        press="handleApprove" />

Regards

Vijay K