B4J Question BANano/BVAD scaling layouts

D

Dave G

Active Member
Licensed User
I'm trying to create more compact layouts that fit on a phone as well as table, desktop etc. My question is which View and which attributes should I target? I'm using Row, Column, View in AD. That is I have a Row view with as many Column views as I have user visible view e.g. Label, TextBox, ComboBox. Should I be setting Margin/Padding in the Column or Visible views? Is there any way to make the Margins/Padding reactive to orientation and window size? I'm using px as it is said to be density aware, but I could be wrong.

Any guidance would be appreciated.
 
Sort by date Sort by votes
Mashiane

Mashiane

Expert
Licensed User
Longtime User
BANano/BVAD scaling layouts
Click to expand...

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.

Scaling.gif


The HTML presentation for this is (this gets generates automatically by the VFlexDialog code below)

B4X: 
<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..

B4X: 
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.

1660842367233.png


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.

B4X: 
<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...
 
Upvote 0
D

Dave G

Active Member
Licensed User
Mashiane said:
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)

B4X: 
<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..

B4X: 
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.

B4X: 
<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...
Click to expand...
Both ;-) Thought I'd get a twofer. I'll look over what you've provided and get back to you. The BANano version of my app is further along so your info will help a lot.
 
Upvote 0
D

Dave G

Active Member
Licensed User
I was able to create two layouts for BANano (side by side and top and bottom). The side by side works well on larger devices so I only show the top and bottom one on a small device <500 width and switch between the two when orientation changes.
 

Attachments

  • BanoPhoneLandscape.jpg
    BanoPhoneLandscape.jpg
    285.3 KB · Views: 128
  • BanoPhonePortrait.jpg
    BanoPhonePortrait.jpg
    294.4 KB · Views: 140
Upvote 0
D

Dave G

Active Member
Licensed User
I've noticed Margins AXYTBLR shows A-X-Y-S-M-L-XL. I'm guessing TBLR is Top/Bottom/Left/Right and S-M-L-XL is Small/Medium/Large/XtraLarge, but what are AXY? SMLXL don't seem to be setable but TBLR are. Confused.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Library BANanoCSSUtils - Utility Helpers & Animations on any BANanoElement
Replies
1
Views
1K
Mashiane
Mashiane
Mashiane
  • Question
B4J Question [BANanoVuetifyAD3] On beginning basic Animations with BANanoAnimeJS, what other types of animations would you be interested in?
Replies
0
Views
702
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANanoDataSource] A CRUD Database Abstract Layer
Replies
1
Views
2K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] New Awesome Kitchen Sink WebApp
Replies
7
Views
4K
Mashiane
Mashiane
D
  • Question
B4J Question BANano - Layout questions
Replies
0
Views
549
Declan
D
Top