B4J Question [ABMATERIAL] Align Button with Input

Dianzoa · Aug 24, 2018

Hello, Regards! A silly question. How can I align a button to be on the same line with an input in a row? I attached an image that is self-explanatory

THanks!
Diego.

alwaysbusy · Aug 24, 2018

Can you show me the code you are using for the modal sheet? This could happen if the total width of the row exceeds 100% of the width due to margins/padding (or exceeds the 12 cell barrier), but it can be anything and without code I'm just guessing.

Dianzoa · Aug 25, 2018

Sorry for the delay, I was busy doing something else. The row 3 is the 1 with the button

B4X:

Dim myModal As ABMModalSheet
    myModal.Initialize(page, "editarclientes", True, False, "")
    myModal.Size = ABM.MODALSHEET_SIZE_LARGE
    myModal.Content.UseTheme("modalcontent")
    myModal.Footer.UseTheme("modalfooter")
    myModal.IsDismissible = False

    myModal.Content.AddRows(1,True, "").AddCells12(1,"centre")
    myModal.Content.AddRows(1,True, "").AddCells12(1,"centre")
    myModal.Content.AddRows(1,True, "").AddCellsOS(1,0,0,0,9,9,9,"").AddCellsOS(1,9,9,9,3,3,3,"")
    'myModal.Content.AddRows(1,True, "").AddCells12(1,"centre")
    myModal.Content.AddRows(4,True, "").AddCellsOS(2,0,0,0,6,6,6,"")

    'myModal.Content.AddRows(5,True, "").AddCells12(1,"")
    myModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,6,6,6,3,3,3,"").AddCellsOS(1,0,0,0,3,3,3, "")
    myModal.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    ' create the input fields for the content
    Dim txtnombre As ABMInput
    txtnombre.Initialize(page, "txtnombre", ABM.INPUT_TEXT, "Cliente", False, "input")
    'page.Msgbox("",ABMShared.editar_repartidor.get("nombre"),"MIERDA","Aceptar",False,"","")
    'txtnombre.Text = nombre
    'txtnombre.Text = ABMShared.editar_repartidor.Get("nombre")
    'page.Msgbox("",ABMShared.editar_repartidor.get("nombre"),"MIERDA","Aceptar",False,"","")
    'page.Msgbox("",ABMShared.editar_repartidor.get("nombre"),"Editar cliente","Aceptar",False,"","")
    
    myModal.Content.Cell(1,1).AddComponent(txtnombre)
    Dim txtruc As ABMInput
    txtruc.Initialize(page, "txtruc", ABM.INPUT_TEXT, "RUC", False, "input")
    
    myModal.Content.Cell(5,1).AddComponent(txtruc)
    
'    Dim txtnombre_contacto As ABMInput
'    txtnombre_contacto.Initialize(page, "txtnombre_contacto", ABM.INPUT_TEXT, "Contacto", False, "input")
'    myModal.Content.Cell(4,2).AddComponent(txtnombre_contacto)
    
    Dim txtcelular As ABMInput
    txtcelular.Initialize(page, "txtcelular", ABM.INPUT_TEXT, "Celular", False, "input")
    myModal.Content.Cell(5,2).AddComponent(txtcelular)
    
    Dim txtdireccion As ABMInput
    txtdireccion.Initialize(page, "txtdireccion", ABM.INPUT_TEXT, "Direccion", False, "input")
    myModal.Content.Cell(2,1).AddComponent(txtdireccion)
    
    Dim txtdireccion_google As ABMInput
    txtdireccion_google.Initialize(page, "txtdireccion_google", ABM.INPUT_TEXT, "Direccion Google", False, "input")
    myModal.Content.Cell(3,1).AddComponent(txtdireccion_google)
    Dim btnmapa As ABMButton
    btnmapa.InitializeRaised(page,"btnmapa","",ABM.BUTTONSIZE_LARGE,"Mapa","")
    myModal.Content.Cell(3,2).AddComponent(btnmapa)
    Dim txtusuario As ABMInput
    txtusuario.Initialize(page, "txtusuario", ABM.INPUT_TEXT,"Idusuario", False, "input")
    myModal.Content.Cell(4,1).AddComponent(txtusuario)
    Dim txtestado As ABMCombo
    txtestado.Initialize(page, "txtestado","Estado", 400,"")
    'Dim l As ABMLabel
    'l.Initialize(page,"l","","",False,"")
    txtestado.AddItem("A","ACTIVO",BuildSimpleItemCombo("A","ACTIVO") )
    txtestado.AddItem("I","INACTIVO", BuildSimpleItemCombo("I","INACTIVO"))
    myModal.Content.Cell(4,2).AddComponent(txtestado)
    
    Dim txtmonto_hora As ABMInput
    txtmonto_hora.Initialize(page, "txtmonto_hora", ABM.INPUT_TEXT, "Monto Hora", False, "input")
    'txtmonto_hora.InputMask = "'alias': 'integer'"
    myModal.Content.Cell(6,1).AddComponent(txtmonto_hora)
    
    Dim txtmonto_pedido As ABMInput
    txtmonto_pedido.Initialize(page, "txtmonto_pedido", ABM.INPUT_TEXT, "Monto Pedido", False, "input")
    'txtmonto_pedido.InputMask = "'alias': 'integer'"
    '"'alias':'decimal', 'digits': 2"
    myModal.Content.Cell(6,2).AddComponent(txtmonto_pedido)
    
'    Dim txtestado As ABMInput
'    txtestado.Initialize(page, "txtestado", ABM.INPUT_TEXT, "Estado", False, "input")
'    myModal.Content.Cell(5,1).AddComponent(txtestado)
    
    ' create the buttons for the footer
    Dim msbtn3 As ABMButton
    msbtn3.InitializeFlat(page, "btn_cancelar_editar", "", "", "Cancelar", "transparent")
    msbtn3.Tag = "editar"
    Dim btn_guardar As ABMButton
    btn_guardar.InitializeFlat(page, "btn_guardar_editar", "", "", "Guardar", "transparent")
    myModal.Footer.Cell(1,2).AddComponent(msbtn3)
    myModal.Footer.Cell(1,1).AddComponent(btn_guardar)
    Return myModal
End Sub

alwaysbusy · Aug 25, 2018

row 3 should be:

B4X:

 myModal.Content.AddRows(1,True, "").AddCellsOS(1,0,0,0,9,9,9,"").AddCellsOS(1,0,0,0,3,3,3,"")

Explanation: the last cell had an offset of 9, so you created:

9 + (9 + 3) = 21 with wrapping on 12 cells

so it became:

9 wrap
9 + 3

Harris · Aug 26, 2018

Cell position and alignment is my biggest time consumer. You can't really see how it looks until you compile and run (with text, color, font size, margin/padding, etc).

page.AddRows(1,True, "").AddCellsOS(1, 0,0,0,8,8,8,"").AddCellsOSMP(1, 0,0,0,4,4,4, 25,0,0,0,"cnter")

I always recommend using - AddCellsOSMP (along with a theme) - allows you to place margin / padding top, bottom, left or right. Default to "0", then adjust when required. Saves time and frustration.

The "cnter" is the theme applied - which centers it within the cell (while respecting your top and bottom padding). I see from you pic it is pushed far left ( which is default if no theme to override - and cell wrapping error in your case ). Centering the control in the cell (button in your case) looks much better (IMHO). Checkboxes - because of the controls internal size/height, look awful along with other row items - unless you follow guidelines above.

All I can say is: Experiment - you shall see and understand when and where to apply.

Thanks

Dianzoa · Aug 26, 2018

alwaysbusy said:
row 3 should be:

B4X:

myModal.Content.AddRows(1,True, "").AddCellsOS(1,0,0,0,9,9,9,"").AddCellsOS(1,0,0,0,3,3,3,"")

Explanation: the last cell had an offset of 9, so you created:

9 + (9 + 3) = 21 with wrapping on 12 cells

so it became:

9 wrap
9 + 3

Wow! Thanks, I understand, I'll try it now!

Yeah, It would be glorious to have some "page designer", and such, it's time consuming doing the user interface

Dianzoa · Aug 26, 2018

Harris said:
Cell position and alignment is my biggest time consumer. You can't really see how it looks until you compile and run (with text, color, font size, margin/padding, etc).

page.AddRows(1,True, "").AddCellsOS(1, 0,0,0,8,8,8,"").AddCellsOSMP(1, 0,0,0,4,4,4, 25,0,0,0,"cnter")

I always recommend using - AddCellsOSMP (along with a theme) - allows you to place margin / padding top, bottom, left or right. Default to "0", then adjust when required. Saves time and frustration.

The "cnter" is the theme applied - which centers it within the cell (while respecting your top and bottom padding). I see from you pic it is pushed far left ( which is default if no theme to override - and cell wrapping error in your case ). Centering the control in the cell (button in your case) looks much better (IMHO). Checkboxes - because of the controls internal size/height, look awful along with other row items - unless you follow guidelines above.

All I can say is: Experiment - you shall see and understand when and where to apply.

Thanks

Thanks bro! I will try that, yeah it's difficult to manage all the options of the grid/cell etc.

Dianzoa · Aug 26, 2018

Yahooo!

B4J Question [ABMATERIAL] Align Button with Input

Dianzoa

Active Member

Attachments

alwaysbusy

Expert

Dianzoa

Active Member

alwaysbusy

Expert

Harris

Expert

Dianzoa

Active Member

Dianzoa

Active Member

Dianzoa

Active Member

Attachments

B4J Question [ABMATERIAL] Align Button with Input

Active Member

Attachments

Expert

Active Member

Expert

Expert

Active Member

Active Member

Active Member

Attachments

Privacy & Transparency

Privacy & Transparency