Cognos 10.2.1 Search & Select prompt width (SOLVED)

[hanfrie]

Hello all,

I'm having trouble finding a solution for the well known issue regarding the width of the search & select prompt. I'm aware of the solution provided by IBM which involves changing the parameter SYSTEMPROPERTY_CSEARCH_AUTO_RESIZE_RESULT_LIST to TRUE. Unfortunately I am not allowed to change this setting. So it has to be done within the report itself. I've tried the solution provided by Cognospaul.com ( http://cognospaul.com/2012/01/10/quickie-dynamic-select-and-search-size/ ), which does the trick, but if you use the multi-select option, as I need too, it only adjusts the left table, which holds all the found matches, but not the right table that holds the selected ones.
The solution mentioned in http://www.cognoise.com/index.php?topic=6519.0 does not work, probably because I use Cognos 10.2.1? I have no knowledge of java but luckily am able to copy/paste, so any suggestion would be highly appreciated.

[hanfrie]

anyone?

[hanfrie]

I'm happy to inform you all that IBM provided me the solution:
Put three HTML Items around the Search & Select prompt, two on the left, one on the right. I call them html1, html2 and html3. Put the following text into html1, html2 and html3 respectively;

html1:

<script language="javascript">
function resizeSS(prmt_id)
{
var eleTg1 = document.getElementById(prmt_id);
var selectObject = null;

if (eleTg1 && eleTg1 != undefined)
{selectObject = eleTg1.getElementsByTagName('SELECT');
if (selectObject[0] && selectObject[0] != undefined)
{selectObject[0].style.width = 'Auto';}
if (selectObject[1] && selectObject[1] != undefined)
{selectObject[1].style.width = 'Auto';}
}
}
</script>

html2:

<div id="myPrompt">

html3:

</div>
<script language="javascript">
resizeSS('myPrompt');
</script>

Now both Search & Select boxes are automatically resized.

hanfrie

[jackmaster]

This solution works perfectly for me and i'm on 10.2.1. In my case, i want to fix the size of the search input textbox also, i all need to do is to add:

var inputObject =  eleTg1.getElementsByTagName('INPUT');

then apply the same rule like the selectObject.

Again, thank you very much for the solution!

Cheers,

[challapureddy2000@yahoo.c]

this works great!!

[smiles0210]

This works perfectly! But...What if I have 2 search and selects on the same prompt page?

[colac]

I found the dynamic size adjustment to produce an inconsistent results across browsers. So I opted for a fix width. IMO fix width is a better solution overall. I think the consistent interface has a better design appeal for one. And two, adopting the fix width design philosophy, maintenance will be much less of an issue or concern for the Select & Search Prompt due to changes over time with new Cognos Versions or Client Browser changes. IMO, if the text is too long in the select, I would consider alternate ways of displaying the text. Ellipses maybe, or honestly just let the overflow be hidden. People can figure out what it says. The select's can only be so big before the resolution or browser window size becomes an issue for the user anyway. Delivering a consistent experience is really important to web development imo, and unfortunately an eloquent classic solution for dynamic size selects is not achievable with current factors considered.

This is my solution for IBM Cognos Version 10.2.2



Reference: < HTML Item > (Upper Left)
Description: This code begins the html to wrap the Select & Search Prompt in a html div element

Code Select Expand


<div id="myPrompt">


Reference: < HTML Item > (Upper Right)
Description: This code begins the html to wrap the Select & Search Prompt in a html div element

Code Select Expand


</div>



Reference: < HTML Item > (Bottom Left 1)
Description: This code sets the first two html select elements in the div wrapper to width 300px using javascript and dom api

Code Select Expand


<script language="javascript">
(function () {
"use strict"; 
var eleTg1 = document.getElementById("myPrompt");
    var selectObject = null;

    if (eleTg1 && eleTg1 !== undefined) {
        selectObject = eleTg1.getElementsByTagName("SELECT");

        if (selectObject[0] && selectObject[0] !== undefined) {
selectObject[0].style.width = "300px";
        }

        if (selectObject[1] && selectObject[1] !== undefined) {
selectObject[1].style.width = "300px";
        }
    }
}());
</script>


Reference: < HTML Item > (Bottom Left 2)
Description: This code makes "Contains any of these keywords" be the default option for the Select & Search Prompt in the div wrapper. It's configurable if you prefer a different setting. I now it's not related to this post topic, but it's helpful so I include it if it helps anyone.

Code Select Expand


<script language="javascript">
function setSaSoptions(){
var optNo = 3; // 1 = Starts with any ... (default) / 2 = Starts with first ... / 3 = Contains any ... / 4 = Contains all ...
var optCnt = 0;
var mySpan = document.getElementById('myPrompt');
var myInput = mySpan.getElementsByTagName('input');
for(i=0;i<myInput.length;i++){
if(myInput[i].type=='text') {
if(myInput[i].value>''){
return;}}
if(myInput[i].type=='radio') optCnt++;
if(optCnt==optNo) myInput[i].click();
}
}
setTimeout(setSaSoptions(), 100);
</script>