I am making a grid in nextjs and css but whenever I apply the
display: grid;
in css, the items go beyond the container even though I'd have specified the maximum width. So the items do not flow over to the following row but instead just keep going further right until they exit the screen. This is how my code looks like on the nextjs playground https://codedamn.com/playground/hNlUte0UawOjB4IbKuC02.
Try this:
Your .cardContainer Element should have a grid-template-columns: repeat(6, 2fr); because you have only 6 Cards.
Remove width: 300px; from your .card Elements. They are grid Element and they in this case, you wont need a fix width for them.
Remove max-width from the Home_cardContainer__frLxE because you have set max-width for the parent (Home_siteContainer__TSQhQ) already.
Related
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
I am trying to align/stack 3 items to the bottom of a display:flex div. The only way I could manage it is by adding a 4th div on top & use javascript/jquery to adjust its height dynamically essentially to push those 3 items to the bottom.
Is there a pure CSS3 way to do this without resorting to javascript/jquery? Thanks
Here is fiddle. The 3 divs I want aligned/stacked to the bottom are .searchForm, .tweetForm and .myMsg. I'm currently resorting to putting a .fudgeBox on top to push them down to the bottom.
Add this:
.searchForm { margin-top: auto; }
You can scrap the spacer div and all the JS.
An alternative would be justify-content: flex-end on the flex container (.sideRight).
auto margins demo
justify-content demo
Learn more about justify-content and auto margins here: Methods for Aligning Flex Items
In your .sideRight css use justify-content instead of align-items. When you use flex-direction: column the flow direction changes to vertical so the usage of justify-... and align-... basically switch.
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.
It is quite easy to make two div overlap when the size of the container div is known but what if the div heigh cannot ?
I tried to do it without manipulating container height:
http://jsfiddle.net/AJfAV/
But #text2 go over #text3 and do not "push" it.
How can the #container be resized automatically ?
I manage to achieve my goal using jquery ui but I feel this is not an elegant solution:
http://jsfiddle.net/AJfAV/6/
Is this what you need?
Updated fiddle:
I'm setting height to the default, auto, using jQuery, like this:
$("#container").css("height", "auto");
You can also set: height: auto; in CSS.
Do you need position:absolute? You can use absolute positioning if you don't want to do any arrangement, but a placement. The absolute positioning takes an element completely out of the flow of elements. They know nothing of its existent.
You may use floats and a technique to enclose floats. I'm using clear:
.cl-left {
clear: left;
height: .1px;
font-size: 0;
line-height: 0;
}
Don't forget to add <div class="cl-left"> </div>.
In addition, a negative margin is used. Therefore, #text2 is nailed to the right.
http://jsfiddle.net/AJfAV/7/
this can be solved if you removed absolute positioning of #text1 and #text2.
and make #text2 overlap #text1 by making both float:left and set margin-left:-30px for #text2.
now let's test it: http://jsfiddle.net/RPe4H/
the problem now is that when #text1 is toggled, #text2 will float to top left of #container, this happening because JQuery set display:none on the element when toggling is done.
now to solve this, put #text1 and #text2 inside containers with same width, so #text doesn't affect the flow when it is set to display:none, also you must set min-height:1px on the container of #text1.
now it is working as expected http://jsfiddle.net/MyyF6/1/
I have very simple example of an un-ordered list with a black border, and one of its child elements hidden: http://jsfiddle.net/spryno724/Sm9Lx/1/. Notice how the hidden child element is considerably wider than the visible element, but the container only scales to the width of the visible child.
Is there a way within CSS to automatically scale the width of this container to the width of its widest child element, even if that element is hidden?
I know that this is possible with JavaScript, but I would like to avoid a scripting hack and go straight CSS, if possible.
Also, I'd like to avoid setting a specific width because in my actual application, my container will contain visual objects of unknown widths.
Thank you for your time.
use visibility: hidden; rather than display: none; on the hidden li
visibility: hidden; retains the elements space
display: none; acts as if the element doesnt exist in the markup
How about:
<li style="visibility: hidden; height: 0;">This is not the first list element, ok?</li>
Instead of display: none you can use opacity: 0