ugly and unwanted: links in lookup

[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 2225 times

Olaf

[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?

[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

[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 1586 times

Once chosen:

l15.png (3.43 KiB) Viewed 1586 times

Olaf