Help with css

API & Customization
1

From the examples provided on the knack site, somehow the css codes applying to the entire app work fine (for example hiding the menu for all pages):

kn-app-menu { display:none ; }

But when I specify a view or a scene number, it does not work:

#kn-scene_16 #kn-app-menu { display:none ; }

please help. thanks!

 

2

Paul,

For what it's worth this helped me a lot. 

Thank You.

3

To answer the above two questions: You've both misunderstood the structure of a Knack page, and how CSS selectors work.

The short explanation is that while Knack neatly identifies the Scene and Views on your page with a DIV ID, the kn-info-bar DIV that contains the A element with class kn-log-out is actually *outside* of the Scene. The app (and the web more generally) works like a series of boxes, and you have to pick them very specifically in order to manipulate them.

This is how the different elements roll down, or cascade ("cascade" is the C in CSS), where 125 is your scene number.

.kn-content
    .kn-info-bar
        .kn-info
            .kn-current_user
                .kn-log-out
    .kn-scenes
        #kn-scene_125

When you tell CSS you want to select, for example, "#kn-scene_125 .kn-log-out", what you're actually telling it is that you want to apply a style to an element that has the ID "kn-log-out" which is a child of the element with the id "kn-scene_125". But that element doesn't exist! What you actually have is an A element with class kn-log-out, and it is the great-grand-child of the parent element's sibling. That's a very messy relationship.

What you need to say instead is that *when kn-scene_125 exists*, apply the style "display: none;" to the element with the class kn-log-out.

To my knowledge this isn't possible to do with CSS selectors (or if it is, it's far from easy, and runs the risk of having browser compatibility issues). Instead, you'll probably want to do it with Javascript.

Fortunately, Knack adds something called an event listener to every scene. So this makes it very easy to do. Where your scene is 125, you tell Javascript that when the scene renders, you should find the element, and set its display to none:

$(document).on('knack-scene-render.scene_125', function() {
    document.getElementsByClassName('kn-log-out')[0].style.display = 'none';
});

But there's a catch! Knack actually automatically adds TWO logout links, then only displays one of them, depending on whether you're in a fullscreen view or a mobile view. You'll probably want to remove both of them.

$(document).on('knack-scene-render.scene_125', function() {
    document.getElementsByClassName('kn-log-out')[0].style.display = 'none';
    document.getElementsByClassName('kn-log-out')[1].style.display = 'none';
});

I'd imagine it would probably be more efficient in terms of computing resources to create a CSS class where display=none, and then create a javascript loop that applies that class to each of the kn-log-out elements. But I don't feel like writing it, the code as posted works, and the resource savings are probably trivial. So you're on your own for that one.

I hope this doesn't just solve your problem, but helps you understand why you had the problem in the first place!

1 Like