B4J Question [ABMaterial] imageSlider

[XbNnX_507]

Hi, is it possible to set imageSlider width the same as the brower width
i'm trying to use a theme ( theme.ImageSlider("myTheme").fullwidth = True ) but it doesn't do anything.
Thanks.

 

[Harris]

Nope, don't think so...
I struggled with it way back when.
Images have to be"perfectly" sized for the expected device (desktop, tab, phone).
I gave up due to the lack of autosizing with this component.
That said, this IS the ONLY one (component) I could not control effectively.
Nothing negative about it, just the truth... from my perspective...

 

[alwaysbusy]

theme.ImageSlider("myTheme").fullwidth = True

This works, but it takes 100% of the 'available' width. So if your row is a container (80% of the browser width), your cell isn't set to 12 and you have margins in the row of cell, then it will appear less than the browser width.

So we have to get rid of all that:

page.AddRowsM(1,False,0,0, "").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0, "")

In ConnectPage() we do some more:

page.Row(2).MarginLeft = "0px"
page.Row(2).MarginRight = "0px"
page.Cell(2,1).MarginLeft = "0px"
page.Cell(2,1).MarginRight = "0px"
' here we are preparing for the height problem.  Note that the value of the first param must be > 0 (0 = unsetting)
page.Row(2).SetFixedHeightFromBottom(1, False)

Now the width should be our whole browser width.

Next, still in ConnectPage() but AFTER page.refresh:

page.Refresh ' IMPORTANT
  
ABM.SetStyleProperty(page, "slider", "height", "100%")
' we do -40px for the bullets at the bottom.  Mind the spaces in the calc() method!
ABM.SetStyleProperty(page, "slidersheets", "height", "calc(100% - 40px)")

Open your app in Chrome, press F12 to open the browser console and check the ID names (because sometimes ABM will change them internally to avoid doubles).

You may have to play with the numbers to make it work for you.

Alain