Layout resonsiveness

[preeti_kanyal]

Hi,

I am having layout, in its background i have added a image and to this layout i have added a button using addMember.(for reference see attached screenshot of application, Capture1.png). Now if i resize my browser image gets reponsive due css poperty (backgroung-size:100% auto) but height of layout remains same and on UI a white space is visible(Capture2.png highlighted in yellow square).

Please suggest how can i handle this situation so that white space is not introduced.

[Isomorphic]

If you are trying to auto-size to an image, it needs to already be loaded, it needs to be content not a background image, and you should set a small height and set overflow:"visible".

[preeti_kanyal]

Hi,

Thanks for reply.

Now i tried using the Img component of smartGWT.
I have given path of my image to Img component and added this Img to layout. and has setAutoHeight() ,setOverflow(visible)to this layout.(Layout tA)
Below this layout there is another layout added with some text(Layout B).

But on UI for every first time Laypout B is overlapped on LayoutA as setAutoHeight() for Layout A is computing height as 12 px for Layput A and Lauput B has top of 12px.(Prefer Image1.png)

But now if i go to another screen to come back to previous screen, now autoHeight for LayaoutA is compured accrately and Layput B is added prperly after layout a.( Preger image2.png).

According to my obervation Images are taking to time to get rendered on UI and in meanwhile Layout B is added thats why on first time Layput B is overlapped on Layout A.

Please suggest something to remove this overlapping of both layouts for first time and i get required design(image2.png)

[Blama]

If this is really a problem with the browser not knowing the dimensions: I remember using this lib in a non-productive branch, but I'm not sure anymore what for :).

Best regards
Blama

[preeti_kanyal]

Thanks Blama for your reply. I am facing this issue on chrome browser for 100% zoom.

[Blama]

Hi preeti_kanyal,

it's not related to zoom, but to this "it needs to already be loaded" in #2.
This is also the purpose of the library I'm mentioning.

Best regards
Blama

[Isomorphic]

If you could provide a way for us to reproduce this, perhaps by posting a modified Showcase sample, that would allow us to better determine what, if anything, is not working as expected.

[preeti_kanyal]

Thanks Blama , it worked for me.

[preeti_kanyal]

I am facing one more problem.
Images are on screen 1 , if i navigate to screen 2 and come back to screen 1 , i see network call for images again, how can i prevent these network calls.(image1.png,image2.png)
I have written the imagePreload event in constructor.
Due to again network call of image , images are taking to time to get rendered on UI and in meanwhile Layout B is added thats why Layput B is overlapped on Layout A(Image3.png).

How can i prevent these network calls.

[Blama]

Hi,

you can't get rid of them. Also, there is no data transferred (see "from disk cache"). I assume that you should create a testcase now.

Best regards
Blama