Alignment issues

  • Hi,

    I found some allignment issue, but on Gitter got information that there are more.
    This is the list - q-item-main and q-btn inside the q-item side right
    alt text

    It looks really bad. I could try to fix it with some additional classes but I think it should be ok out of the box.

    Another one is with toolbar and buttons on the right:
    alt text

    It is ok on desktop, but there is issue when using e.g. S5 in Chrome devtools.

  • The datetime component looks weird next to buttons (in a toolbar in my example, don’t know if that changes anything really)
    <q-datetime inverted color="secondary" align="center"...
    0_1499809853903_Screen Shot 2017-07-11 at 23.44.30.png
    And it looks differently aligned when not inverted (which is not necessarily a good thing), but in my case it allowed this trick, which looks ok.
    <q-datetime align="center" class="bg-white on-left on-right"...
    0_1499809935184_Screen Shot 2017-07-11 at 23.46.49.png
    0_1499809832456_Screen Shot 2017-07-11 at 23.47.06.png
    I think datetime alignment should be more uniform across states (normal/inverted/dark) and more coherent with buttons.

    Also, you’ll notice on the first screenshot that text left padding is strange (but it works way better in inverted mode)

  • If anyone else is having alignment issues with the new quasar 0.14 components, please post or reference here so @rstoenescu can have a global outlook on alignment issues, and hopefully have an easier time fixing these UI glitches in one pass for the stable release.

  • The picture in this post also shows that padding could be improved.

    @rstoenescu Please note for example the first select component has no internal left padding, and that 10 looks really cramped.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.