Skip to main content

Is there some way to extend the styling of a deck beyond 100% of the screen? We have a deck that is being used to display some budget data in a table. The fields are extending off the screen so there is a scroll to the right. However, the grid lines on the deck stop at the point where the initial visible portion ends (before you start scrolling). I’ve tried playing with all the width settings on the deck and I can’t figure out a way to make this work. Is there some other trick?


Hi Lisaa, if I understand correctly you are using a Field Editor in a Deck. Looks like you can get this to work if you use a Wrapper’s border instead of the Deck Card’s border. Here is what you could try:


Design System Studio


  1. Modify your existing style variant or create new one for the Deck

  2. Set the Card border size to “None”.

  3. Modify your existing style variant or create new one for a Wrapper

  4. Set the Border to 1px and Padding to 4px (or similar, see what looks best)

App Composer


  1. If you created a new style variant for the Deck, select it.

  2. Put the Form component in a Wrapper.

  3. Select the respective style variant for the Wrapper.

  4. The Deck Card needs extra large “min width” to ensure that all fields are in one line, you might want to adjust and test a couple of values to find what looks best in your case.

As result, you can scroll to the right and the grid lines remain.


Alternatively, I recommend using a Table, which saves you some of this extra design work. The Table is supposed to be scrollable and the grid lines remain intact automatically. I’ll just leave this information here for other users 🙂 as far as I know, you can’t use a Table in this use case based on some specific design requirements.


Let me know if you have any questions!

Luzie


Reply