I have some basic code that allows for a popup to appear when something is hovered over. Codepen: https://codepen.io/Sean713/pen/GRBpVOZ
.row {
height: 100px;
border: 1px solid red;
display: flex;
}
.subdiv {
border: 1px solid green;
position: relative;
}
.popup {
display: none;
position: absolute;
left: 100px;
border: 1px solid black;
}
.hover:hover+.popup {
display: inline;
}
<div class="row">
<div class="subdiv">
<p class="hover">Hover</p>
<div class="popup">
<p>Surprise I am a popup</p>
<p> and so am I</p>
</div>
</div>
</div>
Since .row is a flexbox, it makes sense that .subdiv should compress its width to its content, as I have not specified otherwise.
However, the popup that appears when I hover is having unexpected behavior. The actual text inside the p tags is wrapping and is only as wide as the longest word in the sentence, it seems to be acting almost like .subdiv. I'm not sure why this is the case or why the fact that .row being a flexbox is influencing this popup. I would like for the p tags inside the popup to full block and allow the popup to wrap around that.
Edit: Adding white-space: nowrap; to the p tag fixes it, but I don't understand why the wrapping issue occurs in the first place.
Related
The parent has red dashed border, and the children elements are filled with blue. It can be implemented by inline-block, float, flex, etc.
I want to implement such effect: when the parent's width gets too small to contain the last children element, then the last element will be hidden.
How to implement this with pure CSS or with minimal JavaScript?
There is a way to do this using max-width, max-height and overflow, like the example below:
.parent {
max-width: 400px;
max-height: 60px;
overflow: hidden;
border: 1px dashed #ddd;
}
.child {
width: 100px;
height: 50px;
margin: 5px;
background-color: blue;
display: inline-block;
color: white;
text-align: center;
}
<p>There are 5 items here</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
And here is another example using flex instead of display: inline block; with max-width, max-height and overflow too
.parent {
display: flex;
border: 1px dashed #ccc;
max-width: 380px;
max-height: 60px;
overflow: hidden;
flex-wrap: wrap;
}
.child {
background-color: blue;
width: 100px;
height: 50px;
margin: 5px;
}
<pAnother example, using flex, with 5 items too</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
If your html structure is static, you can try to look into media queries.
Otherwise, i'm not sure it would be possible in CSS.
Using overflow: hidden on your parent element will not make the last child desappear until it totaly overflow.
Setting the overflow property of the parent container to hidden can do that for you.
So i tried to find a solution myself, but i couldn't find a topic with a solution that worked for me, because i have special prerequisites.
My Problem is the following:
I have a sticky DIV element on the left, put in another DIV Element with a
fixed height, because the sticky effect didn't work without fixed height.
On the right are many elements which are in a DIV Container as well. This
Container gets its height by the number of elements.
The optimal way would be, that the sticky element stops after the DIV Container with all his content elements is done. Yet because i have to set a fixed height for the Container of the sticky element, it keeps on taking its full height as white space before there can be any other content again.
I hope it wasn't explained to bad.
alert("The height is " + $("#ProductContainer").height());
#StickyContainer {
float: left;
height: 4000px;
width: auto;
}
.sidebar {
top: 0px;
float: left;
height: 400px;
width: 200px;
padding-left: 10px;
padding-top: 20px;
border: 2px solid black;
margin: 20px 10px 0px 5px;
position: -webkit-sticky;
position: sticky;
}
.content {
float: left;
width: 200px;
height: 300px;
padding: 10px;
margin-top: 20px;
margin-left: 5px;
border: 2px solid red;
}
#Test {
margin-top: 20px;
width: 100%;
height: 100px;
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="StickyContainer">
<div class="sidebar">
This is the sticky sidebar
</div>
</div>
<div id="ProductContainer">
<div class="content">
One of many boxes
</div>
<div class="content">
Here are 2, but in reality there are more than 10
</div>
</div>
<div style="clear:both" ;></div>
<div id="Test"> Here is the next content </div>
Note: Run in fullscreen, otherwise the #ProductContainer will be under the sidebar anyway.
I took many approaches, one was to take the height of the #ProductContainer with jQuery, then set the result as the new height for the #StickyContainer.
Sadly it returns the height 0.
Didn't get much further because of the result. I tried much more of the stuff i found on StackOverflow, but nothing seemed to work. Not only with JavaScript, but also with HTML since the problem seems to be in the ProductContainer that is not embracing the content properly.
However, even if its just a simple stupid mistake of mine, i am thankful for any sort of help.
the content element hast a float and makes the ProductContainer feels nothing inside.
you have to use a clearfix class on parent.
.clearfix:after {
content: " ";
display: block;
clear: both;
}
cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
and give the class to parent
<div id="ProductContainer" class="clearfix">
I have a container div in which everything is editable
<div data-editable data-name="main-content">
</div>
Which works fine as expected, but inside of that div there are multiple sections which all can be edited as well (due to the parent div having the editable tag) but I want to have a section (a p tag) that isn't editable whilst all the other content in that div is editable.
Apart from removing data-editable from the parent div and adding it to each individual p tag (to which there could be hundreds or even thousands) how do I block just one p tag from being editable?
I would think there is a tag like data-none-editable but I can't find anything in the docs unless I'm missing the obvious.
EDIT:
For clarification the library I'm using (as per the title) is ContentTools which can be found here: http://getcontenttools.com/
You can use this if you still face problem please let me know
.first{
height: 300px;
border:1px solid red;
}
.wrapper{
width: 500px;
height: 300px;
position: relative;
}
.second{
background-color: green;
width:200px;
height: 100px;
left: 0px;
right: 0px;
top: 10px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
<div class="wrapper">
<div contenteditable="true" data-name="main-content" class="first">
</div>
<div contenteditable="false" class="second">
</div>
</div>
http://codepen.io/anon/pen/KwOyQo
Friends, is there any way to make this div scroll even being with the mouse over the boxes??
Html:
<div class="container">
<div class="container-scroll">
<ul class="list">
<li class="list-item one"></li>
<li class="list-item two"></li>
</ul>
</div>
</div>
Css:
.container {
width: 100%;
height: 400px;
border: 1px solid black;
overflow: scroll;
color: white;
}
.container-scroll {
width: 100%;
height: 4000px;
}
.list {
list-style: none;
position: fixed;
}
.list-item {
display: inline-block;
width: 150px;
height: 150px;
}
.list-item.one {
background: pink;
}
.list-item.two{
background: black;
float: right;
}
I was trying to make something with overflow but anything worked..
You've set those elements to position: fixed. This positions the elements relative to the browser, which means they're completely taken out of the flow of their parent. So of course, when you hover over them, the container won't scroll.
You could use pointer-events: none on those boxes, but this isn't supported well across all browsers. Also, it's unclear whether you might actually need pointer events inside those elements in the future.
My advice would be to remove the scrollable div. Ensure that the body/document is the only element that scrolls. That way the content will scroll no matter what element you're currently mousing over.
.list-item {
display: inline-block;
width: 150px;
height: 150px;
pointer-events:none;
}
This will do the trick
EXAMPLE: http://codepen.io/anon/pen/OPKOog
Elements within clickable h2
Introduction
I am creating a one-line menu in html. I have 3 options that work in a really similar way. The problem is that the one that has the html right, looks like it can fail more easily. I put the 3 examples here. I am looking for reliable, browser-compatible menu. The third option uses javascript so I don't really love it.
The menu has to be 100% width, within a gray rectangle and has to have some text at left and some at right. The entire menu has to be clickable with only one hyperlink. This is what I have tried so far:
Implemented examples
A link to see them all working is here (DISCLAIMER: yes, it is my own webpage). If you don't feel like clicking there, here's an image of how they look in the same order as the options:
Option 1.
This one is no html compliant, but I've found is the one more logical, it behaves better in general and it's not likely to give many troubles:
<a href="http://newfutureuniversity.org/test/hblock.php">
<h2 style="width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
Hello world
<span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
</a>
Option 2.
This one is html compliant, but I just hate to center things using pixels. I feel like it will break really easily. Besides, the text in the right is not fully clickable:
<h2 style="border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
<a href="http://newfutureuniversity.org/test/hblock.php" style="width:100%; height:100%; display:block;">
Hello world
</a>
<span style="position: relative; right: 6px; top:-23px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
Option 3.
This one uses javascript. I prefer not to bloat every menu like this one with javascript and to use html/css is available, but this is another option. It doesn't get the color that regular links do.
<h2 onclick="location.href='http://newfutureuniversity.org/test/hblock.php';" style="cursor:pointer; display: block; width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
Hello world
<span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
Question
Which one do is more browser compatible and unlikely to break? Do you have any other recommendation or improvement? Any feedback will be appreciated
PS, all the inline CSS will be put apart in a different css sheet.
I'd suggest that the better approach is to reorganise your HTML, to the following:
<h2>
Hello world<span>Right text</span>
</h2>
And then use the following CSS:
a {
display: block;
padding: 0.2em;
width: 80%;
margin: 0 auto;
border: 1px solid #000;
background-color: #aaa;
}
a span {
color: #000;
float: right;
text-decoration: none;
font-size: 0.8em;
padding-top: 0.2em;
}
JS Fiddle demo.
The validity of this depends on the elements you want to ultimately place within the h2 tag to remain clickable, though. Under HTML5 it's valid to nest block-level elements within an a tag, under HTML4, though, while it still seems to work it's not considered valid, according to the doctype.
But, for the posted requirements this seems to work; albeit it does require the restructuring of your HTML, which may not be possible. However:
it is valid HTML,
it's resistant to breaking (unless the content of the span exceeds a given width,
it doesn't rely on arbitrary px adjustments (albeit it does use padding to vertically centre the resized text within the a),
it doesn't require JavaScript
Edited to amend the CSS a little, to account for the potential for the right-floated text to become large enough to overflow to the next line, by simply adding overflow: hidden to the a element's CSS:
a {
display: block;
padding: 0.2em;
width: 80%;
margin: 0 auto;
border: 1px solid #000;
background-color: #aaa;
overflow: hidden;
}
JS Fiddle demo.
You could also, of course, add a max-width to the span:
a span {
color: #000;
float: right;
text-decoration: none;
font-size: 0.8em;
padding-top: 0.2em;
max-width: 80%;
}
JS Fiddle demo.
I agree with David Thomas on his mark up. Although I would alter the css slightly in order to make it more robust. If you resize your browser so that the right span gets pushed below the left text (make the browser smaller), then you'll see that the clearing properties that I have applied mean the a stays wrapped around the span rather than allowing the span to move outside of the a area.
HTML:
<h2 class="item ">
<a href="#" >Loads of left left Left Text<span>Right Text lots more</span></a>
</h2>
CSS:
.item a {
zoom:1;
border: 1px solid #666;
background: grey;
display: block;
}
.item a:before,
.item a:after {
content:"";
display:table;
}
.item a:after {
clear:both;
}
.item span {
background: green;
float: right;
}
DEMO:
http://jsfiddle.net/Vc3DA/