A Feature to Add Classes to Views in the Builder

Feature Requests
1

Hi

This is an idea I got from using WordPress Divi.

It would nice to be able to add classes to a views/scenes/fields in the builder. We are able to do by adding a span in the title or description and using the selectors ‘.kn-view:has(.class)’ or ‘.kn-input:has(.class)’ which has caused us issues and it also makes the CSS tedious. I believe this feature would save a lot of time when trying to style our app use jquery.

Craig

2

Nice idea @CSWinnall - we do this now with a span tag in the view description containing a class to trigger CSS or JQuery actions if that helps?

1 Like
3

Hi Brad thanks.

4

I had also requested t his many months ago. Brad - can you show an example of what you are putting in the View Description. I don’t understand how this is going to work - the span doesn’t envelope the view?

Thanks.

1 Like
5

Hi Mike

You can do this a number of ways but you have to be careful you don’t double up on css.

So you can add
<span class='txtRed'></span>

To the view description then in the CSS you can add:

.kn-view:has(.txtRed) {
color: red;
}

This will make all the text in the view red.

If you want to make all text in all labels you can add this:

.kn-view:has(.txtRed) label {
color: red;
}

This will make all text labels in the view red.

If you add the span in an input label you can do this to make a specific label red

.kn-input:has(.txtRed) label {
color: red;
}

Hope this helps

Craig

6

Craig,

I tried this and it doesn’t work for me. I must be missing something. When you say ‘View Description’ - are you referring to the box labeled Description on the Settings tab of the View dialog box (used to create the view)? If so, how does this apply to the app - it doesn’t show up in the html? If this is not what you are referring to, please provide more details of where this code is placed.

Thanks,
Mike

7

Craig - I now see where the Description shows up in the HTML. However, I do not see the CSS show up anywhere in the view. Even if it were to get overwritten by another higher priority CSS, it should still show up and show it disabled.

8

Hi Mike

Could you reply with these things:

The span & classes you are using
The css
What you are trying to target

I will try and help as much as I can. We use this all over our app.

9

Craig,

An example is that I use jquery to add a class to certain views where I want the presentation or behavior to be different than the default, or I add a class to various input fields to hide them off-screen so that I can update them via code when a form is submitted, etc.

The other thing I do a lot is set CSSto make forms look better - more professional and readable. In the CSS, I have to list every form view that I want to include. Otherwise I would need to use javascript to add a class - which sometimes causes some glitches/flashes upon loading the page. In addition I would need a handler for every form view.

Thanks,
Mike

10

Hi Mike

If you need to target a view you need to put this in either the header or the description.

<span class="your-class"></span>

Then in the CSS you would put

.kn-view:has(.your-class) {
         color: red;
}

This will turn text in all your views that contain “your-class”, red.

Or you can target all views with “your-class” in JQuery with

$(".kn-view:has(.your-class)")

This will cut down on adding you view ids all the time. You can then add further selectors to pin point items in all those views.

I hope this helps if you need any more help you can share the code that doesn’t work and I’ll take a look.

Craig

1 Like
11

Craig,

Since you’re using the KTL, you can also use the _cls keyword: Add/Remove Classes.

Is there a difference between the KTL’s solution and what you’re proposing here?

About the view’s flashing that happens sometimes, I am aware that this is a potential problem and I am working on a solution.

Norm

12

@NormandDefayette_CortexRD I completely agree that you can do this with the KTL but the original question was about how to use the CSS has class.

I also think this is something that Knack should be doing as a basic feature and it completely baffles me that Knack doesn’t have this feature.

Craig

1 Like
13

Craig,

I finally got around to trying this again. Long story short - I came across an article on the internet that explained that this feature - :has() - is not enabled by default in Firefox - you have to enable it. It works fine in native Chrome. This would certainly provide for a significant reduction in CSS, however, unless I can find a way to force Firefox (and any other browsers that require enabling), I can’t rely on using this technique in client apps.

Any ideas?

Thanks,
Mike

14

Hi Mike

I would strongly suggest you take a look at KTL

It allows you to add keywords in view descriptions in the builder amongst other things.

One of the keywords is _cls

Which you could use like this

_cls=your-class

This will add the class to your view which can then be used in CSS. Unfortunately to get most CSS to work in Knack :has or using JQuery is the only solution.

If you decide to use the KTL (knack-toolkit-library) I can help with any questions you have about it.

Since we started to use KTL our CSS is so much easier and cleaner to write.

Craig

1 Like
15

Hi to all,

In the latest release, KTL v0.18.5, the _cls keyword now supports the ktlCond option.

This means that you can add or remove a class to your view based on a comparison between a hard coded value and a field value anywhere in your page.

Have fun!
Norm

1 Like