Avatar for Username

Pomoc pśepytaś

Glědajśo se wobšudy pomocy. Njenapominajomy was nigda, telefonowy numer zawołaś, SMS pósłaś abo wósobinske informacije pśeraźiś. Pšosym dajśo suspektnu aktiwitu z pomocu nastajenja „Znjewužywanje k wěsći daś“ k wěsći.

Dalšne informacije

Toś ta nitka jo se archiwěrowała. Pšosym stajśo nowe pšašanje, joli trjebaśo pomoc.

Scrollbars used in a:hover

  • 1 wótegrono
  • 3 maju toś ten problem
  • 8 naglědow
  • Slědne wótegrono wót Shadow110

m.pe
m.pe
more options

I have a container for a left-sided navigation panel. In this panel, I have a list of links. Some of these links are too long to fit with the width and we don't want to wrap the lines. So we came up with the following idea: Clip the long lines. However, when hovering over them, present a scrollbar to allow scrolling just the single line which is too long.

I came up with a CSS using something like this (where ".panel" sets the width of the navigation panel):

.panel a { 

 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

}

.panel a:hover { 

 overflow-x: auto;
 text-overflow: clip;

}

Now, this works in that when hovering over a too long link a scrollbar is presented right below the link. However, the functionality of this scrollbar is as follows:

(1) You can click on the left and right triangles to scroll the content of the link by character left or right, respectively. (2) You can click in the space between a triangle and the scrollbar handle to scroll the content of the link "page" wise.

but when you

(3) click and hold the scrollbar handle, the content is moved a few pixels and then the whole content is used for a drag-and-drop action. I.e., click and hold on the scrollbar handle is considered to be click and hold on the content itself.

This is on Firefox 57.0.2.

(Just for completeness: In IE 11 the behaviour is different: The scrollbar works as expected. When clicking and holding on the link itself, drag-and-drop action happens.)

I appreciate any ideas to solve this.

Peter

I have a container for a left-sided navigation panel. In this panel, I have a list of links. Some of these links are too long to fit with the width and we don't want to wrap the lines. So we came up with the following idea: Clip the long lines. However, when hovering over them, present a scrollbar to allow scrolling just the single line which is too long. I came up with a CSS using something like this (where ".panel" sets the width of the navigation panel): .panel a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel a:hover { overflow-x: auto; text-overflow: clip; } Now, this works in that when hovering over a too long link a scrollbar is presented right below the link. However, the functionality of this scrollbar is as follows: (1) You can click on the left and right triangles to scroll the content of the link by character left or right, respectively. (2) You can click in the space between a triangle and the scrollbar handle to scroll the content of the link "page" wise. but when you (3) click and hold the scrollbar handle, the content is moved a few pixels and then the whole content is used for a drag-and-drop action. I.e., click and hold on the scrollbar handle is considered to be click and hold on the content itself. This is on Firefox 57.0.2. (Just for completeness: In IE 11 the behaviour is different: The scrollbar works as expected. When clicking and holding on the link itself, drag-and-drop action happens.) I appreciate any ideas to solve this. Peter

Wšykne wótegrona (1)

Shadow110
Shadow110
more options

No ideas