I am CSS challenged. My customer wants to have the most rows / screen. I did that in CSS by setting .k-toolbar height to 0em !important, but that breaks other things, so my question is does anyone have the CSS I will need to have ALL queries (some are pick lists with a checkbox, some have buttons inline) with a minimal height. So, it should look like below:
Thanks
Bruce
CSS to minimize row height in queries
-
- Posts: 1460
- Joined: Tue Jan 24, 2017 5:51 am
- Location: 'Stralya
Re: CSS to minimize row height in queries
New version includes a narrow row option baked into the Configurator. I am guessing that means it generates a new css class for those narrow row grids, which means you can just add that into your custom CSS with a modified row height if you need it to be even smaller.
Re: CSS to minimize row height in queries
CSS in Aware is usually not a 1 fix thing to fix all but if you already have a working CSS change but it messes up other things, the easiest thing you can do to fix this is to make your CSS class more specific so it only targets the queries you want.
If you have the following class now:
All you have to do is add another part to the class like this:
And then you add "MySpecificQuery" to the class field on the queries where you want to apply the change.
If you have the following class now:
Code: Select all
.k-toolbar
{
height: ....
}
Code: Select all
.k-toolbar .MySpecificQuery
{
height: ....
}
Henrik (V8 Developer Ed. - Windows)
Re: CSS to minimize row height in queries
hpl123 wrote: ↑Tue Dec 19, 2023 8:50 am CSS in Aware is usually not a 1 fix thing to fix all but if you already have a working CSS change but it messes up other things, the easiest thing you can do to fix this is to make your CSS class more specific so it only targets the queries you want.
If you have the following class now:All you have to do is add another part to the class like this:Code: Select all
.k-toolbar { height: .... }
And then you add "MySpecificQuery" to the class field on the queries where you want to apply the change.Code: Select all
.k-toolbar .MySpecificQuery { height: .... }
Silly question, instead of changing the 80-100 queries to have the class, and since I didn't add a class to any of my queries, is there a default "query" class that Aware uses so I can add that to the .k-toolbar selector?
Thanks
Bruce
Re: SOLVED
Yes, CSS can be tricky and complex. What was your final solution?
Henrik (V8 Developer Ed. - Windows)
Re: CSS to minimize row height in queries
Pointswell, where would one find this 'narrow row option' in v9.0?PointsWell wrote: ↑Mon Dec 18, 2023 10:30 pm New version includes a narrow row option baked into the Configurator. I am guessing that means it generates a new css class for those narrow row grids, which means you can just add that into your custom CSS with a modified row height if you need it to be even smaller.
Thx