I have a design with 3 (css grid) columns. The second column has nested grid content that needs to vertically scroll, while the other two columns stay their respective height. I gave the second nested column an overflow, but I also need to give it a top and bottom padding or margin. My solution works without the top/bottom padding, but when I add it, it forces a scroll of the general screen, and thus the other columns.
Here is the Fiddle: https://jsfiddle.net/n2fole00/cger28v4/
Here is the part of the code that uses the scroll and padding.
.section-column-grid-container {
display: grid;
align-content: start;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-gap: 35px;
background-color: grey;
height: 100vh;
padding: 35px;
overflow-y: scroll;
}
.section-column-grid-container > div {
background-color: pink;
text-align: center;
padding: 0;
font-size: 18px;
height:100px;
}
How can I fix this? Thanks.
I have made some changes to your code and here is the updated fiddle:
Updated fiddle link
Please check and confirm if this is what you are looking for:
Main change I made is:
.main-grid-container {
overflow: hidden;
}
Related
I'm trying to make a sticky navbar. So i'm adding the position: fixed; and width: 100%. It's working but scrollbar looks bad. This is the code;
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 14px 24px;
position: fixed;
top: 0;
When i'm adding width: 100% and position: fixed; scrollbar section is breaks up like this;
Look like this
Should look like this
How can i solve this?
That's really simple. The answer is: it's the padding. as you might know by now, padding is some pixels that get added to an element after its normal dimensions and before the border. For example:
So when you set width to 100% the padding overflows your page. You need to set your width to 100% - (padding * 2). Padding is *2 because there is one in the left and one in the right. This can be acheived with the calc() function of CSS.
.yournavbar{
/*Style here*/
padding: 8px; /*Set this to anything*/
width: calc(100% - calc(8px * 2)); /*You have to set 8 px to your padding*/
}
Example image:
Did this solve your error? Do you want more information (for margin and border)? Comment me.
Its looks like your padding is pushing your content way after the 100% size. Try using box-sizing: border-box; and check out this documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I made this set of buttons for a tic tac toe game to practice React. I want all the boxes to make up a square. However, when text is added, the size of the box changes.
While I am at it, how do I get the font size to fill up a certain percentage of the box? Like 80%.
My CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
min-height: 200px;
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.cell {
font-size: 2rem;
box-sizing: border-box;
}
.cell:nth-child(3n) {
}
#playGrid {
width: 40vw;
height: 30vw;
}
If this is a button element and not an anchor styled to look like a button, simply specifying a fixed width and height would solve the problem.
If it is an anchor tag styled to look like a button then you'll have to set its display property to inline-block first
You can also use:
min-width: 50px;
min-height: 50px;
Keep in mind that if you have a lot of content the text will overflow but in your case, it's only going to be one letter (either X or O)
What you have to do is assign a fixed value to the width and height of your buttons, for example in the case that .cell is the class for your tik-tak-toe button game you could do:
.cell {
font-size: 2rem;
box-sizing: border-box;
/* add this */
width: 50px; /* this could be any value that you want */
height: 50px; /* the same value */
}
I am centering a group of images using:
DIV Containter: text-align: center;
DIV Image: display: inline-block. (No Float)
It works perfectly, but the very last row which is 1 or 2 pixel shifted on the right, not matter how many rows there are (different resolution).
I can't make it work. See pages:
https://www.trampolineandparts.co.uk
https://www.trampolineandparts.co.uk/replacement-parts
Please help. Thank you!
As #Mary pointed out, it's the space between elements. You can just use display: flex on the parent instead, and that will maintain the layout and fix the spacing issue.
div.imgcnt {
/* text-align: center; */ /* no longer need this */
display: flex;
flex-wrap: wrap;
justify-content: center; /* if you want the `.img` elements centered on the page */
}
Try not leaving any space between your <div> and it should fix your issue.
Hi i took look at the website and noticed the 1 / 2 px displacement. It comes because of the display:inline-block. I tried fixing it. I would use float:left on the images rather than using inline-block. Try changing your css files to this.
div.imgcnt {
text-align: center;
padding-left: 6%;
}
div.img {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
width: 160px;
border: rgba(0, 0, 0, 0.17);
border-style: solid;
border-width: 1px;
float: left;
}
You have whitespace between your inline-block elements for sure. Check if this will kill the unwanted space:
<div class="inline-block"></div><div class="inline-block"></div><div class="inline-block"></div>
What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?
.elementsRequiredOnSameLine {
background: none repeat scroll 0 0 white;
display: inline-block;
float: left;
height: 10em;
text-align: center;
width: 6em;
}
.parent{
display: inline-block;
margin: 10px auto;
min-height: 12em;
overflow-x: scroll;
padding: 10px;
white-space: nowrap;
width: 95%;
}
Using float: left on the elements will cause them to ignore the nowrap rule. Since you are already using display: inline-block, you don't need to float the elements to have them display side-by-side. Just remove float: left
Was because of the float:left;, once i removed that, fine. Spotted it after typing out question sorry.
I'm working on a product catalog page, and the group of images needs to be centered but I have yet to find a way to do so, since they're all floated in a div that's a 100% in width.
I'm looking for a way to center those images horizontally without losing the flexibility of their floating properties.
Here's a link to the catalog on the website: http://internetvolk.de/katalog/
try using display: inline-block; istead of floating and add text-align: center to their parent container)
Augment with the following rules:
#katalog {
text-align: center;
}
and
.imageLink {
/** float: left; <-- REMOVE! */
display: inline-block;
}
if you give #katalog a width - calculate this from the number of images and their margins. e.g.
#katalog{
width: 960px; /*just an example*/
margin: 0 auto;
}
#katalog {
margin: 10px auto 0;
overflow-y: hidden;
max-width: 940px;
min-width: 810px;
}
Use max-height and min-height to keep flexibility, I'm defining a max-width to keep it centered in all screens by adding margin: 0 auto;