I have some modules on my project that are generated dynamically. This basic HTML will work fine as an example of what I want to achieve:
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
My problem is that I don't want this module to ever grow too much vertically, if the web administrator writes a long "description" (I can't limit how much he wants to write as the "description" text will show on other pages).
I found a nice CSS trick to add "ellipsis" to a multiple lines container. Here you can see this "trick" in the .ellipsis (plus the basic CSS):
.container {
background-color: #eee;
width:100px;
margin:20px;
float:left;
}
.image {
border:2px solid #999;
width:100px;
height:60px;
background-color: #fff;
margin-bottom:10px;
}
.end {
border:2px solid #999;
width:100px;
background-color: #fff;
}
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom:10px;
position:relative;
}
.ellipsis:before {
content:"";
float: left;
height:100%;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 20px; margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color:#eee;
}
You can see everything together here: JSFIDDLE
The problem I have is that while ellipsis works fine, I don't want ALL the modules to have a fixed height. I just want to limit the max-height to a fixed size. (Just delete "height: 200px;" from ".ellipsis:before" to see what I want to achieve.)
So, the problem is the .ellipsis:before fixed height. 100% height won't work unless I turn the position to absolute, but then the "ellipsis" trick won't work as the float won't take effect.
Any help with my problem will be greatly appreciated. I don't think there may be a pure CSS solution, (trust me, I have tried) and I'm very bad a JavaScript/jQuery. However, if you have a jQuery solution that may help, I could implement it in the project (and give you nice rep points here :) ). I was thinking something like:
If div.ellipsis > 200px then add height:200px to ellipsis:before
Thanks a lot in advance and please excuse my poor English. Hope the question is clear enough.
There is no need of :before pseudo class. Check this fiddle.
.ellipsis:after {
content:"\02026";
position: absolute; /* removed position: relative */
top: 200px; /* equal to max-height value */
right: 0px;
margin-top: -25px; /* equal to line-height value */
/* other styles */ /* removed float property */
}
Working Fiddle
In the above fiddle, I removed :before pseudo class and set the position of the :after pseudo class to top by 200px which is equal to the given max-height value of the .ellipsis.
and to remove the default upper and lower gaps of the container, I added margin-top: -25px which is equal to the given line-height.
Note: You can apply just top: 175px which is result value of subtraction of given max-height and line-height values.
Here's a simple jQuery solution.
First add a class for when an ellipsis reaches the maximum height, let's call it maxed. Set the :before height for that to 200px:
.ellipsis.maxed:before {
height:200px;
}
Then as you say. you can do some simple jQuery to check the height. If it is the maximum, then add our maxed class to the ellipsis:
$(function() {
$('.container .ellipsis').each(function() {
var $this = $(this);
if($this.height() >= 200) {
$this.addClass('maxed');
}
});
});
Updated fiddle here
You can do it easily with jquery (I assume jquery is an available option in your project).
You just have to
Remove all "ellipsis" class from HTML
Add "ellipsis" whenever needed with JS (= when your content exceeds 200px).
For that, you can use the following :
$('.description').each(function(){
if($(this).height() >= 200 ){
$(this).parent().addClass('ellipsis');
}
});
Working JSfiddle
You can't directly manipulate pseudo elements like :before. What you could do here is add a class for large ellipsis with height: 200px. Then use jQuery to add the new class according to the height.
$(function() {
$('div.ellipsis').each(function (index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
See the code snippet for the full example:
$(function() {
$('div.ellipsis').each(function(index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
.container {
background-color: #eee;
width: 100px;
margin: 20px;
float: left;
}
.image {
border: 2px solid #999;
width: 100px;
height: 60px;
background-color: #fff;
margin-bottom: 10px;
}
.end {
border: 2px solid #999;
width: 100px;
background-color: #fff;
}
/* ellipsis class for small modules */
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom: 10px;
position: relative;
}
.ellipsis:before {
content: "";
float: left;
height: 100%;
width: 5px;
/* height: 200px; */
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 20px;
margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color: #eee;
}
/* ellipsis class for large modules */
.ellipsis-large:before {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class="ellipsis">
<div class="description">and here we have a much longer text to reach the 200px "ellipsis" div to activate the effect made with pure css. a nice discovery from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
</div>
</div>
<div class="end">
buttom
</div>
</div>
Related
I am bit troubled in aligning the content as shown in the image. Along with that I need to redirect to page 1 by clicking on content section and redirect to page 2 by clicking the icon separately. How can I solve it using javascript?
These things can be achieved without the use of JavaScript besides the point that it's generally bad practice to manipulate DOM with JavaScript as much can be done with css rules, animations, basic html.
To align the icon first you should try these css rules applied on icon element:
.your-icon {
top: 0;
right: 0;
}
Assuming your icon in html is declared like this:
<img src="foo.img" class="your-icon">
Although it depends on current rules applied (e.g. you should use other rule set if flex is enabled on parent element). Perhaps spacing with fixed values between content section is involved that is pushing the icon out of the way (padding, margin rules applied?).
As for navigation html href is good enough
.a {
/* width:400px; */
height: 300px;
border: 1px solid;
}
.b {
width: 100%;
float: left;
/* border:1px solid red; */
}
.c {
width: 70%;
/* border:1px solid; */
float: left;
/* display:flex; */
float: left;
}
.c div{padding: 5px;}
.d {
border: 1px solid;
}
.box {
width: 29%;
float: left;
border: 1px solid;
height: 100%;
}
.rTable {
display: block;
width: 100%;
}
.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
clear: both;
}
.rTableHead,
.rTableFoot {
/* background-color: #DDD; */
font-weight: bold;
}
.rTableCell,
.rTableHead {
/* border: 1px solid #999999; */
float: left;
height: 17px;
overflow: hidden;
padding: 5px;
width: 20%;
}
.rTable:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class='a'>
<div class='b'>
<div class='c'>
<div>Name</div>
<div>Address</div>
<div>PIN</div>
</div>
<div class='box'>ICON</div>
</div>
<div class='d'>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Time</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Duration</span></div>
<div class="rTableHead"><strong>Amount</strong></div>
<div class="rTableHead"><strong>Position</strong></div>
</div>
<div class="rTableRow">
<div class="rTableCell">5</div>
<div class="rTableCell">2</div>
<div class="rTableCell">3</div>
<div class="rTableCell">4</div>
</div>
</div>
</div>
</div>
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 am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}
There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.
Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');
Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});
Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.
I would like to type text in a contenteditable div that is placed right to an image.
HTML
<div class="container">
<div class="image">
<img src="/path/*.jpg" alt="" />
</div>
<div class="text" contenteditable>
<p></p>
</div>
<div class="clear"></div>
CSS
.container {
width: 1000px;
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
border: 1px solid #000;
}
.clear{
clear: both;
}
My goal is to have the caret positioned to the right of the image when I focus into the contenteditable and not to the beginning of the p tag as you can see in this Fiddle.
One solution was to insert a in the <p>, as showed in this other Fiddle, but this is not a very clean solution: it pollutes the text that is written inside.
I can take advantage of JavaScript and jQuery, but a pure HTML and CSS solution is preferred
Any thought?
UPDATE
I forgot to say that the text should go also under the image so it cannot be floated or hidden
Simply try margin-left:500px;
.text {
min-height: 30px;
border: 1px solid #000;
margin-left:500px;
}
You have to remove div's and apply to image these css-styles:
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
*zoom: 1;
*display: inline;
with
vertical-align: bottom;
Add overflow:hidden into an element that should not overlay a floating element:
http://jsfiddle.net/nothrem/0mdcLzqs/3/
<div class="container">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?fit=crop&fm=jpg&q=75&w=1050" alt="" />
</div>
<div class="text" contenteditable style="overflow:hidden">
<p></p>
</div>
<div class="clear"></div>
</div>
UPDATE: you can use Javascript to change the overflow based on element's content
document.getElementsByClassName('text')[0].onblur = function() {
if (this.innerHTML.replace(/<[^>]+>/, '')) { //remove HTML tags
this.style.overflow = 'visible';
} else {
this.style.overflow = 'hidden';
}
}
Blur fires after you finish editing, you may want to add another events, e.g. onkeyup, onmouseclick, etc.
I am not a big fan of floats unless necessary, I'd remove the float: left from the image CSS and add to the .image, .text one these two lines:
display: inline-block;
vertical-align: top;
To get text under your image
Set the container width to the width of your image, and set the position of your text with float left or right like this:
.container {
width: 500px; // width of image
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
width:100%;
border-top: 1px solid #000;
float:left;
text-align:center;
}
.clear{
clear: both;
}
Here is a demo
Having trouble extending the left and right divs to the bottom of the page, no more no less.
Here's my work.
http://jsfiddle.net/qggFz/26/
Thanks,
Dale
Here is your js solution, sir:
//Can place js in <head> tag
$(document).ready(function(){
var remHeight = $('html').height() - $('#top').height();
$('#left').css('height', remHeight);
$('#right').css('height', remHeight);
});
css:
body, html
{
height: 100%;
}
.top {
background: red;
}
.left {
width: 25%;
background: grey;
float: left;
}
.right {
width: 25%;
background: blue;
float: left;
}
html:
<html>
<body>
<div id="top" class="top">
<div id="msg">hello</div>
</div>
<div id="left" class="left">
left
</div>
<div id="right" class="right">
right
</div>
</body>
</html>
http://jsfiddle.net/zTEhB/
Check: http://jsfiddle.net/5gqNn/
You need to specify the height of the root element.
Reference:
https://developer.mozilla.org/en/CSS/height
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
You have to say that the body and html tags are also 100% like this:
html, body{
height:100%;
position: relative;}
.top {
background: red;
}
.left {
position: relative;
width: 25%;
height: 100%;
background: grey;
float: left;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%;
}
.right {
position: relative;
width: 25%;
height: 100%;
background: blue;
float: left;
}