B4J Question [SOLVED] [ABMaterial] I am once again trying to break it (Z-order issue)

Cableguy · Jun 16, 2025

Hi ABM gurus!

taking the template as a starting point ( full template, not the mini ), I am refactoring the Login form...
I am slowly plowing through, and have now almost what I need to achieve with my containers:

this is composed of: 1 modal form with:
- 1 row, 2 cells wide, 5 cells offset for the User Avatar Place Holder
- 1 Container that will hold the "real" form fields

I managed to place the container border in a way that it intercepts the User Avatar Place Holder, But I want it to go under it, and not above as it currently is.

I have tried several things, either by changing the order the objects are created , trying to set z-index (without really know what I am doing), etc...

So... how can I invert this z-order?

Cableguy · Jun 20, 2025

I've got it!!!

I chatted with copilot, and it brought to my attention that, if an element is not positioned, the default value is "static" and thus the z-order won't apply, and this is for every element in the z-order we wish to change!
SO, changing the useravatarplaceholder position and z-order had no effect because the element that I a wanted to go beneath it had a default 'static" position.
The solution is to set position and z-order to all elements we want to properly stack.
Once I understood how to get the correct id to correctly refer the elements, it ended up like this:

B4X:

    Dim CSS As String = $"
                        $('#login').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'})...

alwaysbusy · Jun 17, 2025

Can you share the code you already got to create this. I can then try it out to see if we can change the z-index.

Cableguy · Jun 17, 2025

Here is the Modal form:

B4X:

Sub BuildLoginSheet() As ABMModalSheet

    Dim myModal As ABMModalSheet
    myModal.Initialize(AppPage, "login", False, ABM.MODALSHEET_TYPE_NORMAL,"loginform")
    myModal.IsDismissible = False
    myModal.MaxHeight = "100%"
    myModal.MaxWidth = "25%"
 







    myModal.Content.AddRows(1,True,"").AddCellsOSV(1,5,5,5,2,2,2,ABM.VISIBILITY_ALL,"") 'for the User Avatar Place Holder



    myModal.Content.AddRows(1,True,"").AddCells12(1,"") 'for the actual Login form
    myModal.Content.BuildGrid ' IMPORTANT!
'    AppPage.ShowGridInfo = True
    
    
    Dim UserAvatarPlaceHolder As ABMImage
    UserAvatarPlaceHolder.Initialize(AppPage, "UserAvatarPlaceHolder", "../home/images/useravatarplaceholder.png", 255)
    UserAvatarPlaceHolder.SetFixedSize(80,80)
    UserAvatarPlaceHolder.IsCircular = True
    UserAvatarPlaceHolder.IsClickable = False
    myModal.Content.Cell(1,1).AddComponent(UserAvatarPlaceHolder)

    
    myModal.Content.Cell(1,1).UseTheme("UserAvatarPlaceHolder")
    
    
    Dim LogingFieldsContainer As ABMContainer
    LogingFieldsContainer.Initialize(AppPage,"LogingFieldsContainer","LogingFieldsContainer")

    LogingFieldsContainer.AddRows(1,True,"").AddCells12V(1, ABM.VISIBILITY_ALL,"")
    LogingFieldsContainer.AddRowsV(7,True,ABM.VISIBILITY_ALL,"").AddCells12(1,"")
    LogingFieldsContainer.BuildGrid ' IMPORTANT!


    
    
    myModal.Content.Cell(2,1).AddComponent(LogingFieldsContainer)
    myModal.Content.Cell(2,1).MarginTop = "-30px"
    

' 
'    myModal.Content.Cell(1,1).AddComponent(ABMShared.BuildParagraph(AppPage,"par1","Please login:"))
'    myModal.Content.Cell(1,1).UseTheme("loginform")
'    Dim inp1 As ABMInput
'    inp1.Initialize(AppPage, "inp1", ABM.INPUT_TEXT, "UserName", False, "")
'    myModal.Content.Cell(2,1).AddComponent(inp1)
' 
'    Dim inp2 As ABMInput
'    inp2.Initialize(AppPage, "inp2", ABM.INPUT_PASSWORD, "Password", False, "")
'    myModal.Content.Cell(2,1).AddComponent(inp2)
' 
'    Dim msbtn1 As ABMButton
'    msbtn1.InitializeRaised(AppPage, "msbtn1", "", "", "Login", "transparent")
'    myModal.Content.Cell(3,1).AddComponent(msbtn1)
'    myModal.Content.Cell(3,1).UseTheme("loginform")
    '
    '
    LogingFieldsContainer.SetBorderex(ABM.COLOR_BLUEGREY, ABM.INTENSITY_DARKEN2, 2, ABM.BORDER_GROOVE, "25px")
'    myModal.Content.SetBorderex(ABM.COLOR_BLUEGREY, ABM.INTENSITY_DARKEN2, 2, ABM.BORDER_GROOVE, "25px")
    Return myModal
End Sub

And my Connect Page:

B4X:

public Sub ConnectPage()

 ' you dynamic stuff
 
 AppPage.Refresh ' IMPORTANT
 
 ' Tell the browser we finished loading
    AppPage.FinishedLoading 'IMPORTANT
    Dim CSS As String = $"
    $('#login').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
    $('#login-content').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
                         "$
    AppPage.ws.Eval(CSS, Null)
 AppPage.ws.Flush
 
 AppPage.RestoreNavigationBarPosition
End Sub

Cableguy · Jun 17, 2025

@alwaysbusy , got a few spare minutes and posted the relevant code on the post above... (based on 4.51 I think)

alwaysbusy · Jun 17, 2025

I can not replicate your situation exactly but I think this may do it (last line):

B4X:

Dim CSS As String = $"
$('#login').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
$('#login-content').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
$('#login-content-useravatarplaceholder').css({'position': 'relative','z-index': '2'});"$

Cableguy · Jun 17, 2025

I had tried those, but individually... never crossed my mind to put them together! Thanks, I'll keep you updated

Cableguy · Jun 20, 2025

Hi again Alain,

I cant get it to work... I am almost sure it it an "id" issue, but I can't find the correct id to make the # call, and i can't also find the logic behind that, so that I don't have to rely on you for other id's (divs?)

My current code is as follows:

B4X:

public Sub ConnectPage()
    ' you dynamic stuff
            
    AppPage.Refresh ' IMPORTANT
    
    ' Tell the browser we finished loading
    AppPage.FinishedLoading 'IMPORTANT
    
    
    Dim CSS As String = $"
                        $('#login').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
                        $('#login-content').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
                        $('#login-content-useravatarplaceholder').css({'position': 'relative','z-index': '20'});
                       "$
                      
    AppPage.ws.Eval(CSS, Null)

Sub BuildLoginSheet() As ABMModalSheet
    
    Dim myModal As ABMModalSheet
    myModal.Initialize(AppPage, "login", False, ABM.MODALSHEET_TYPE_NORMAL,"loginform")
    myModal.IsDismissible = False
    myModal.MaxHeight = "100%"
    myModal.MaxWidth = "25%"
 
    myModal.Content.AddRows(2,True,"").AddCells12(1,"")
    myModal.Content.BuildGrid ' IMPORTANT!
    
    Dim UserAvatarPlaceHolder As ABMImage
    UserAvatarPlaceHolder.Initialize(AppPage,"useravatarplaceholder","./images/useravatarplaceholder.png",255)
    UserAvatarPlaceHolder.IsCircular = True
    UserAvatarPlaceHolder.IsClickable = False
    UserAvatarPlaceHolder.SetFixedSize(80,80)
    myModal.Content.Cell(1,1).UseTheme("LoginForm")
    myModal.Content.Cell(1,1).AddComponent(UserAvatarPlaceHolder)
    
    Dim myLoginForm As ABMContainer
    myLoginForm.Initialize(AppPage, "myloginform","LoginForm")

    myLoginForm.AddRowsV(1,True,ABM.VISIBILITY_ALL,"").AddCellsOSV(1,5,5,5,2,2,2,ABM.VISIBILITY_ALL,"")
    myLoginForm.AddRowsV(1,True,ABM.VISIBILITY_ALL,"").AddCells12V(1, ABM.VISIBILITY_ALL,"")
    myLoginForm.BuildGrid ' IMPORTANT!
    
    myModal.Content.Cell(2,1).AddComponent(myLoginForm)
    

    
    Dim myLoginFormFieldsContainer As ABMContainer
    myLoginFormFieldsContainer.Initialize(AppPage,"mylogingfieldscontainer","LoginForm")
    myLoginFormFieldsContainer.UseTheme("myLoginFormFieldsContainer")
    myLoginFormFieldsContainer.AddRowsV(5,True,ABM.VISIBILITY_ALL,"").AddCells12V(1, ABM.VISIBILITY_ALL,"")
    myLoginFormFieldsContainer.BuildGrid ' IMPORTANT!
    myLoginForm.Cell(2,1).AddComponent(myLoginFormFieldsContainer)
    myLoginForm.Cell(2,1).MarginTop = "-75px"

'    myLoginFormFieldsContainer.Cell(3,1).AddComponent(BuildParagraph(AppPage,"par1","USER LOGIN"))
'    myLoginFormFieldsContainer.Cell(3,1).UseTheme("loginform")
'   
'    Dim inp1 As ABMInput
'    inp1.Initialize(AppPage, "inp1", ABM.INPUT_TEXT, "UserName", False, "")
'    myLoginFormFieldsContainer.Cell(4,1).AddComponent(inp1)
' 
'    Dim inp2 As ABMInput
'    inp2.Initialize(AppPage, "inp2", ABM.INPUT_PASSWORD, "Password", False, "")
'    myModal.Content.Cell(2,1).AddComponent(inp2)
 
'    Dim msbtn1 As ABMButton
'    msbtn1.InitializeFlat(AppPage, "msbtn1", "", "", "Login", "transparent")
'    myModal.Content.Cell(3,1).AddComponent(msbtn1)
'    myModal.Content.Cell(3,1).UseTheme("loginform")

    myLoginFormFieldsContainer.SetBorderex(ABM.COLOR_WHITE, ABM.INTENSITY_NORMAL,3, ABM.BORDER_SOLID, "20px")
 
'    myModal.Content.SetBorderex(ABM.COLOR_BLACK, ABM.INTENSITY_DARKEN2, 2, ABM.BORDER_GROOVE, "20px")
    Return myModal
End Sub

And this results in

while what I am trying to achieve is

being that the "user" blank circular image is the id "useravatarplaceholder"

Cableguy · Jun 20, 2025

I've got it!!!

I chatted with copilot, and it brought to my attention that, if an element is not positioned, the default value is "static" and thus the z-order won't apply, and this is for every element in the z-order we wish to change!
SO, changing the useravatarplaceholder position and z-order had no effect because the element that I a wanted to go beneath it had a default 'static" position.
The solution is to set position and z-order to all elements we want to properly stack.
Once I understood how to get the correct id to correctly refer the elements, it ended up like this:

B4X:

    Dim CSS As String = $"
                        $('#login').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
                        $('#login-content').css({'background-color': 'transparent', 'outline': 'none', 'box-shadow': 'unset'});
                        $('#login-content-r1_cont').css({'position': 'relative','z-index': '2'});
                        $('#login-content-r2_cont').css({'position': 'relative','z-index': '0'});
                       "$

and the final result, is, as expected...

B4J Question [SOLVED] [ABMaterial] I am once again trying to break it (Z-order issue)

Cableguy

Expert

Cableguy

alwaysbusy

Expert

Cableguy

Expert

Cableguy

Expert

alwaysbusy

Expert

Cableguy

Expert

Cableguy

Expert

Cableguy

Expert

Similar Threads

B4J Question [SOLVED] [ABMaterial] I am once again trying to break it (Z-order issue)

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency