Skip to Content

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.

!https://weblogs.sdn.sap.com/weblogs/images/251824621/screen_withoutscript.PNG|height=175|alt=|width=400|src=https://weblogs.sdn.sap.com/weblogs/images/251824621/screen_withoutscript.PNG!

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 and tag. The button submit functionality can be implemented on the onClick event of the .

 

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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply