How to position a button in the middle of the card

  • I have used
    <div class=“button content-center”>
    <button class=“btn btn-primary btn-block primary content-center” type=“submit”>Login</button>
    inside a card. But both content-center and text-center are not working. How to make button position in center?

  • Admin

    0_1498809619738_Screenshot from 2017-06-30 10:59:36.png

    If you want your button centered outside of QCardActions, then use Flex CSS helper classes. Example:

    <div class="row justify-center">
       <q-btn ........

  • I post this here because the questions are very much related. It’s also a question of alignment of a button, inside of a QCard.

    0_1498818712571_Screen Shot 2017-06-30 at 12.14.28.png

    Someone asked on gitter how to replicate this 0.13 example of button placement with 0.14 (we’re talking about the round blue button, I think it was @tiago_startt ), but I could not get to that result either:

    • using the code below, inspired by the 0.13 way of doing it (but with 0.14 syntax), results in the button being placed BELOW the media
    • using overlays places the button ON the media (and adds a dark overlay which is not needed in this case)
      Is there a simple way of getting the button ACROSS both areas like before ? (as recommended by material guidelines for actions that see both areas interact)

    tried with this (and then tried adding overlays)

      <img src="placeholder.png" height="120px">
      <q-btn round color="primary" class="pull-right on-left">P</q-btn>

  • @rstoenescu the coolest solution imho would be a quatuor of CC helper classes called say align-across-<direction>, direction being one of top, bottom, left or right.
    And even if it worked only in QCards (or with the same kind of slot syntax as overlays) it would already be a great tool, not to mention it would allow people to port their apps without UI changes nor nasty manual CSS tricks.

    Nevertheless, if you have a CSS trick to achieve that, I’ll gladly add some local styling to make it work in the meantime.

  • Admin

    On the very next Card section after QCardMedia, whichever that is (QCardTitle in the next case, but can be ANY other Card sub-component):

    <!-- Adding "relative-position" so we can position the round button -->
    <q-card-title class="relative-position">
      <q-btn round color="primary" icon="place" class="absolute" style="top: 0; right: 8px; transform: translateY(-50%);" />

    Note that “transform” property needs vendor prefixes to work with older browsers, so it might be an idea to use a CSS class instead, as all app CSS code goes through Autoprefixer 😉

    0_1498820005500_Screenshot from 2017-06-30 13:49:03.png

  • Excellent, thank you !

Log in to reply