I have two identical cards with a defined height.
The first card (example #1) when it doesn't have enough content, behaves as I want (pushes the footer down), no problem here.
I have a problem with the second card:
When there is a lot of content I must scroll, but this scroll should not be controlled by the main ".content" element, it must be the ".contentExt" class that decides this functionality.
If you add the line to
.card .content {
padding: 10px;
flex: 1 1 car;
overflow: auto; /* This line*/
}
This line does what is required, but it is not the right place, I have to do it in ".contentExt".
You can think of something like inheriting height from parent to child. or something like cards within cards, but for each one its maximum height will be that of the previous parent.
I've searched a lot of information and I can't find the solution.
Code in jsfiddle
Add overflow:auto to .card, elements must have a defined height for horizontal scroll to work
Edit: to add overflow to.contentExt
Just add height: 100%; to .card .content
Related
I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH
in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>
Assuming I have 2 elements on a responsive design like this:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
both of them with style contains:
width: auto;
display: inline-block;
float: left;
And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.
So, I'm wondering, how can I check if they are on the same line with JavaScript?
Thank you
"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs
ADDITION after EDIT OF QUESTION:
width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:
#container {
display: table;
}
.first, .second {
display: table-cell;
width: 50%;
}
Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.
You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.
There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/
Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.
Good evening gentlemen (and of course ladies),
I'm currently experiencing some problems with CSS and the dynamic positioning of some elements in one big container. And I hoped that anyone of you could probably know the solution for my problem.
Maybe I just start with the explanation, which I will split in three parts to make it easier to understand. In the end of this post, there are two links, one for the steps to visualize them and one for the example jsfiddle for step two.
Step one:
There is one div.container which has the height 255px and a dynamic width of 33.3%. This container contains two divs: div.left and div.right. The div.left has exactly 150px width, which should bring the div.right to fill up the whole remaining space.
I already tried to solve it this way, which works, but not for the next steps.
.left {
float: left;
width: 150px;
}
.right {
overflow: hidden;
}
Step two: Now, there should be three different elements in the div.right, a h3, span and p element. The h3 and span should just behave like a regular element, and use the space they want to use (like for displaying text). But the p element should take the whole remaining height of the div.right. I achieved this single step by using the code in the jsfiddle link in the end of this post. And it looks really cool, but it's not compatible with the next step. As you maybe already guessed it.
Step three:
As the p.description element contains a description, I want to put as much information into this small element as possible. Therefor, I hoped to use overflow:hidden in combination with text-overflow:ellipsis, but this didn't work. Due to some strange reason, the p.description element was placed right of the h3 and span elements after I added the overflow:hidden style.
And additionally, there is an extra div in the footer of the div.right, which is div.btns. This div contains about 3 plain links and is placed absolutely in the right bottom of div.right, and I only want to have the p.description element to wrap the text around it.
Right now, I doubt, that all of these steps are solvable by only using css. At least, I wanted to have the positioning of the elements with css and the truncating of the text could be done in Javascript.
Is there anybody out there, who has an idea, how I could solve my problem?
Many thanks in advance!
Attachments:
All three steps in one picture: http://cl.ly/image/2t2a3o3o2l0s/steps.png
JsFiddle for step two: http://jsfiddle.net/S8g4E/1188/
Check this Jsfiddle: http://jsfiddle.net/Mohamed_nabil/7btp2/
In css: the max-height of the ellipsis in lines(52 & 61) are now 200px,
this can be changed with jQuery if you want to, on window resize or load.
max-height: 200px; /*This value could be changed with jquery*/
plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.
I need to create a sort of cart, where I store elements created by the user.
I've created a simple scheme to help you understand my needs:
.buttons are two div containing an image (an arrow), where I'll bind an onclick event to scroll elements (#scroller). The layout has fixed sizes, thus the exact length of ul#scroller (the element that will contain items and that needs to be scrolled) is 900px.
I think the size of any #scroller child <li> will be ~100px.
There's a button (not present in the scheme) that allows the user to store in #scroller an item.
Actually when there are too many items the next will go on the bottom (beginning a new line). Instead I'd like that the new elements go ahead on the same line, but hidden (without hit #button_right).
I was thinking to do this with javascript, storing elements in an array, and keeping visible only the first 9 (x 100px), then by clicking on the arrow (let's say, the right one) hide the first item and show the 10th.
Do you think this is a good solution?
If not, what do you suggest? What CSS rules could help me to do it?
Thanks in advance.
you need to create an extra div with a very long width, and put it inside #scroller and make #scroller have an overflow: hidden so it doesn't show the scrollbar.
like this:
html:
<div id="scroller">
<div id="inner">
(your items)
</div>
</div>
css:
#scroller {
width: 900px;
overflow: hidden;
}
#inner {
width: 90000px;
}
P.S. now the items won't go to another line but you need to code the buttons so they scroll the content depending on the number of items, depending on their width behing the same it can be more simple or not.