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.

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.

9

Love the classic interface, but NextGen hopeless. We have a very complicated CRM and Job system in std knack very little css or java . Yet it will not work or present in NextGen. I would say get the basics right first, then look at the bells and whistles. One thing they do need is an AI spell and phrase checker rich text like a smart read facility, without going to a zapier interface.

10

You can request to have the classic bullet enabled on the account…

11

I’ve been running into the same issue with a couple of internal tools we migrated recently. The centered layout looks clean for simple forms, but it’s a nightmare for any app that relies on heavy data tables or wide grids. When you have a screen full of columns and half the display is just empty white space on the sides, it really kills the usability. I tried forcing some CSS overrides to expand the container width, but it usually breaks the responsiveness on smaller screens or messes up the alignment of the header. It would be great if they just gave us a simple toggle in the settings to switch between a fixed and a full-width fluid container. Right now, we’re basically stuck scrolling horizontally on large monitors just to see a few extra columns, which feels like a step backward for a next-gen update.