Automatic resizing of buttons on browser window resize in Portal
I recently faced an issue, where the buttons of my application
were getting cut off (hiding from the right side) in the page layout on
resizing the Portal browser window. I tried to fiddle around with the width field
in my html/jsp page but somehow the changes never worked inside the Portal Page Layout. I had 2 options,either to fix my layout so that it doesn’t shrink at all or to make my buttons resizable on window resize.
I implemented the other approach i.e
to make the buttons shrink to fit the window screen resize using a simple
Javascript mentioned below:
Since resizing images are simpler, I used an IMG tag and called the Javascript resizeImage()
on the onresize event within
both <img /> and tag. The button submit functionality can be implemented on the onClick event of the <img />.
!|onresize=resizeImage()|onclick=yourFunction()|src=!”>
+The below JavaScript
works well but in case of using a button inside a table, you might need to
tweak around with html tags so that the layout is proper+.
function resizeImage()
{
var
window_height = document.body.clientHeight;
var
window_width =
document.body.clientWidth;
var
image_width = document.images[0].width;
var
image_height = document.images[0].height;
var
height_ratio = image_height /
window_height;
var
width_ratio = image_width /
window_width;
if
(height_ratio > width_ratio)
{
var i,L=document.images.length;
+/* As I have multiple img buttons I used a for loop
*/</p><p>for(i=0;i<L;+i){<br /></p>