Skip to Content
0

Simple CSS not working for my SAPUI5 Application UI Element TextView

Apr 24, 2017 at 10:40 PM

405

avatar image

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,

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

9 Answers

Best Answer
Sean Machado May 02, 2017 at 03:23 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Apr 25, 2017 at 07:34 AM
0

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;
Share
10 |10000 characters needed characters left characters exceeded
Sean Machado Apr 25, 2017 at 05:05 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Apr 25, 2017 at 06:00 PM
0

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 1 Share
10 |10000 characters needed characters left characters exceeded

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.

delete-me.gif (2.2 kB)
0
VIPLOVE KHUSHALANI Apr 26, 2017 at 07:34 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Sean Machado Apr 26, 2017 at 04:42 PM
0

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 3 Share
10 |10000 characters needed characters left characters exceeded

Results of new code fixes:

delete-me.gif (2.1 kB)
0

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.

0

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

thanks

0
Akhilesh Upadhyay Apr 27, 2017 at 03:16 AM
0

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

metadata: {

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

........

Share
10 |10000 characters needed characters left characters exceeded
Sean Machado Apr 27, 2017 at 05:06 PM
0

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,

Share
10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Apr 28, 2017 at 05:53 AM
0

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" 
           }
         ]
}
Share
10 |10000 characters needed characters left characters exceeded