Your question title is rather tricky... is the question specific to BANano or BANanoVuetifyAD3 or both?
With that said, I will attempt an explanation of how BVAD3 works with its 12 column span grid system, where each row can have 12 columns. These can have offsets (nudge to the right) also. In the example below I have text boxes in rows where each column spans 12 spaces.
View attachment 132703
The HTML presentation for this is (this gets generates automatically by the VFlexDialog code below)
<form novalidate="novalidate" id="vflexdialog1form" autocomplete="off" dense="true" class="v-form" style="opacity: 1; filter: none; transition: all 0.2s linear 0s;">
<v-row class="" id="vflexdialog1formr1">
<v-col id="vflexdialog1formr1c1" cols="12" sm="12" md="12" lg="12" xl="12">
<v-text-field ref="textfield1" id="textfield1" hint="TextField1" label="TextField1" placeholder="TextField1" type="text" key="1660841520806" dense="dense" hide-details="hide-details" outlined="outlined"></v-text-field>
</v-col>
</v-row>
<v-row class="" id="vflexdialog1formr2">
<v-col id="vflexdialog1formr2c1" cols="12" sm="12" md="12" lg="12" xl="12">
<v-text-field ref="textfield2" id="textfield2" hint="TextField2" label="TextField2" placeholder="TextField2" type="text" key="1660841520812" dense="dense" hide-details="hide-details" outlined="outlined"></v-text-field>
</v-col>
</v-row>
<v-row class="" id="vflexdialog1formr3">
<v-col id="vflexdialog1formr3c1" cols="12" sm="12" md="12" lg="12" xl="12">
<v-text-field ref="textfield3" id="textfield3" hint="TextField3" label="TextField3" placeholder="TextField3" type="text" key="1660841520816" dense="dense" hide-details="hide-details" outlined="outlined"></v-text-field>
</v-col>
</v-row>
<v-row class="" id="vflexdialog1formr4">
<v-col id="vflexdialog1formr4c1" cols="12" sm="12" md="12" lg="12" xl="12">
<v-text-field ref="textfield4" id="textfield4" hint="TextField4" label="TextField4" placeholder="TextField4" type="text" key="1660841520823" dense="dense" hide-details="hide-details" outlined="outlined"></v-text-field>
</v-col>
</v-row>
</form>
and the VFlexDialog code to create similar is..
Private txttextfield1 As VField 'ignore
Private txttextfield2 As VField 'ignore
Private txttextfield3 As VField 'ignore
Private txttextfield4 As VField 'ignore
txttextfield1 = VFlexDialog1.AddTextField (1, 1, "textfield1", "TextField1", "")
txttextfield2 = VFlexDialog1.AddTextField (2, 1, "textfield2", "TextField2", "")
txttextfield3 = VFlexDialog1.AddTextField (3, 1, "textfield3", "TextField3", "")
txttextfield4 = VFlexDialog1.AddTextField (4, 1, "textfield4", "TextField4", "")
VFlexDialog1.Refresh
Then depending on the device parameters you need, you can set sm (Small Devices), md (Medium Devices), lg (Large Devices) and xl (xtra large devices) to work within the 12 columns span. That is, you can have sm=12, md=4 where a column will be 12 spaces on small devices and take 4 spaces on medium devices.
In this other example for iPad Mini, I have split the columns to be 6x6 and off course more columns splits can be done to fit the 12 column spacing.
View attachment 132704
Yes, if need be, one can set margins & padding to both columns and also rows, for the above examples its not usually necessary. For BVAD3, this is usually done via class utilities, with values spanning from 0 to 24 which later represent px values internally to Vuetify.
<v-col id="vflexdialog1formr1c1" cols="12" sm="12" md="6" lg="6" xl="6">
<v-text-field ref="textfield1" id="textfield1" hint="TextField1" label="TextField1" placeholder="TextField1" type="text" key="1660842281497" dense="dense" hide-details="hide-details" outlined="outlined"></v-text-field>
</v-col>
All the best...
