Centre button & tab menus

Ask the Community Get Answers
1

I’ve searched, managed to centre the main app menu but for the life of me cannot locate a way of centering the BUTTONS/TABS menu items

image
image968×188 12.3 KB

Any clues as to what they are referenced by in CSS (if it can be done there ?

Ray

2

Hi @RayWindlow47079. Interesting app subject!
You can use justify-content in either of the below CSS blocks:

/* Applies to a view specific menu, replace view_xx with your intended view key */
#view_xx .menu-links__list {
  justify-content: center;
}

/* OR */

/* Applies to any view menus*/
.menu-links__list {
  justify-content: center;
}

This is the expected output:

image
image962×234 7.65 KB

3 Likes
3

Perfect Mate thank you - couldn;t for the life of me find the appropriate item to be centering for the sub-level.

Maybe KNACK might start providing a developers list of these named paramteres which can be massaged would make life a heck of a lot easier.

Cheers

1 Like
4

That’s unlikely from the Knack team, given there are a lot of different elements on a live app page! I personally like to keep my own library of my frequently used CSS. If you navigate your way around the Developer Console on your browser, you’ll discover all sorts of elements you can adjust.

1 Like
5

Hi Stephen yes I did try that but nailing down what the variable should be known as when its nested so deep within the code is difficult. I tried various ones but I am no expert when it comes to javascript etc and unsure whether its a . or a # prefix etc.

As you can see from our main screen below which is researcher team use only, I have managed to achieve some things using snippets and advice from posts on the forum which makes it look less “basic” but it’s a hit and miss popositions sometimes.

Thanks again for assistance.

image
image800×619 66.9 KB

6

I love what you’ve done with your styling!

One easy thing to remember is that you should prefix with a . for the class= parameter, and # for the id= parameter.

In the below HTML element example, I would target ALL divs of class kn-input with div.kn-input, whereas if I wanted to target just the one input, I’d use div#kn-input-field_56.

<div class="kn-input kn-input-short_text control" id="kn-input-field_56" data-input-id="field_56">
1 Like
7

Thanks I’ll make a note of that Stephen.