Is there any CSS to ENLARGE window exit icon "X"?

[Fulltimer]

I'm in V11 and I want to make my windows Exit icon (ie. the upper right side "X") to be much larger. This will make it easier to "tap" when using app on a Tablet.

I don't know if you have to alter the entire window title or what. Not sure how to do that either.

If you know how to enlarge the Exit button for normal windows, please chime in....Thanks!

[aschone]

Re: Is there any CSS to ENLARGE window exit icon "X"?

I believe that ability is only editable on the client side. The user will have to have to adjust those settings using the tools provided by the OS and brower provided tools.

[agillbb]

Re: Is there any CSS to ENLARGE window exit icon "X"?

Here is one cludgy way to do it...only do this if you can't find a setting or don't wish to modify the styles.

// PLACE IN OnRenderComplete in dialog component
//use to set popup window title and features

var myDlg = ""; //will contain a string like A5dlg2
var pDoc = $("{dialog.ComponentName}.R1");
var parentDiv = pDoc.parentNode;
if(parentDiv.id.length>0) {
	myDlg = parentDiv.id.split('.')[0];

	var myObj = $(myDlg + '.TITLE');
	var myStyle = 'height: 20px;';
	if(myObj) {
		$ss(myObj,myStyle);
	}
	myObj = $(myDlg + '.TITLE.TOOLS');
	myStyle = 'position: absolute; right: 14px;';
	if(myObj) {
		$ss(myObj,myStyle);
	}
	myObj = myObj.firstChild 
	myStyle = 'cursor: default;width:150%;height:150%';
	if(myObj) {
		$ss(myObj,myStyle);
	}
}

[Fulltimer]

Re: Is there any CSS to ENLARGE window exit icon "X"?

Here is one cludgy way to do it...only do this if you can't find a setting or don't wish to modify the styles.

// PLACE IN OnRenderComplete in dialog component
//use to set popup window title and features

var myDlg = ""; //will contain a string like A5dlg2
var pDoc = $("{dialog.ComponentName}.R1");
var parentDiv = pDoc.parentNode;
if(parentDiv.id.length>0) {
	myDlg = parentDiv.id.split('.')[0];

	var myObj = $(myDlg + '.TITLE');
	var myStyle = 'height: 20px;';
	if(myObj) {
		$ss(myObj,myStyle);
	}
	myObj = $(myDlg + '.TITLE.TOOLS');
	myStyle = 'position: absolute; right: 14px;';
	if(myObj) {
		$ss(myObj,myStyle);
	}
	myObj = myObj.firstChild 
	myStyle = 'cursor: default;width:150%;height:150%';
	if(myObj) {
		$ss(myObj,myStyle);
	}
}

Andy,

I finally got a chance to try your solution. Your code did indeed do what my original concern was (ie. enlarging the exit Icon) but it seems to only work properly on my desktop or laptop computers.

My goal was to supply a larger X image (icon) on Tablets. My initial test on my Kindle was the X was never shown at all but a strange graphical "smear" was produced along the side of the dialog box. Even more strange is that this smear would accept a mouse click and close the window. I plan to try this on some other Tablets when I get a chance.

Again, thanks for the submission.

Tom W.

[agillbb]

Re: Is there any CSS to ENLARGE window exit icon "X"?

no probs, it could be tweeked to work on mobiles as well if you are up for that challenge .... but it is a cludge and not the true solution.