Cognos Analytics

Cognos Analytics

Connect, learn, and share with thousands of IBM Cognos Analytics users! 

 View Only
Back to discussions
Expand all | Collapse all

Rounded corners in prompts

  • 1.  Rounded corners in prompts

    Posted Mon August 04, 2025 06:55 AM

    Hi,

    I'm trying to implement rounded corners in prompts.

    I've read the excellent discussion called Changing the size of the tiles in 11.2 | Cognos Analytics.

    So I've created an extension. I know this extension is partially working because I have the tiled with rounded corners:

    I did try to use:

    .clsListView .clsListViewReportView .clsPromptSelectWithSearch .clsPromptSelectValue .clsPromptComponent .fs

    in my css file. Unfortunately, this is not working with prompts:

    Any idea would be appreciated!



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------


  • 2.  RE: Rounded corners in prompts

    Posted Mon August 04, 2025 07:43 AM
    Edited by Thomas Wolf Mon August 04, 2025 07:44 AM

    For me (CA 12.0.4) it's clsListView and clsListViewReportView alright. 

    For reasons of simplicity, I just added a html element to the report. It should work in an extension as well.
    <style>
      .clsListView, .clsListViewReportView {
        border-radius: 10%;
        border-color: violet !important;
      }
    </style>
    For border-color, I had to use the !important property. Maybe that is worth a try in your environment.
    Best,
    Thomas



    ------------------------------
    Thomas Wolf
    BI Professional
    Techniker Krankenkasse
    Hamburg
    ------------------------------

    Original Message


  • 3.  RE: Rounded corners in prompts

    Posted Mon August 04, 2025 08:50 AM
    Edited by Patrick Neveu Mon August 04, 2025 08:52 AM

    Hi Thomas,

    Thank you for your answer. I forget to mention I'm using Cognos Analytics v12.1.0.

    It is working fine with your style in an HTML element.

    It is NOT working when I replace my original css file with your (without <style>...</style>) in my extension. I reload the update, logoff then logon.

    Here is my css file:

    /* 
.clsListView .clsListViewReportView .clsPromptSelectWithSearch .clsPromptSelectValue 
*/

.ba-tile{
  height:160px !important; 
  border-radius: 25px;
  box-shadow: 5px 10px 8px #888888;
  width: 95%;
}

.fs{
box-shadow: 5px 10px 8px #888888;
}


.clsListView{
	border-radius: 10%;
    border-color: #573EEF !important;
}

 .clsListViewReportView{
    border-radius: 10%;
    border-color: #573EEF !important;
 }

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


  • 4.  RE: Rounded corners in prompts

    Posted Mon August 04, 2025 09:55 AM

    Hi Patrick,

    this might be a matter of specifity. The inspector shows the border definition inside DIV.clsListView.

    So your extension may work if you make it even more specific.
    .clsInputArea div.clsListView {
      border-radius: 25px;
      box-shadow: 5px 10px 8px #888888;
    }
    It is just guesswork, for I cannot import extensions to our system. Knowing myself, I think our admin acted wisely. 
    Regards,
    Thomas


    ------------------------------
    Thomas Wolf
    BI Professional
    Techniker Krankenkasse
    Hamburg
    ------------------------------

    Original Message


  • 5.  RE: Rounded corners in prompts

    Posted Mon August 04, 2025 10:42 AM

    Thomas,

    Nothing new with this new css. Sorry.

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


  • 6.  RE: Rounded corners in prompts

    Posted Tue August 05, 2025 04:01 AM

    Hi Patrick,

    I just tried simulating an extension by creating an external style sheet. It did not work at my first attempt, but after deleting the browser cache it did exactly as expected. Now I'm out of ideas. 



    ------------------------------
    Thomas Wolf
    BI Professional
    Techniker Krankenkasse
    Hamburg
    ------------------------------

    Original Message


  • 7.  RE: Rounded corners in prompts

    Posted Wed August 27, 2025 04:10 AM

    Hi Thomas,

    A friend gave me the following explanation: "The style sheet is imported into the header of the HTML document, which means the imported styles will apply to all matching elements within that HTML document.
    The issue is that the report itself is not loaded directly into the document, but rather through an iframe, which constitutes a complete HTML document independent from the parent HTML document. As a result, the style sheets of the parent document (where the CSS from our extension is imported) do not apply to the report, which is inside the iframe and therefore in another document with its own style sheets."

    I assume the extension will not work as expected. I'm still trying to find out a working solution/workaround.

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


  • 8.  RE: Rounded corners in prompts

    Posted Wed August 27, 2025 04:37 AM

    Patrick,

    Alright, that makes sense. Unfortunately.

    I never met that problem, because we simply use a report template that imports a style sheet. So we can implement customizations rather easily.



    ------------------------------
    Thomas Wolf
    BI Professional
    Techniker Krankenkasse
    Hamburg
    ------------------------------

    Original Message


  • 9.  RE: Rounded corners in prompts
    Best Answer

    Posted Wed September 03, 2025 10:39 AM
    Edited by Patrick Neveu Thu September 04, 2025 04:01 AM
      |   view attached

    @Patrick Neveu,

    As you mentioned, I think the issue is that you are importing the css as an extension outside the report scope. To make an extension that imports the css into the report you could do it a couple different ways.

    The simplest, and easiest way to import your css into a report would be keep your extension with your custom CSS file and use an HTML Item as the first object at the top of the report and add the html code below (I am using the path from the style extension for tile sizing you referenced):

    <link rel="stylesheet" href="./../v1/ext/myStyles/styles.css"/>

    No matter the scope where your CSS is loaded, the report page will pull the css automatically into the report document scope and load it correctly. 

    Another way to do it would be a custom control that uses JavaScript to inject the CSS into the document head during initialization. This method has some problems like a little bit of pop in of styles because it is added after page load. I made a simple custom control for you that will do this and I only targeted a value prompt list box to give it rounded corners and a border color. 

    You can add or remove any css style you want in the "CSSImport/styles/styles.css" file and it should populate for you. 

    I tested it with a sample report on a 12.1 and 12.0.4 but I think it should work on 11.2.4 or prior instances. Let me know if this works for you. 

    Steps:

    • Upload the extension to Cognos
    • Go to report and add a custom control at the top of the report page.
    • Module path:"../v1/ext/CSSImport/js/control.js"
    • Run report



    ------------------------------
    Michael Webb
    ------------------------------

    Attachment(s)

    zip
    CSSExtension.zip   1 KB 1 version
    Original Message


  • 10.  RE: Rounded corners in prompts

    Posted Thu September 04, 2025 04:04 AM

    Thank you Michael, you made my day! It is working fine.

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


  • 11.  RE: Rounded corners in prompts

    Posted Mon August 11, 2025 08:06 AM

    Hi,

    Any idea why it is not working with an extension?

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


  • 12.  RE: Rounded corners in prompts

    Posted Thu August 21, 2025 04:00 AM

    I hardly dare to ask, but did you clear your cache before trying again? 



    ------------------------------
    Thomas Wolf
    BI Professional
    Techniker Krankenkasse
    Hamburg
    ------------------------------

    Original Message


  • 13.  RE: Rounded corners in prompts

    Posted Thu August 21, 2025 04:36 AM
    Edited by Patrick Neveu Thu August 21, 2025 05:02 AM

    Hi Thomas,

    I've tried! I'm also using another browser to be sure and it is still not working.

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


Related Content