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

    How to get a rotated stack of q-expansion-items

    Help
    3
    6
    362
    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.
    • M
      Mickey58 last edited by Mickey58

      Maybe it’s a crazy requirement or a bad idea, but I need a rotated stack of expansion items. “Rotated” means rotated by 270 degrees = 90 degrees to the right (means vertical items rather than horizontal ones). Each rotated/vertical expansion each item should open to the right rather than to the bottom of the page.

      In the expanded area of each item, there are normally a couple of input-fields, which should render normally (top to bottom), once their rotated expansion items get opened. I started my code pen with a simpler use case, though (text only in the rotated items content, no input fields so far).

      The header of each expansion item should, after the rotation, have about the same width as the height of the header of the item without the rotation. I’m ignoring for the moment how the header text of each expansion item is rendered/rotated, maybe that can be done in a second step, through special header-class CSS.

      I’m a CSS beginner. I know there is CSS to rotate an element in a page. And found Quasar helper classes to rotate by 270 degrees (= 90 to the right). I tried these basics a bit, but the result is disappointing, so far.

      Here is my code pen, forked from the Quasar basic expansion items sample, with my - so far - disappointing result: https://codepen.io/mickey58/pen/jOVbaea

      I got the stack of expansion items rotated, but once any of the items gets opened, the whole stack of items does an unwanted shift. Probably there is some interference between my CSS and what Quasar does to compute and allocate space within the stack of items.

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Mickey58 last edited by

        @mickey58

        These quasar rotate classes could help:

        https://quasar.dev/style/other-helper-classes#Orientation-Related

        M 1 Reply Last reply Reply Quote 0
        • M
          Mickey58 @dobbel last edited by Mickey58

          @dobbel - thanks. I already tried these classes when I started my code pen.

          First I tried a rotate-270 to rotate the stack of expansion items, with a rotate-90 to rotate the content of an expansion item. Those rotations happen, but they come with strange shifts of the whole item stack, once an item is opened.

          Next I changed the code pen with my own experimental rotations and translates, but the code still has those undesired shifts. See my code pen and open the first expansion item to watch the problem.

          beets 1 Reply Last reply Reply Quote 0
          • beets
            beets @Mickey58 last edited by

            @mickey58 Maybe not exactly what you’re looking for, but something like this? https://github.com/yasinatesim/vue-horizontal-collapse

            That was just the first hit for “vue horizontal accordion” and you might find others. While I think it would be a nice feature for quasar, you’re not limited to only the components quasar offers, so in the meantime you can probably find something that suits your needs.

            M 1 Reply Last reply Reply Quote 0
            • M
              Mickey58 @beets last edited by Mickey58

              @beets - thanks for this pointer. At a first glance it seems to do what I need.

              Since I did quite amazing things with nested (and accordeon style) Quasar expansion items, it would be a bit unfortunate though to have to use another Vue component for this.

              Another alternative might be q-carousel - maybe with imbedding an expansion-item within a carousel item.

              beets 1 Reply Last reply Reply Quote 0
              • beets
                beets @Mickey58 last edited by

                @mickey58 You could open a feature request on github, although I’m sure the team is quite busy with the new release. I notice it’s also something that vuetify is lacking, as far as I can tell: https://vuetifyjs.com/en/components/expansion-panels/ so I think there’s probably some reason why it’s not as simple as it seems.

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