How to get vertical menues

API & Customization Ask Developers
1

Can someone tell me why 2 pages created identically have different page structures?

The two pages referenced here are created with a rich text and two menus side by side.

However, when they render they render differently. One uses a control structure with anchor tags and the other uses link lists.

This is causing me a problem because I am trying to use CSS to have the menus display vertically. The CSS I am using is below. The CSS works for the page on the left which uses link lists but not on the page on the right which uses the .control with anchor tags

Note:
1)these are on two separate databases.
2) although the pictures show the lists vertically that is due to the spacing of the page when put side by side. I have also included the full-screen mode versions.

.kn-container .view-group-2 {
width: 500px; /* width in pixels */
}

#view_93 .menu-links__list {
flex: 1;
display: flex;
flex-direction: column;
// width: 250px; /* width in pixels */

}
#view_95 .menu-links__list{
flex: 1;
display: flex;
flex-direction: column;
// width: 250px; /* width in pixels */
}
.kn-container .kn-view{
width: 100%
}

below is the image of the two pages.

Code image

image
image1918×802 134 KB

Link List page

image
image577×914 6.83 KB

.control Page

image
image1523×414 10.5 KB

2

Hi @Mikeacce

I have never see the structure on the left hand app since I started developing in Knack.

Having said that I would try affecting the parent .view-group something like this (p.s. if this doesn’t work I’ll get back to you tomorrow I’m suggesting this while on my phone

.view-group:has(#view_xxx) {
flex-direction: column;
}

Craig

3

@NormandDefayette_CortexRD

Have you seen the left hand html on any KnackApp app?

Craig

4

I don’t have that many apps so I don’t have much experience with other knack apps. The test app (left side) was created more recently than the Finch app (right side).

knack says it is because I am using different styles for my buttons. However, I don’t want to break anything in the finch app by changing the button styles.

I tried your code on the finch app and that did not work.

any other suggestions.

5

As an update for those who are looking for this…

I finally got the CSS code working as follows

#view_xxxx .control {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}

1 Like
6

Hi @Mikeacce

I was confused as to which side you were trying to affect. Glad you figured it out.

Craig