Page width - Next gen app

Ask the Community Get Answers
1

I have created a new account for a client and so I’m stuck with next-gen apps. I have two problems that I hope the community can help me with:

  1. I cannot get the app pages to use the full width of the screen - in the legacy apps, the tables in pages would use all the screen width, now it’s just a fixed width in the middle of the screen and I can find no way to change that in the interface.
  2. I’m used to using the KTL toolset in my apps. But it looks like they do not work in the next-gen apps - is that correct or am I missing something?

Thanks in advance.

2

Hi @vikingwind - Welcome to the community :waving_hand:

Hopefully the below video will help.

If you contact support they should be able to move your app back to Classic so you can continue to use the KTL.

Recent theme upgrade
3

Thanks Carl.
Appreciate the swift feedback. Have a nice weekend.

1 Like
4

@vikingwind In Next-Gen, you can set the app to full width by going to Themes –> Layout and change the page width to Full.

image
image3823×1905 417 KB

1 Like
5

Thanks, @Kara. That fixed it.

6

Sorry to piggyback on this subject but it is very similar but opposite.

I have my app set to Max and I am happy with that for most pages but a few have large tables so I would like them to go Full. There is no option in the override style to change this property. Asking Knavi came up with the below code

/* Make scene_36 full width */
        #scene_36 {
          max-width: 100% !important;
          width: 100% !important;
        }

        #scene_36 .kn-page {
          max-width: 100% !important;
          width: 100% !important;
        }

But this doesn’t work.

Does anyone else have a theory on how I can change a page to full width. (or even better just a view).

Thanks in advance.

7

This worked for me -

/* 1) Target the table’s View container (replace XX with your view key) */
#view_106 {
  width: 100vw;
  /* span full browser width */
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  /* break out of theme max-width */
  margin-right: calc(50% - 50vw);
}

/* 2) Ensure the table itself fills that space */
#view_106 table {
  width: 100%;
}
8

Thank you @Kara. That has deffinitely got me closer.
My current site has the vertical navigation and this makes the view go behind that.
I will experiment more and see a way to account for that.

Thanks again.