Chrome bug? Cursor changes on mouse down + move - css

In Chrome (I am using version 16.0.912.75 m on Win 7) I find that no matter what I have a cursor set as, as soon as I hold my left mouse button down and move the cursor then the cursor type is changed to text (even when there is no text anywhere on the page).
Is this a bug? Does anyone know how to get around it as it is making my drag and drop tool look a bit silly!
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
}
<div></div>
Original JSFiddle: http://jsfiddle.net/KJfbs/
Edit
As answered by #davgothic below, adding -webkit-user-select: none; will fix the issue when there is no text. However, should we position the element absolutely and place text behind it then the problem persists.
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis eros mi, non tristique diam. Cras auctor posuere urna, porta egestas metus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer id arcu quis ipsum feugiat consequat id sit amet velit. Vivamus at quam quis lacus pellentesque egestas eu sed nulla. Vestibulum arcu augue, ultrices quis lobortis vehicula, molestie ut velit. Donec egestas lacus id diam euismod a lacinia lorem ultrices.
Vivamus non mi nunc. Pellentesque vitae sodales magna. In ac urna tortor. Quisque mattis mollis magna ultricies pellentesque. Mauris sed lorem eget sem imperdiet volutpat. Fusce fringilla pretium enim, eu ultricies justo fringilla in. Aliquam ac dui risus, ut eleifend tellus.
Nulla facilisi. Fusce nec leo lectus, in porttitor est. Etiam in posuere tellus. Maecenas viverra nibh et odio aliquam at aliquet arcu ultricies. Aliquam in arcu ac mi mollis ultricies vitae dapibus risus. Integer a arcu eu ipsum fermentum dignissim a vitae nunc. Pellentesque consectetur rutrum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi semper dapibus nunc. Mauris congue est sit amet neque condimentum nec fermentum massa sagittis. In bibendum cursus tortor quis scelerisque. Mauris est nisi, elementum eu scelerisque vel, placerat quis erat. Nam malesuada massa quis sem eleifend tempor eget ut erat.
Etiam egestas ligula nec odio molestie placerat. Donec nunc dolor, venenatis id iaculis vel, dapibus quis justo. Suspendisse sed nunc eget nunc luctus hendrerit eget at tortor. Quisque consectetur, eros eget dictum lobortis, erat nisl eleifend metus, egestas vulputate purus urna ut arcu. Nunc mollis tempor mi, quis commodo diam semper id. Nulla sed urna sit amet tellus consequat elementum. Maecenas cursus ipsum sit amet nunc laoreet quis placerat urna tempor. Maecenas tristique sodales posuere. Mauris scelerisque ornare tincidunt. Nulla tempus gravida orci, vel lacinia ante placerat ac. Donec gravida erat vitae elit suscipit ac ullamcorper lacus faucibus.
Aenean dictum elit eu nunc varius suscipit. Praesent ultrices, nunc ullamcorper posuere consectetur, purus ipsum dictum nisl, ultrices rhoncus nisl mauris sit amet dui. Donec convallis arcu eu nibh laoreet pulvinar. Sed euismod volutpat nibh eget faucibus. Maecenas interdum dapibus consequat. Sed sit amet leo lectus, euismod molestie nunc. Donec dui tellus, dignissim ut luctus non, facilisis eu magna. Phasellus a neque et dui luctus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat mollis dui, eget varius nunc gravida eu. Vivamus nibh erat, dapibus eu mattis blandit, sodales ut nisi. Vivamus pellentesque congue placerat. Pellentesque ultricies turpis vel odio imperdiet et facilisis leo viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Original JSFiddle: http://jsfiddle.net/KJfbs/2/

Try adding -webkit-user-select: none; to the CSS for that element to prevent text selection.
Example: http://jsfiddle.net/KJfbs/1/
Personally I would also add these...
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
...for cross browser compatibility.

I think that with -webkit-user-select: none; the problem persists if you put anything else in the page. For instance: http://jsfiddle.net/KJfbs/237/
Anyway I think jQuery preventDefault solves the problem in any case:
http://jsfiddle.net/KJfbs/241/
preventDefault avoids the default behavior that is change to cursor text.
Then I can control and put any cursor I want: $(this).css("cursor","wait");
JQUERY:
$(function(){
$('#lime').mousedown(function(e) {
e.preventDefault();
$(this).css("cursor","wait");
}).on('mouseup mouseleave', function() {
$(this).css("cursor","default");
});
});
HTML:
<div id="lime"></div>
<p>Lorem ipsum dolor sit amet</p>
CSS:
#lime {
background-color: lime;
height: 100px; width: 300px;
cursor: wait;
position: absolute;
top: 0; left: 0;
}

Related

Enable Scrolling in Angular 7

Angular 7 : for some unknown reason scrolling is disabled. I do not know if this is related to using router-outlet, or something I have done in the css.
I am putting the code for 1 of my components in here. Every component is using the same css for the container div.
The problem is anytime a component is placed in the router-outlet and it is longer than can fit on the screen, there is no scrollbar and the user can't scroll down to see the content that is offscreen.
app.component.html:
<app-navigation></app-navigation>
<router-outlet></router-outlet>
view-ratings.component.html:
<div class="container" >
/* a whole bunch of content */
</div>
view-ratings.component.css:
.container {
position: fixed;
top: 7em;
width:90%;
max-width: 90%;
margin-right: 5%;
margin-left: 5%;
display: flex;
flex-wrap: wrap;
}
Your container is fixed and probably ends out bottom of your page. The container of .container can't create the scroll bar of a fixed box. You have many possibilities, one is to set the end of your box bottom: 5px in my example.
.container {
position: fixed;
top: 7em;
width: 90%;
max-width: 90%;
margin-right: 5%;
margin-left: 5%;
display: flex;
flex-wrap: wrap;
/* solution */
bottom: 5px;
overflow: auto;
/* style */
box-sizing: border-box;
background-color: red;
padding: 15px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta pellentesque massa non blandit. Nulla a ullamcorper quam. Suspendisse tincidunt nec erat quis viverra. Nam consequat massa magna, quis venenatis sem iaculis vel. Nulla ullamcorper
dictum sapien nec cursus. Quisque interdum pulvinar magna, in tincidunt eros ultricies sit amet. Aliquam vel condimentum leo. Aenean tellus enim, posuere sed erat sit amet, pulvinar ultrices magna. Sed vitae iaculis nulla. Donec scelerisque eleifend
magna ullamcorper sagittis. Aliquam venenatis mi lectus, sed suscipit velit ornare sit amet. Maecenas et tellus tellus. Praesent efficitur nibh a ipsum ultrices faucibus. Pellentesque erat dolor, consectetur eget congue et, aliquam suscipit justo. In
hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dictum maximus odio luctus fermentum. Vivamus ipsum erat, rutrum id felis eu, commodo fringilla neque. Donec in lacus
magna. Phasellus tortor velit, aliquet id interdum et, facilisis ut erat. Maecenas venenatis lacus dui, ut vestibulum elit ornare id. Suspendisse potenti. Cras egestas libero nisl, sed blandit metus auctor vitae. Morbi vulputate nunc leo, sed lacinia
arcu tempus in. Praesent a leo tortor. Morbi pharetra finibus mi, vel hendrerit justo lobortis at. Quisque tempus sem non neque placerat, a tincidunt neque lacinia. Pellentesque laoreet ex orci, id varius ante ornare eget. Curabitur volutpat quam gravida
diam mattis laoreet. Praesent et mauris rutrum, scelerisque metus ut, convallis mi. Suspendisse eget lacinia lacus. Ut faucibus, ante id convallis elementum, neque lorem malesuada felis, ac imperdiet felis nisl ac urna. Aenean sagittis in arcu ac imperdiet.
Fusce vitae convallis dui. Fusce condimentum tortor eget commodo volutpat. Morbi enim neque, dictum sed venenatis quis, dictum vel libero. Nulla ullamcorper eros ut sapien gravida ullamcorper. Mauris sit amet dolor a tellus sagittis maximus. Vivamus
vehicula maximus magna, eget viverra tortor porta nec. Quisque gravida risus eget laoreet cursus. Nam vestibulum ullamcorper purus eget scelerisque. Integer lacinia faucibus ipsum, mattis convallis ex lacinia nec. Nunc commodo et ante vitae iaculis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper cursus rutrum. Duis sit amet fermentum mauris. Vestibulum ultricies vehicula ipsum at rutrum. Curabitur at felis lacus. Quisque porta enim vitae arcu commodo vulputate. Aliquam
condimentum et ex ac cursus. Proin facilisis lorem ac augue cursus, congue posuere velit consectetur.
</div>
Another solution can be to set your box position: absolute; or not fixed then is your body to create the scroll bar.
.container {
top: 7em;
width: 90%;
max-width: 90%;
margin-right: 5%;
margin-left: 5%;
display: flex;
flex-wrap: wrap;
/* solution */
/* position:fixed; */
position: absolute;
overflow: auto;
/* style */
box-sizing: border-box;
background-color: red;
padding: 15px;
margin-bottom:50px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta pellentesque massa non blandit. Nulla a ullamcorper quam. Suspendisse tincidunt nec erat quis viverra. Nam consequat massa magna, quis venenatis sem iaculis vel. Nulla ullamcorper
dictum sapien nec cursus. Quisque interdum pulvinar magna, in tincidunt eros ultricies sit amet. Aliquam vel condimentum leo. Aenean tellus enim, posuere sed erat sit amet, pulvinar ultrices magna. Sed vitae iaculis nulla. Donec scelerisque eleifend
magna ullamcorper sagittis. Aliquam venenatis mi lectus, sed suscipit velit ornare sit amet. Maecenas et tellus tellus. Praesent efficitur nibh a ipsum ultrices faucibus. Pellentesque erat dolor, consectetur eget congue et, aliquam suscipit justo. In
hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dictum maximus odio luctus fermentum. Vivamus ipsum erat, rutrum id felis eu, commodo fringilla neque. Donec in lacus
magna. Phasellus tortor velit, aliquet id interdum et, facilisis ut erat. Maecenas venenatis lacus dui, ut vestibulum elit ornare id. Suspendisse potenti. Cras egestas libero nisl, sed blandit metus auctor vitae. Morbi vulputate nunc leo, sed lacinia
arcu tempus in. Praesent a leo tortor. Morbi pharetra finibus mi, vel hendrerit justo lobortis at. Quisque tempus sem non neque placerat, a tincidunt neque lacinia. Pellentesque laoreet ex orci, id varius ante ornare eget. Curabitur volutpat quam gravida
diam mattis laoreet. Praesent et mauris rutrum, scelerisque metus ut, convallis mi. Suspendisse eget lacinia lacus. Ut faucibus, ante id convallis elementum, neque lorem malesuada felis, ac imperdiet felis nisl ac urna. Aenean sagittis in arcu ac imperdiet.
Fusce vitae convallis dui. Fusce condimentum tortor eget commodo volutpat. Morbi enim neque, dictum sed venenatis quis, dictum vel libero. Nulla ullamcorper eros ut sapien gravida ullamcorper. Mauris sit amet dolor a tellus sagittis maximus. Vivamus
vehicula maximus magna, eget viverra tortor porta nec. Quisque gravida risus eget laoreet cursus. Nam vestibulum ullamcorper purus eget scelerisque. Integer lacinia faucibus ipsum, mattis convallis ex lacinia nec. Nunc commodo et ante vitae iaculis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper cursus rutrum. Duis sit amet fermentum mauris. Vestibulum ultricies vehicula ipsum at rutrum. Curabitur at felis lacus. Quisque porta enim vitae arcu commodo vulputate. Aliquam
condimentum et ex ac cursus. Proin facilisis lorem ac augue cursus, congue posuere velit consectetur.
</div>
It depends on the result you are looking for.
Hope this help you :)

Fade text to transparent with functional links

I have some expandible panels with long basic HMTL content (img, a, strong…) and I want to crop them to a certain max-height when they're collapsed fading the content to background color.
This is how am doing it right now (and also the correct visual result I expect):
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
The problem with this method is that links aren't clickable because there's this gradient glass (.collapsed::after) layer above the real content.
I tried two approaches to solve this issue, but neither of them is acceptable to me...
The first one is to bring links above the glass. This way, links are clickable but they aren't affected by the gradient, and I want them to be.
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
a {
position: relative;
z-index: 1;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
The other method is a totally different approach, removing the glass layer and applying a gradient to the content itself:
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
background: linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(255,255,255,0) 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a {
color: blue;
text-decoration: underline;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
This method (besides being less compatible) removes styles from links, and I don't like/want that either...
So, I wonder if anyone has come up with a good solution for this (the better if it's pure CSS).
Add the pointer-events: none; CSS style to your gradient element.
It works exactly how it sounds - the gradient element will no longer accept pointer events, they will fall through instead to the element below.
Browser Support
Spec on MDN
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
pointer-events: none;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>

CSS-Parent div hiding fixed position child-modal in Safari

I have some pretty inconsistent behavior for a modal I made with css. I have a 2 column layout, with content and a sidebar. I've put a modal in the sidebar because I have a button in the sidebar that toggles the modal open and close, and I kind of wanted to keep the button and modal together in the HTML.
The sidebar's content is often larger than the browser window, so to allow users to scroll it independently of the content, I've made the sidebar's position fixed and turned on overflow: scroll.
The problem is that in Safari and sometimes Chrome, the only part of the modal that is visible is the part that's inside the sidebar.
I assume I'll need to restructure my HTML, but I was wondering if there is something else I can do to make Safari render my modal correctly.
Here is an example I made of the problem
HTML
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, nunc eget lobortis efficitur, nisl augue semper lorem, vel laoreet turpis libero non magna. Donec eu massa sed quam venenatis dapibus. Quisque orci tortor, blandit ut velit eget, molestie gravida justo. In pulvinar, mi ac tempus vulputate, sapien ante bibendum mi, sed feugiat ante odio vitae orci. Phasellus mattis nisi ligula, vel eleifend dolor tincidunt vestibulum. Fusce in sodales orci. Morbi at ligula in mi fermentum dapibus ut a sapien. Donec congue arcu ac augue tristique viverra. Praesent erat libero, luctus a porta a, placerat eu nisl. Vestibulum laoreet eros vitae lorem facilisis, id aliquet sem volutpat. Quisque a nulla vitae quam interdum bibendum. Suspendisse convallis diam vitae elit tincidunt bibendum eu ut justo. Sed a dapibus diam.
</p>
<p>
Donec posuere, justo quis dictum imperdiet, nisl odio sodales nisl, id commodo erat nibh id turpis. Cras vestibulum nec mauris et blandit. Etiam dictum, orci vitae posuere scelerisque, urna mi sodales neque, eget commodo quam ex sed diam. Integer a ex cursus, interdum lacus ac, dignissim ligula. Morbi lobortis auctor rutrum. Sed finibus elit at vulputate rutrum. Nam mauris ipsum, vestibulum non tincidunt quis, hendrerit ut tellus. Etiam mollis massa lectus. Curabitur elementum eros ac libero dignissim porttitor. Curabitur augue lacus, pretium ut dolor ac, gravida laoreet risus. Aenean scelerisque tellus suscipit velit sollicitudin semper. Mauris laoreet ante vitae purus pellentesque sagittis. In at risus in ligula rhoncus hendrerit et id dolor. Vivamus pellentesque felis vel dolor malesuada, in egestas nisi ultrices.
</p>
</div>
<div class="sidebar-wrapper">
<div class="parent-sidebar">
<p>
Sed eros dui, porta vel efficitur eget, scelerisque at ante. Sed nunc quam, posuere vel pulvinar non, imperdiet et quam. Proin sed turpis eu neque placerat mollis eget sed erat. Maecenas nec fermentum urna, id pellentesque sem. Donec commodo massa et tincidunt volutpat. Fusce egestas ac nisi quis tincidunt. Ut condimentum lorem ante, in eleifend nulla dapibus vel.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus bibendum porttitor nulla. Integer aliquam varius neque ac facilisis. In hac habitasse platea dictumst. Sed sodales vestibulum aliquet. Aenean vestibulum nulla ut egestas vulputate. Sed quis massa ultrices nulla placerat placerat. Donec tempus justo ac lorem eleifend gravida. In ultricies vestibulum lorem, vel eleifend nunc. Mauris consequat, risus in auctor consectetur, nisl eros pulvinar mauris, a posuere felis urna a nunc. Duis at eleifend dolor.
</p>
<p>
Aliquam eu sem elit. Suspendisse dapibus diam sed mi vehicula lacinia. Duis posuere orci metus, a porta ligula porttitor in. Phasellus id aliquet augue. Quisque sit amet elit lobortis, gravida lorem sit amet, pharetra ipsum. Aliquam urna nisl, commodo eget quam a, cursus lacinia metus. Pellentesque nec nulla velit. Curabitur feugiat in ante semper euismod. Phasellus imperdiet sem quis nulla elementum commodo. Ut at maximus justo, eu accumsan elit.
</p>
<div class="child-modal">
<h1>
I'm a modal!
</h1>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
margin: auto;
}
.content {
width: 75%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.sidebar-wrapper {
width: 25%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.parent-sidebar {
width: inherit;
height: 100vh;
overflow: auto;
position: fixed;
}
.child-modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
I made a JSfiddle to show what I mean.

Unable to toggle the visibility property on hover in CSS

(Testing in Chrome)
In the below CSS, I'm trying to toggle the visibility of a P-tag when the mouse hovers over it. It's hidden but becomes visible on hover with a yellow highlight.
p {
visibility: hidden;
}
p:hover {
background-color: yellow;
text-decoration: overline;
visibility: visible;
}
But this isn't working; the P element is always hidden. I verified that if I remove the first definition, then the hover works, but I need to hide it most of the time.
I'd suggest toggling the opacity property instead.
p {
opacity: 0;
}
p:hover {
background-color: yellow;
text-decoration: overline;
opacity: 1;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan, orci ut posuere aliquet, libero erat vestibulum ligula, nec eleifend sapien nunc eu leo. Mauris ligula sapien, posuere eu ligula et, tincidunt pharetra velit. Pellentesque volutpat elit sed mollis lacinia. Donec nunc diam, viverra vel sapien non, dictum faucibus nibh. Donec dictum nec diam non sagittis. Quisque eget arcu et nunc lobortis accumsan vitae vel urna. Vivamus semper mollis auctor. Donec tempus, lectus quis maximus gravida, arcu lorem sollicitudin elit, nec sollicitudin sem neque a felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vehicula, nibh vel euismod fringilla, mi lorem luctus dui, viverra efficitur diam sapien sit amet mi. Maecenas sed laoreet mauris. Nunc sodales, mi eu vulputate ullamcorper, ligula augue imperdiet massa, vitae fringilla tellus lorem id dui. In dapibus arcu nec felis porttitor varius.</p>
In doing so, the element will still consume the same amount of space when it isn't visible. In other words, the hidden text will continue to behave similarly to text hidden with visibility: hidden.

CSS - how to position element to the bottom of its parent container?

In the following example, I am trying to put the child div (the pink rectangle) to lay at the bottom of its parent div.
I tried to use the suggestion that I found this stackoverflow thread but it didn't help.
Any idea?
<html>
<style type="text/css">
.a {
background: gray;
height: 80px;
}
.b {
background: pink;
float: right;
bottom: 0px;
}
</style>
<body>
<div class="a">
the parent
<div class="b"> child
</div>
</div>
</body>
<html>
make the parent "position: relative" and the child "position: absolute". Then you can position the child "right: 0; bottom: 0"
<html>
<style type="text/css">
.a {
position: relative;
background: gray;
height: 80px;
}
.b {
background: pink;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<div class="a">
the parent
<div class="b"> child
</div>
</div>
</body>
<html>
Edit: Full HTML to show what is discussed in the comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.a {
background: gray;
position: relative;
}
.b {
background: pink;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<div class="a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut quam sapien, id dictum purus. Ut vel consectetur justo. Sed suscipit justo ullamcorper diam interdum laoreet pulvinar nisl laoreet. Sed sem est, feugiat commodo bibendum vel, laoreet ac sapien. Fusce nisl nulla, commodo ut ultricies ut, iaculis a dolor. Nunc ultrices elit at tellus scelerisque vel vestibulum justo pretium. Suspendisse potenti. Suspendisse nec felis sem. Donec at tellus dolor, vehicula placerat lacus. Ut non libero at massa convallis imperdiet non rhoncus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nibh velit, congue quis tincidunt sed, feugiat a turpis. Phasellus erat justo, dictum non iaculis sit amet, auctor quis neque. Cras leo tortor, consequat non tincidunt sed, lacinia ut nibh. Etiam eu mollis quam. In eu felis velit, at bibendum sapien. Aenean sed est urna. Sed dignissim dapibus dolor sed pellentesque. Aliquam viverra ipsum sit amet justo gravida in facilisis sapien volutpat.
<p>Suspendisse commodo vulputate nunc, vitae commodo tellus varius eu. Donec adipiscing diam vel felis blandit lobortis. Donec et turpis nunc. Curabitur ac elementum mi. Aenean libero ipsum, lacinia sit amet ornare sed, sollicitudin quis libero. Vestibulum ullamcorper ullamcorper luctus. Aenean pretium ornare tempor. Sed ultricies eros sem. Aenean placerat tristique tellus nec sodales. Proin sed justo non libero condimentum commodo. Quisque sed nisl nisi, vel mattis nisl. Phasellus rhoncus pharetra egestas. Quisque nec arcu ac neque placerat rutrum. In feugiat justo ac orci dignissim rhoncus. Mauris vitae fringilla magna.
<p>Nam sagittis erat id sapien lacinia ultrices. Pellentesque ultrices, justo vitae blandit convallis, felis mi laoreet sem, in pharetra libero mauris eget nisl. Etiam in mi eget elit bibendum consectetur et nec nibh. Curabitur in justo arcu. Morbi eget venenatis enim. Duis tempor quam lacinia elit consequat sit amet blandit dolor vulputate. Aenean massa libero, suscipit eu tristique id, imperdiet pellentesque justo. Proin rutrum erat sit amet orci iaculis ut lobortis turpis sagittis. Nam luctus mollis mi, nec laoreet urna semper vitae. Pellentesque in massa enim. Etiam fermentum urna vitae lorem consequat pretium. Maecenas id ligula diam, id consectetur purus. Vestibulum libero velit, tempor hendrerit posuere ut, rutrum nec velit. Suspendisse id pulvinar erat. Sed vulputate, nibh id vulputate vestibulum, dolor elit tincidunt est, sed varius neque tellus tincidunt erat. Nunc volutpat eros in diam semper dictum. Quisque ut ligula felis.
<p>Ut pharetra feugiat nisi eu viverra. Praesent sollicitudin iaculis elit, ac lobortis ante consectetur sed. Nullam sit amet enim eget massa dapibus molestie. Donec orci diam, tempor sit amet aliquet eget, placerat in nulla. Sed et sollicitudin mi. Donec pulvinar elit pharetra urna ornare sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mi libero. Ut et ipsum nec enim adipiscing pellentesque a nec quam. Pellentesque viverra, enim id auctor lacinia, turpis leo blandit odio, et luctus orci purus at nunc. Morbi eu sem id diam aliquam egestas. Vestibulum hendrerit lobortis est a convallis. Nunc quis quam odio, a eleifend dolor.
<p>Vivamus sollicitudin convallis diam, ut luctus ipsum viverra in. Morbi sit amet sapien urna, sit amet dictum nisi. Duis elit tortor, iaculis nec feugiat in, aliquam ut nisl. Nulla scelerisque sagittis aliquam. Ut tempus auctor tempus. Aliquam auctor vulputate volutpat. Praesent libero orci, volutpat a volutpat ac, vulputate at enim. Phasellus semper sem sed velit bibendum tempus. Aenean ut mauris nisl. Nam sit amet ipsum arcu. Phasellus pretium venenatis egestas. Ut in nulla sem. Proin aliquet facilisis lectus non consequat. Nullam vel magna et ligula viverra sagittis. Fusce in massa in quam vehicula convallis. Nullam placerat erat in nunc eleifend sed dapibus elit tempor.
<p>Aliquam in erat mi. Suspendisse dui dui, facilisis ac lobortis id, mollis quis enim. Aliquam erat volutpat. Sed in porta arcu. Maecenas aliquam congue sem, at scelerisque odio pharetra ac. In egestas rutrum cursus. Aliquam erat volutpat. Etiam a libero risus. Morbi odio eros, sollicitudin vel mattis vel, aliquet a elit. Suspendisse vel lectus risus, in iaculis ipsum. Etiam vitae justo nibh, non bibendum purus. Quisque mi erat, accumsan sit amet fringilla eu, rhoncus sed ipsum. Ut ac leo a nunc accumsan placerat at ut mauris. Aliquam imperdiet urna urna.
<div class="b"> child
</div>
</div>
</body>
<html>
In order to use the position attributes (top, right, bottom, left), the element's position CSS attribute must be relative, absolute, or fixed.
Also, the positions will be calculated relative to the element's offset parent. In order to make them relative to your .a element, it needs to have position: relative.
In your case, you need to write
.a {
background: gray;
height: 80px;
position: relative;
}
.b {
background: pink;
position: absolute;
right: 0px;
bottom: 0px;
}
.b needs position:relative; absolute would position it according to the window size, not to his parent.
there is also vertical-align which gives you a "true" bottom alignment but its only usable with table display properties like table-cell
The best way is using relative/absolute (as mentioned by a bunch of other answers). An alternative (if both the parent and child have known heights) is to set a top margin on the child:
.a {
background: gray;
height: 80px;
}
.b {
background: pink;
float: right;
height: 20px;
margin-top: 60px;
}

Resources