cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Simple CSS not working for my SAPUI5 Application UI Element TextView

Go to solution
former_member301784
Explorer

on ‎04-24-2017 11:40 PM

0 Kudos

I must be missing something very simple, but can't figure it out.

In my index.html under the <HEAD> tag i have the following:

<style type=“text/css”>
   .background_test {
      background-color: #000000;
      color: #FFFFFF;
   }
</style>

1. Is this the right place to put it?

Then in my createContent function where all my UI Elements are in my X.view.js file I have one element like the following:

new sap.ui.commons.TextView( "l_total", { 
   textAlign:     "Right",
} ).addStyleClass("background_test");

That simply does not work. The element outputs, but no Style is applied.

Then I tried using the following inherited CSS and it DID work:

new sap.ui.commons.TextView( "l_total", { 
   textAlign:     "Right",
} ).addStyleClass("sapUiTfBrd");

I have also tried creating a separate CSS file and using the following statement in the <HEAD> section of index.html to no avail:

<link href="style.css" rel="stylesheet" type="text/css">

2. So, how do I overwrite the existing inherited CSS and use my simple custom one?

Thanks,

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member301784
Explorer
‎05-02-2017 4:23 AM
0 Kudos

Hi Akhilesh:

Thanks for the response but I feel we're now over-complicating things, so I will close this thread, though I was not able to get it to work.

Sean

Show replies
Show replies

Answers (8)

Answers (8)

former_member227918
Active Contributor
‎04-27-2017 4:16 AM

instead of index file, try to include css file in component file inside metadata :

metadata: {

"includes": ["css/customStyles.css"], //custom css file path

........

Show replies
Show replies
nerevar
Participant
‎06-27-2019 10:34 AM
0 Kudos

This worked for me thank! had so much trouble having my css loaded

former_member227918
Active Contributor
‎04-28-2017 6:53 AM
0 Kudos

check this for how can you include css file in component file,

http://help-legacy.sap.com/fiori_bs2013/helpdata/en/27/ce0e4987cd426f8fa3e60836316428/content.htm

Or, if you are using manifest.json file, then write below code in manifest.json,

"resources": {
   "css": [
           {
            "uri": "style.css" 
           }
         ]
}
Show replies
Show replies
former_member301784
Explorer
‎04-27-2017 6:06 PM
0 Kudos

Hi Akhiles:

I'm afraid I'm not familiar with that specific syntax. Would my code be the following? The Eclipse compiler did not like it and it did not work.

metadata: {
   includes: [ "style.css" ]
}

Tried these links to understand what you mean, but just can't get the syntax right.

http://stackoverflow.com/questions/28016642/adding-a-custom-library-as-a-dependency-in-sap-fiori

http://stackoverflow.com/questions/20521267/documentation-on-components-metadata

https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.base.ManagedObject.html

Could you please provide the full syntax for that code snippet?

Thanks,

Show replies
Show replies
former_member301784
Explorer
‎04-26-2017 5:42 PM
0 Kudos

Thanks Viplove:

But it did not work. Now I lose the border as I have removed the first Style Class. It is just not applying my CSS and I have no idea why?

<style type=“text/css”>
   .background_grey.sapUiTv {
      background: #000000;
   }   
</style>

new sap.ui.commons.TextView( "l_subtotal", { 
   textAlign: "Right",
   text:      "tesing text",
   width:     "150px",
} ).addStyleClass("background_grey"),

new sap.ui.commons.TextView( "l_total", { 
   textAlign: "Right",
   width:     "150px"
} ).addStyleClass("sapUiTfBrd sapUiBodyBackground")    //Class 1 - Puts a Border, Class 2 - Colours BG

Results:

Show replies
Show replies
former_member301784
Explorer
‎04-26-2017 5:44 PM
0 Kudos

Results of new code fixes:

former_member301784
Explorer
‎04-26-2017 5:58 PM
0 Kudos

I noticed in one thread the following:

https://blogs.sap.com/2015/01/06/embedding-a-custom-css-style-class-to-a-sapui5-control/

var csspath = jQuery.sap.getModulePath(“your.component.name”,”/foldername/filename.css”);
jQuery.sap.includeStyleSheet(csspath);

I tried this too and it did not work.

former_member340030
Contributor
‎04-27-2017 9:06 AM
0 Kudos

Can you just share your project on fiddle if possible .. let me take a look , might be you are missing something ..

thanks

former_member340030
Contributor
‎04-26-2017 8:34 AM
0 Kudos

Hi Sean Machado

You are applying the css to the custom class only. if you want to apply your custom css you need to determine the standard class and combining both standard and custom class you need to apply css like this :

in your X.view.js file , it is not require to add the standard class (sapUiTfBrd), custom class (background_grey) is enough: 

new sap.ui.commons.TextView( "l_subtotal", { 
   textAlign: "Right",
   text:      "tesing text",
   width:     "150px",
} ).addStyleClass("background_grey"),

In your style.css 

.background_grey.sapUiTv {background:#000000}

Thanks

Viplove

Show replies
Show replies
former_member227918
Active Contributor
‎04-25-2017 7:00 PM
0 Kudos

check this also: background: #000000 !important;

but, I think your css class is not at right place, check and write in appropriate html file, or create css file for it.

Show replies
Show replies
former_member301784
Explorer
‎04-25-2017 9:28 PM
0 Kudos

So I tried that too. Not working. Confounded. Here is my index.html file.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        
        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons,sap.ui.table"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-noDuplicateIds="false">
        </script>

        <!-- CSS Stylesheet -->
        <link href="style.css" rel="stylesheet" type="text/css">
        
        <script>
            //prj_1 Project name and Folder name too
            sap.ui.localResources("prj_1");
            var l_view_1 = sap.ui.view({id:"vw_id_page_1", viewName:"prj_1.PRJ_1", type:sap.ui.core.mvc.ViewType.JS});

            //Container for different Views
            var l_panel_container = new sap.ui.commons.Panel( "l_panel_container" );
            l_panel_container.addContent( l_view_1 );
            l_panel_container.placeAt( "content" );
        </script>
        
    </head>

    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>

</html>

I have a file in the same project folder called style.css: (Perhaps there is a small typo somewhere??)

<style type=“text/css”>
    .background_grey {
        font-weight: bold !important;
        background-color: #000000 !important;
    }    
</style>

Then I have in my X.view.js file:

new sap.ui.commons.TextView( "l_subtotal", { 
   textAlign: "Right",
   text:      "tesing text",
   width:     "150px",
} ).addStyleClass("sapUiTfBrd background_grey"),

new sap.ui.commons.TextView( "l_total", { 
   textAlign:     "Right",
   width:        "150px"
} ).addStyleClass("sapUiTfBrd sapUiBodyBackground")

Results: Notice that SubTotal has a box. That comes from the CSS, because TextView's on their own do not have one. The Total Box has two things going on. The Border from sapUiTfBrd and the background colour from sapUiBodyBackground.

But where is my black background colour that I have specified for Subtotal? Why is it not accepting my CSS? I'm pretty frustrated.

former_member301784
Explorer
‎04-25-2017 6:05 PM
0 Kudos

Hi Akhilesh:

Thanks for your quick response. I tried adding the "!important" and it did not work. I even did the following:

new sap.ui.commons.TextView( "l_total", { 
   textAlign: "Right",
   text:      "Test Text",   
   width:     "150px",
} ).addStyleClass("sapUiTfBrd background_grey"),   //Class 1 - Puts a Border, Class 2 - Colours BG

You're right. I get the border which is also what I wanted, but I do not get my style with the Background colour. If I do the following:

new sap.ui.commons.TextView( "l_total", { 
   textAlign: "Right",
   text:      "Test Text",   
   width:     "150px",
} ).addStyleClass("sapUiTfBrd sapUiBodyBackground"),   //Class 1 - Puts a Border, Class 2 - Colours BG

I get the border and SAP's background. I want my own!!

Is there something I'm missing?

Thanks,

Sean

Show replies
Show replies
former_member227918
Active Contributor
‎04-25-2017 8:34 AM
0 Kudos

both place is right (index.html or seperate css file).

your custom css class must be applied to textview, but since your textview is blank that is why style not visible. put some text and see:

newsap.ui.commons.TextView("l_total", { 
   textAlign:"Right",
   text: "TextView Control"
}).addStyleClass("background_test");

and, sapUiTfBrd is border class with some padding so that it will be visible as border only.

and, to overwrite any existing standard css property by custom css class give !important to it.

background-color: #000000 !important;
Show replies
Show replies
Ask a Question