Skip to main content
Nintex Community Menu Bar
Solved

Extend Deck Style on Scroll to Right

  • July 11, 2024
  • 1 reply
  • 2 views
  • Translate

Forum|alt.badge.img+1

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?

Best answer by Luzie_Baumgart

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

View original
Did this topic help you find an answer to your question?

1 reply

Forum|alt.badge.img+6

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

Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings