B4J Question [SOLVED] BANanoVuetifyAD3 how set grid

Lello1964 · Nov 22, 2020

Hi,

i 'm using BANanoVuetifyAD3,

i have a grid of 2 col ,

first 1 row, 1 col
second 2 row, 1 col

I want this layout :

B4X:

+---------------------------------------------------------------------------------------------------------------------------+
|                                                                       col 1 row 1                                         |
+------------------------------------------------------------------------------+--------------------------------------------+
|                                          col1 row2                           |        col 2  row 2                        |
+------------------------------------------------------------------------------+--------------------------------------------+

i use this code, from tutorial :

B4X:

    vuetify = pgIndex.vuetify
    'initialize the component
    tables.Initialize(Me, name)
    path = tables.path
    'load the template
    banano.LoadLayout(vuetify.PlaceHolderName, "vtables")
    vtables.Matrix(1, 1).LoadLayout("vetable")
    vtables.Matrix(1, 2).LoadLayout("vetable1")

i think must use this script :

B4X:

 <b-row>
    <b-col sm="8">col-sm-8</b-col>
    <b-col sm="4">col-sm-4</b-col>
  </b-row>

but i don't kwnow where put in view file

Thanks

Raffaele

Mashiane · Nov 22, 2020

You have to build your grid via code or do it in the abstract designer.

Option 1 (code it - untested)

1. Create a new layout.
2. Set the tagname to v-container
3. Give it a name, for example, mygrid
4. Generate members on the code module you want.
5. Call LoadLayout from your code after you initialize the VueComponent.
6. Then build the grid, just after loadlayout.

Then on your code...

B4X:

banano.LoadLayout("#placeholder", "myrid")
mygrid.AddRows(1).AddColumns12
Mygrid.AddRows(1).AddColumns8p4
mygrid.BuildGrid
vueComponent.BindVueElement(mygrid)
vuecomponent.AppendPlaceholder

Option 2

Design it with the abstract designer

Off course, you can create the rows via the abstract designer completely. Following that approach would be.

1. Inside the mygrid element you added, add 2 other vueelements, one after another inside the v-container
2. Name one mygridr1 with a tagname = v-row, Also the second one tagname it v-row and give it a name of mygridr2.
3. mygridr2 is just below mygridr1.
4. Inside mygridr1, add a vueelement, name it mygridr1c1, tagname it v-col, on attributes add cols=12.
5. Inside mygridr2, add 2 vueelements, name one mygridr2c1 and the other mygridr2c2, with tagname = v-col.
6. For mygridr2c1, on attributes set cols=8, on mygridr2c2, set attributes cols-4.

Then load the complete layout.

This will help you also, Vuetify Grid System Reference

TheMash

Lello1964 · Nov 23, 2020

I've triyed solution 2, i like it, but doesn't work,

I probably didn't understand how to do it.

This if my .bjl

and this is code :

B4X:

    vuetify = pgIndex.vuetify
    'initialize the component
    tables.Initialize(Me, name)
    path = tables.path
    'load the template
    banano.LoadLayout(vuetify.PlaceHolderName, "vtables")
    vtables.Matrix(1, 1).LoadLayout("vetable")
    vtables.Matrix(2, 2).LoadLayout("vetable1")

I don't know how must do ?

Mashiane · Nov 23, 2020

I'd rather just run a tutorial about this so that its covered once and for all.

As we are still in beta, please note that for this im re-prioritising stuff that I need urgently and will follow on the requests asap, fortunately the grid is next in line.

Ta!

Lello1964 · Nov 23, 2020

Hi again,

i have some textfield in a grid, i want know if i can use and how, same layout for all textfield :

es:

B4X:

    vclienticontainer.Matrix(1, 1).LoadLayout("txtLastName")
    txtLastName.NewTextField("cognome", "Cognome", "", True, "", 0, "Inserire il cognome")
    txtLastName.Filled = True
    clienti.BindVueElement(txtLastName)
    
    vclienticontainer.Matrix(1, 2).LoadLayout("txtFirstName")
    txtFirstName.NewTextField("nome", "Nome", "", True, "", 0, "Inserire il nome")
    txtFirstName.Filled = True
    clienti.BindVueElement(txtFirstName)

may i use : vclienticontainer.Matrix(1, 2).LoadLayout("txtFeld") and vclienticontainer.Matrix(1, 1).LoadLayout("txtFeld"), same layout for all EditTextField ?

Raffaele

Mashiane · Nov 23, 2020

Lello1964 said:
i have some textfield in a grid, i want know if i can use and how, same layout for all textfield :

Please see the textfields module on the BVAD3 demo part 19. I have used the .NewTextField method to load the same layout to different matrix positions. This is via load layout array. Thats the only way I have been able to make it to work with BVAD3.

Ta!

Lello1964 · Nov 23, 2020

I've saw, but cannot use for text field.

Lello1964 · Nov 23, 2020

[ SOLVED ] work, thanks Mashy.

B4X:

    Dim txtcognome As BANanoElement = BVAD3.NewTextField(clienti, "txtcognome", "cognome", "Cognome ", "", False, "", 0, "", CreateMap("single-line":True, ":hide-details":True))
    vclienticontainer.Matrix(1, 1).Append(txtcognome.GetHTML)

    Dim txtnome As BANanoElement = BVAD3.NewTextField(clienti, "txtnome", "nome", "Nome ", "", False, "", 0, "", CreateMap("single-line":True, ":hide-details":True))
    vclienticontainer.Matrix(1, 2).Append(txtnome.GetHTML)

    Dim txtindirizzo As BANanoElement = BVAD3.NewTextField(clienti, "txtindirizzo", "indirizzo", "Indirizzo", "", False, "", 0, "", CreateMap("single-line":True, ":hide-details":True))
    vclienticontainer.Matrix(1, 3).Append(txtindirizzo.GetHTML)

Lello1964 · Nov 24, 2020

Mashiane said:
I'd rather just run a tutorial about this so that its covered once and for all.

As we are still in beta, please note that for this im re-prioritising stuff that I need urgently and will follow on the requests asap, fortunately the grid is next in line.

Ta!

Hi Mashy,

i'm working with grid, i have to reduce space between rows, i think must use nogutters but don't know how use it.

Have you information about grid tutorial ?

Raffaele

Mashiane · Nov 24, 2020

Use ":hide-details:true" as a property on your components. Yes, no-gutters helps but for the parent container.

You can also try and decrease the margin by adding this class, "ma-0", this applies margin all of 0 (zero) on the components when applied to the components.

You will help yourself a great deal by reading about the grid from the documentation as I will not touch on everything on the documentation due to the volume of the library, its massive and truly I am expecting people to beef their knowledge up and upskill themselves on this.

Again, here is the link for more information.

Mashiane said:
This will help you also, Vuetify Grid System Reference

You can also check the documentation about styling etc, and try those out.

PS: Unfortunately I have been busy with work. And honestly I will not do a tutorial about everything on the library. I will avail the grid tutorial as soon as possible.

Ta!

Lello1964 · Nov 24, 2020

Hi, this link help to understand set spacing

Spacing — Vuetify

Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5.

vuetifyjs.com

B4J Question [SOLVED] BANanoVuetifyAD3 how set grid

Lello1964

Well-Known Member

Mashiane

Expert

Lello1964

Well-Known Member

Attachments

Mashiane

Expert

Lello1964

Well-Known Member

Mashiane

Expert

Lello1964

Well-Known Member

Lello1964

Well-Known Member

Lello1964

Well-Known Member

Mashiane

Expert

Lello1964

Well-Known Member

Spacing — Vuetify

Similar Threads

B4J Question [SOLVED] BANanoVuetifyAD3 how set grid

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency