Page 1 of 1
ugly and unwanted: links in lookup
Posted: 2021-01-11 17:09
by onoehring
Hi,
1. I am wondering, if there is a way (CSS?) to make links not show up "ugly" in a lookup field.
See the picture, the text after the : is made of individual links (first line: 1001665 is a link, 401Electronics is another link). You will notice, that the links after 414Tablet are not really visible.
2. Also: In this dropdown I would like to disable links (to prevent users from accidentally clicking on them. Is that possible?
- l13.png (39.14 KiB) Viewed 2925 times
Olaf
Re: ugly and unwanted: links in lookup
Posted: 2021-01-11 20:12
by pbottcher
Hi.
for qustion 1: change the css
.select2-results .select2-highlighted {
background: #3875d7;
color: #fff;
}
to something that fits for you.
Why do you need to show the links on the seletable items?
Re: ugly and unwanted: links in lookup
Posted: 2021-01-13 06:36
by onoehring
Hi pbötcher,
thank you.
I searched and found this - which can disable links using css. Pretty neat I think
Source:
https://stackoverflow.com/questions/209 ... ss#4416239
regular HTML:
Code: Select all
<a href="link.html" class="not-active">Link</a>
and CSS
Code: Select all
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
On stackoverflow it says in the comments (deriving from 2013), that you can still tab to the link - which I can not. Probably the browser-problem was solved by now.
Olaf
SOLVED: ugly and unwanted: links in lookup
Posted: 2021-01-13 16:22
by onoehring
Hi,
thanks again for your help pbötcher.
I want to post this follow up as it might help others. Your css path brought me on track and using the CSS from above I was able to get it working.
In the following CSS I set red as background to make it easy recognizable. The links in the path (all words after the colon (:) ... >... >... are links) are disabled and the cursor stays the hand - works perfect. Once the user has chose an entry he can click on each individual link - which is fine for me, as I just wanted to make sure nobody accidentally clicks on any link while choosing some value from the lookup.
CSS used
Code: Select all
.not-active,
#select2-drop > ul > li > div > a {
pointer-events: none;
cursor: default;
text-decoration: none;
/* color: black; */
}
.select2-results .select2-highlighted a {
background: red;
color: yellow;
}
Looks like this:
- l14.png (12.05 KiB) Viewed 2286 times
Once chosen:
- l15.png (3.43 KiB) Viewed 2286 times
Olaf