Skip to Content
author's profile photo Former Member
Former Member

round corners to grid layout

Hi,

SAP BusinessObjects Design Studio

Release 1.6 SP1 Patch 2 (Version: 16.1.2)

Source: Relational database, thru UNX

template: SAPUI5 m

I'm trying to get round corners to grid layout component and struggling to achieve it. I dragged a grid and get it with 1 row and 2 columns. I gave it a name KPIBAR_DP. When i run the application, inspect the page and capture the ID being referred, i see it as KPIBAR_DP_Grid". Using this i'm adding the below code to my css file. give each column in the grid a different background and trying to set border-radius for the grid. But it does not work.

#KPIBAR_DP_grid tr:nth-child(1) td:nth-child(1) {background: #AA1000 !important;}

#KPIBAR_DP_grid tr:nth-child(1) td:nth-child(2) {background: #5C534A !important;}

#KPIBAR_DP_grid tr:nth-child(1) {

border-radius:40px !important;

-webkit-border-radius: 40px !important;

-moz-border-radius: 40px !important;

}

I referred below links and more but most of the css tricks were for either text component or buttons and not for grid layout.

http://scn.sap.com/thread/3290365

http://scn.sap.com/docs/DOC-54934

https://scn.sap.com/thread/3853896

Thanks,

Srikanth

Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Best Answer
    Posted on Jul 14, 2016 at 07:49 PM

    Hi Srikanth,

    Why not using the Grid component, with maximized Panels in the cells of the Grid? You could easily round the corners of the Panel via the CSS Class for example.

    Regards,

    Laurens.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 15, 2016 at 03:51 AM

    Hi Srikanth,

    Make sure your grid border is seperate in css

    #GRID_LAYOUT_1_grid{
          border-collapse: separate !important;
    }
    


    Thanks,

    Nithyanandam

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      Thanks a lot Laurens and Nithyanandam.

      I got the answer but I have another question while i'm going through this. Is there a way to set the width of the columns of grid (say a grid with 2 columns and 1 row), can we through script change the width of each grid column? I'm yet to try this but can I add panels to each column and then set their width through script?

      Thanks in advance,

      Srikanth

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.