Skip to Content

Simple CSS not working for my SAPUI5 Application UI Element TextView

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,

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

9 Answers

  • Best Answer
    May 02, 2017 at 03:23 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 25, 2017 at 07:34 AM

    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;
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 25, 2017 at 05:05 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 25, 2017 at 06:00 PM

    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.

    Add comment
    10|10000 characters needed 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)
  • Apr 26, 2017 at 07:34 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 26, 2017 at 04:42 PM

    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:

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 27, 2017 at 03: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

    ........

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 27, 2017 at 05:06 PM

    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,

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 28, 2017 at 05:53 AM

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