Skip to Content
Author's profile photo Priyanka Singh

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 />.




+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()


window_height = document.body.clientHeight;

window_width  =

image_width   = document.images[0].width;

image_height  = document.images[0].height;

height_ratio  = image_height /

width_ratio   = image_width /

(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>

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.