I’ve spent several days with this, read every documentation, entry blog and searched the forum for help and I’m starting to get very frustrated because I’m not able to get any symptom showing that I’m on the right path.
I’m attempting this, to try to make things simple, on an HorizontalLayout. It has an ExpandRatio of 1.0f to try to expand to all the space available that his companion layout lefts available after taking what it needs to display a couple of little components. This HorizontalLayout, then, takes about 80% of screen width and it has a set of 4 bug buttons in a row, one after the other.
My aim is to set a rule in order to get this Layout to fit 100% of screen width when viewed on a small device (namely, a 5’’ smartphone) and to get every big button to pile one below another, taking also almost 100% width (or maybe 2 buttons per row, each one being 50% width).
I assign a style to my Layout (let’s call it “.myRespo”), then I add it to the main layout.
Then I define a CSS rule like this:
.myRespo[width-range~="0-800px"]
{
display: block;
width: 100%;
float: left;
}
To my understanding, this should make the cointainer containing the row of buttons to take 100% of width and pile below their preceding element. But it does absolutely nothing. I don’t see absolutely any difference after trying this.
Also I’m very used to Bootstrap and even to “crude” media queries, and appart from this being less intuitive (and not working in my case), sevelopment is reeeeeeeeally tedious and slow, since I have to compile the whole project every time I try a little modification (partial compiling is not working here).
Am I maybe missing a very important point here, i.e. like this only working on CssLayout or so?
Been doing further research and I see (after inspecting the QuickTickets demo sources, too) that it seems .makeResponsive() applies to Vertical and Horizontal layouts, too. I see an added
width-range="0-800px"
property on the element when inspecting it in Chrome. But one of the issues is that there’s a lot of extra HTML stuff added by Horizontal and Vertical layout that needs to be accessed and properly configured from different screen width-ranges and it seems it cannot be accessed (?).
For instance: I have a couple HorizontalLayout inside a bigger HorizontalLayout. I have made responsive both parent and sons. By default, each of the sons are getting 50% of width. But this setting is applied in and “envelope” (a div that wraps) each of these sons (HorizontalLayout Parent → .v-expand div → “envelope” for Son 1 → Son 1, “envelope” for Son 2 → Son 2). HorizontalLayout is distributing space proportionally between “sons”, right? Well, it seems I cannot change this despite having added a .makeResponsive for both parent and sons. I see a “width-range” property in the “son” elements, but not on their wrapper, son in the end they still have an effective width of 50% the width of their parent.
Very frustrating and misleading, again. This isn’t explained anywhere, the documentation is really scarce on this and the (few) examples I’ve found seem to be “cooked” to just kinda work, but it looks to me that they can be rarely applied to the “real world” or to an existing app.
Ok, it seems I’m starting to get it. It seems I can nest those “extra added” dom elements by nesting them inside the style for the width-range I set for the parent. I’ll post my progress here.