No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Placing buttons after QField

    Help
    button css form q-input styling
    1
    1
    1382
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • a47ae
      a47ae last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • First post
        Last post