B4J Question [ABMaterial] I did something wrong, and I can't figure out what!

[Cableguy]

So, I'm back at breaking @alwaysbusy ABMaterial framework...

This time, going for a cleaner simpler look, I restarted a new template and all was going well... walls were being taken down, and I was progressing...
But now, I'm just stuck! I am amidst of creating my Login Modal Form, and of course, going the route less traveled...
All, is good, but I have spent hours now trying to get my ABMInput components to have round "capsule" like looks.
I have tried everything I can, but going in circles, so I ask the ABM gods... help!
Here's my current project!

 

[alwaysbusy]

upload a working project. There are a lot of files missing and I do not have the time to puzzle it together

 

[Cableguy]

here's a dropbox link (too big for the forum)

Dropbox

www.dropbox.com

 

[alwaysbusy]

Because of the icon in front, the input has to be wrapped in an ABMContainer by ABMaterial. So we have to sets its border-radius also (I used .roundedParent in this example)

    'add a class for css
    AppPage.AddExtraCSSString(".pillbutton { border-radius: 25px !important; }")
    ' extra class roundedParent
    AppPage.AddExtraCSSString(".roundedParent > .input-field {border-radius: 20px !important; } input.roundedinput {border-radius: 20px !important; padding-right: 40px; }")

And for the inputs:

   ' create the input fields for the content
    Dim inp1 As ABMInput
    inp1.Initialize(AppPage, "username", ABM.INPUT_TEXT, "", False, "LoginInput")
    inp1.IconName = "mdi-action-account-circle"
    inp1.RemoveBottomLine = True
    inp1.HTMLAddClass("roundedinput") ' <-----------------
    inp1.Narrow = True
    
    myLoginContainer.Cell(2,1).AddComponent(inp1)
    myLoginContainer.Cell(2,1).PaddingRight = "30px"

    myLoginContainer.Cell(2,1).SetExtraClasses(" roundedParent ") ' <-------------- spaces here are important!
    
    Dim inp2 As ABMInput
    inp2.Initialize(AppPage, "password", ABM.INPUT_PASSWORD, "", False, "LoginInput")
    inp2.IconName = "mdi-action-lock"
    inp2.RemoveBottomLine = True
    inp2.Narrow = True
    inp2.HTMLAddClass("roundedinput") ' <-----------------
    
    myLoginContainer.Cell(3,1).AddComponent(inp2)
    myLoginContainer.Cell(3,1).PaddingRight = "30px"
    
    myLoginContainer.Cell(3,1).SetExtraClasses(" roundedParent ") ' <-------------- spaces here are important!

 

[Cableguy]

Because of the icon in front, the input has to be wrapped in an ABMContainer by ABMaterial.

I really thought of that, but inspecting the element didn't shine that much of a light for me... so I didn't know the div to target!
Thank you Alain!