Making the search box (List search, LL) larger / text size smaller

CSS Customisation
1

I’ve used the following code to do this. It shows more results. It’s especially useful if you’ve changed general heading styles, which unfortunately get carried over into the search box by default.

```

/* Sorting out search box */

/* The outer dialog */

.dialog {

height: 750px !important;

}

/* The inner content wrapper — also has inline height */

.dialog__content.cl_content {

height: 750px !important;

}

/* The scrolling segment in the search box */

.searchEverywhere .menuPopupList,

.searchEverywhere .locationsList {

max-height: 590px !important;

}

/* Sets font size for text shown in the search box */

.searchEverywhere .node_text {

font-size: 14px !important;

line-height: 1.3 !important;

font-weight: normal !important;

}

```

2

Hello @Nick_Riches !

Thanks for sharing this. I see that it is inconvenient to set the max-height, so I corrected this, and uploaded the fix to beta.checkvist.com. Now, you can affect the max height of the LL window as:

.searchEverywhere {
  --searchEverywhere-maxHeight: 550px;
}

In fact, it affects only the height of the scrollable part, so it is not the direct height of the whole window.

I hope this will help, please check how it works on https://beta.checkvist.com

Please let me know.

Kind regards,
KIR

3

Thanks. I’ve yet to try this. I am not sure of the relationship between the beta account and the main account. Presumably new features are introduced in the beta account first? However, the css seems to have an identical effect in the beta and main accounts. One thing, I have noticed is that the css manipulation unfortunately affects both the tag selection dialog and the date selection dialog too. Is there a way to restrict this so that it only works in the locations list?

4

Hi,

Beta account has the same data as the main account. But beta has the newly introduced features, some work in progress.

Your CSS styles affect all popups, so this approach would not work well.

Hence, I’d suggest to try using the style I described above - it should work better.

Hope, this helps,
KIR

5

A very late reply. That code works a treat. Thanks.

6

Okay. That did work, but it doesn’t now. I am not sure what happened. However, the following works. It manipulates the height of .dialog__content only when it contains .searchEverywhere.

.dialog:has(.searchEverywhere) {
height: 750px !important;
}

.dialog__content.cl_content:has(.searchEverywhere) {
height: 750px !important;
}

/* These are already scoped correctly since .searchEverywhere is the ancestor */
.searchEverywhere .menuPopupList,
.searchEverywhere .locationsList {
max-height: 590px !important;
}

7

Hmm,

it is a bit weird that it does not work, maybe you could share more details? Specific pages where it does not work?

I suppose your last set of styles was AI-generated, it may work but it looks fragile.

Thanks,
KIR