Hello,
I would like to control a GridLayout using CSS only. This is because I want to define two set of CSS for display and print (media). Using .setWidth() will affect both display and print, thus I choose to use CSS.
My layout is simple. One GridLayout contains two columns. Each column contains one label on each row. The first column label has a stylename “styleA” and second column “styleB”, the GridLayout has no style name, no width defined.
for display
styleA{
width: 180px;
}
styleB{
width: 250px;
}
for media:
styleA{
width: 100px;
}
styleB{
width: 120px;
}
when I take print preview, the label is shrink to the sizei defined, however the second column started from 180px, not 100 px as I defined!
My hunch is the .v-gridlayout-slot is the one causes the problem. It is an absolute position style telling the second column to start from left 180px. but this mess up my plan of changing width with CSS in print layout. any walk around!