Placing buttons after QField



  • Hey,
    I am using Quasar v0.14 beta and currently, I am trying to recreate a pattern with form, I have seen in Google Contacts.
    I have a set of input fields and I want to have a button, which, if the user clicks it, adds another set of these fields.
    The programming side of this issue is not a problem, but rather how to nicely integrate/style the buttons to add or delete a set into the form.

    Here is a screenshot of how it is implemented in Google Contacts. The button im refering to is the little blue plus next to the email.

    0_1500225818232_Google_Contacts_-_2017-07-16_19.23.24.png

    My question is, if anyone knows a way to achieve a similar result with the standard Quasar CSS, or if I have to implement it on my own.
    I know, there is an option to append buttons after a QInput, but this is not exactly the thing I want to achieve.
    I also tried to just use the grid and put a QBtn there, but even the small button is too big and looks displaced, and the alignment looks off if used with floating labels because the button is not vertically centered within the column (may be solved with flexbox).

    The Google version is implemented by giving the whole form an padding on the right and absolutely position the buttons, which in my opinion is not the cleanest solution.

    Also if there is no possible solution but doing it on my own, wouldn’t this be an interesting feature added to the QField component?



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