Hi All

In interactive mode, I am not able to see any change in text box prompt size while updating size property. Also, it has additional padding compared to Value prompts. Is there any standard class to refer and update these properties using css? 

Thanks for any inputs!



------------------------------
Buddhi Gupta
------------------------------

#CognosAnalyticswithWatson

Hello Buddhi,

suppose you want to resize the input filed of the prompt. The prompt itself respects the sizes entered in the report, but it does not actually resize the input field alot.
You may want to use a HTML item and set some style. Using Chrome > right click on input field inspect ... brings you to the HTML. The classname for input field is "clsCCHLTextWidget".

So in your HTML item your write:
<style>
.clsCCHLTextWidget { height:100px; }
</style>

Using standard css selectors you may navigate to parents, siblings ... and restyle that.

This only works for one report.

If you want it as globalSetting upload and extension and use in css file:
.clsCCHLTextWidget { height:2em !important; }
to overwrite the setting globally.

See the "em" ... that would make the input field responsive. You might also use a calc-rule
against the viewport to resize it even device depenting.

Another way:
Surrounding your input prompts or customControls with a box (which is nothing else then a DIV) give the box a className.
The className itself you have define in the classNames of the report. Then add HTML-item as before and use ".MyClassname > input" to select only that specially input field for styleing.

Hope this helps.
Ralf

------------------------------
Ralf Roeber
Managing Partner
Amvara Consulting
------------------------------

Original Message:
Sent: Thu June 11, 2020 01:24 PM
From: Buddhi Gupta
Subject: Text Box prompt size doesn't change

Hi All

In interactive mode, I am not able to see any change in text box prompt size while updating size property. Also, it has additional padding compared to Value prompts. Is there any standard class to refer and update these properties using css? 

Thanks for any inputs!



------------------------------
Buddhi Gupta
------------------------------

#CognosAnalyticswithWatson

Hello Ralf,

Thank you for sharing this interesting information.
So I have tried your solution to resize a text box prompt and it worked. But I don't understand how to change the style of only a specific prompt due to my limited knowledge of HTML. Could you please explain how to do this?
This is what I have done:
- Declared a new classname "MyClassname" in report > classes
- Added a block surround my text box prompt
- Named this block with the classname "MyClassname"
- insert HTML items with "<style> .clsCCHLTextWidget { height:100px; } </style>"
This works.

But what must the HTML item contain to only style a specific text box prompt?
In the browser I see that the code for the text box prompt is:
<input id="v13__txtInput" class="pt clsCCHLTextWidget" style="width: 100%;" type="text">

I don't have any problems with resizing an text box prompt in interactive mode. Just updating the size property works for me.

My final goal is to resize the search and select prompt in interactive mode which annoys me for a long time. There are more classes in this type of prompt to change the style.
So I you have a allready a good example, please let me know.

------------------------------
Thomas van der Meer
------------------------------

Original Message:
Sent: Thu June 11, 2020 02:42 PM
From: Ralf Roeber
Subject: Text Box prompt size doesn't change

Hello Buddhi,

suppose you want to resize the input filed of the prompt. The prompt itself respects the sizes entered in the report, but it does not actually resize the input field alot.
You may want to use a HTML item and set some style. Using Chrome > right click on input field inspect ... brings you to the HTML. The classname for input field is "clsCCHLTextWidget".

So in your HTML item your write:
<style>
.clsCCHLTextWidget { height:100px; }
</style>

Using standard css selectors you may navigate to parents, siblings ... and restyle that.

This only works for one report.

If you want it as globalSetting upload and extension and use in css file:
.clsCCHLTextWidget { height:2em !important; }
to overwrite the setting globally.

See the "em" ... that would make the input field responsive. You might also use a calc-rule
against the viewport to resize it even device depenting.

Another way:
Surrounding your input prompts or customControls with a box (which is nothing else then a DIV) give the box a className.
The className itself you have define in the classNames of the report. Then add HTML-item as before and use ".MyClassname > input" to select only that specially input field for styleing.

Hope this helps.
Ralf

------------------------------
Ralf Roeber
Managing Partner
Amvara Consulting

Original Message:
Sent: Thu June 11, 2020 01:24 PM
From: Buddhi Gupta
Subject: Text Box prompt size doesn't change

Hi All

In interactive mode, I am not able to see any change in text box prompt size while updating size property. Also, it has additional padding compared to Value prompts. Is there any standard class to refer and update these properties using css? 

Thanks for any inputs!



------------------------------
Buddhi Gupta
------------------------------
#CognosAnalyticswithWatson

Thanks @Ralf Roeber!  I have Date filter is also on same page and I see it has same class as text Box prompt. Can we use the id or is it a dynamic field?

​​​
Secondly, which extension can be used to upload local css file and refer in reports?

------------------------------
Buddhi Gupta
------------------------------

Original Message:
Sent: Thu June 11, 2020 02:42 PM
From: Ralf Roeber
Subject: Text Box prompt size doesn't change

Hello Buddhi,

suppose you want to resize the input filed of the prompt. The prompt itself respects the sizes entered in the report, but it does not actually resize the input field alot.
You may want to use a HTML item and set some style. Using Chrome > right click on input field inspect ... brings you to the HTML. The classname for input field is "clsCCHLTextWidget".

So in your HTML item your write:
<style>
.clsCCHLTextWidget { height:100px; }
</style>

Using standard css selectors you may navigate to parents, siblings ... and restyle that.

This only works for one report.

If you want it as globalSetting upload and extension and use in css file:
.clsCCHLTextWidget { height:2em !important; }
to overwrite the setting globally.

See the "em" ... that would make the input field responsive. You might also use a calc-rule
against the viewport to resize it even device depenting.

Another way:
Surrounding your input prompts or customControls with a box (which is nothing else then a DIV) give the box a className.
The className itself you have define in the classNames of the report. Then add HTML-item as before and use ".MyClassname > input" to select only that specially input field for styleing.

Hope this helps.
Ralf

------------------------------
Ralf Roeber
Managing Partner
Amvara Consulting

Original Message:
Sent: Thu June 11, 2020 01:24 PM
From: Buddhi Gupta
Subject: Text Box prompt size doesn't change

Hi All

In interactive mode, I am not able to see any change in text box prompt size while updating size property. Also, it has additional padding compared to Value prompts. Is there any standard class to refer and update these properties using css? 

Thanks for any inputs!



------------------------------
Buddhi Gupta
------------------------------

#CognosAnalyticswithWatson

Hello Buddhi,

thank you for asking. This gives me the chance to focus on another option (see solution 2) :-)

Solution 1:
surround everything you want to style and give it a unique classname, e.g. cls1, cls2, ... I attached a simpleReport1.txt for your convinience.

One box around promptControl1 ... set className to cls1
Another box around promptControl2 ... set className to cls2

Styles being used to give each input a background color

 .cls1 input { background-color:yellow;}
 .cls2 input { background-color:green;}

This is basically about selecting and pointing via CSS to an element. Might want to have a look at CSS documentation (https://developer.mozilla.org/en-US/docs/Web/CSS)

Solution 2:
Use jQuery. As Cognos10+11 use jQuery you might consider doing it like seen below.

Insert HTML-Item and jQuerySelectors to find the correct element:
 

<img src="/crn1/bi/pat/hal/images/blank.gif" onload='<img src="/crn1/bi/pat/hal/images/blank.gif"
onload='window.top.$( document ).ready(function() {   
    console.log( "============================" );   
    console.log( "ready!" );    console.log( "============================" );
    function myFoobar() {
        console.dir("setting input 1 to green");
        window.top.$("#rsIFrameManager_1").contents().find("input:eq(0)").css("background-color","green");
        console.dir("setting input 2 to red");
        window.top.$("#rsIFrameManager_1").contents().find("input:eq(1)").css("background-color","red");
    }; 

    console.log( "============================" );
    myFoobar();        
    console.log( "============================" );
});' />

IBM Cognos filters the <script>-Tag from HTML-items. So, we use the "onload" option of a transparent 1px image to trigger the program.

Attached find a simpleReport2.txt for your convinience.

Hope this answers your question.

Advice:
The offered solutions use things that might not be supported or break in the future. We have been doing this for years and found that layoutElements with "private" classNames behave fairly stable. The jQuery usage also is straight forward. But anyhow, use it at your own risk ;-)

Stay healthy,
Ralf


------------------------------
Ralf Roeber
Managing Partner
Amvara Consulting
------------------------------

Original Message:
Sent: Fri June 12, 2020 11:37 AM
From: Buddhi Gupta
Subject: Text Box prompt size doesn't change

Thanks @Ralf Roeber!  I have Date filter is also on same page and I see it has same class as text Box prompt. Can we use the id or is it a dynamic field?

​​​
Secondly, which extension can be used to upload local css file and refer in reports?

------------------------------
Buddhi Gupta

Original Message:
Sent: Thu June 11, 2020 02:42 PM
From: Ralf Roeber
Subject: Text Box prompt size doesn't change

Hello Buddhi,

suppose you want to resize the input filed of the prompt. The prompt itself respects the sizes entered in the report, but it does not actually resize the input field alot.
You may want to use a HTML item and set some style. Using Chrome > right click on input field inspect ... brings you to the HTML. The classname for input field is "clsCCHLTextWidget".

So in your HTML item your write:
<style>
.clsCCHLTextWidget { height:100px; }
</style>

Using standard css selectors you may navigate to parents, siblings ... and restyle that.

This only works for one report.

If you want it as globalSetting upload and extension and use in css file:
.clsCCHLTextWidget { height:2em !important; }
to overwrite the setting globally.

See the "em" ... that would make the input field responsive. You might also use a calc-rule
against the viewport to resize it even device depenting.

Another way:
Surrounding your input prompts or customControls with a box (which is nothing else then a DIV) give the box a className.
The className itself you have define in the classNames of the report. Then add HTML-item as before and use ".MyClassname > input" to select only that specially input field for styleing.

Hope this helps.
Ralf

------------------------------
Ralf Roeber
Managing Partner
Amvara Consulting

Original Message:
Sent: Thu June 11, 2020 01:24 PM
From: Buddhi Gupta
Subject: Text Box prompt size doesn't change

Hi All

In interactive mode, I am not able to see any change in text box prompt size while updating size property. Also, it has additional padding compared to Value prompts. Is there any standard class to refer and update these properties using css? 

Thanks for any inputs!



------------------------------
Buddhi Gupta
------------------------------

#CognosAnalyticswithWatson