I want to create a grid which will contain action buttons. The final layout should be something like this:
| 5 | 3 | 1 |
| 4 | 2 |
I'm discovering this but, let apart the fact that it starts from the right, I thought that the code should be as simple as this:
display: grid;
grid-template-rows: 30px 30px;
grid-auto-columns: 30px;
So we say we have 2 rows of 30px height, and that the auto-added colums will be 30px width. But actually that doesn't render as expected at all:
https://codepen.io/Flaburgan/pen/NWXggyd
What am I misunderstanding?
So, I finally found how to control that, the property I was looking for is grid-auto-flow: column dense;
Related
I am currently working to replicate a design and I am using css grid for the layout.
I applied the css gap attribute and gutters were created between the rows and columns. However, a gutter was created outside the last row and I have been battling to fix it. from what I know about grid gap and also from css Tricks,the gutters are only created between the columns/rows, not on the outer edges.
Following is a screenshot of how it looks like after my implementation current look You can notice the gutter at the bottom of the last row on the right. I do not want the gutter there, I just want the row to take up the space at the bottom. This is the code for the grid container.
.App {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 25px;
width: 70%;
height: 55%;
background-color: var(--pry-blue);
}
I want to make the pictures of the product smaller. I also want to add another product per each row so it is 4 products instead of 3 products per row.
My Website:
http://www.notsomefantasy.com/
You can set 4 products per row on the desktop view for this particular theme by adding the following piece of code to the bottom of Customize Design > Advanced > CSS:
#media screen and (min-width: 1025px) {
.product-card {
width: 25%;
}
.product-link .product-image {
height: 50%;
}
}
Say I have three columns:
Col 1 | Col 2 | Col 3
And I would like, when the screen size changes to "small", the columns to change to this:
Col 1 | Col 3
Col 2 (in it's own full-size row)
Basically, Col 3 would go onto it's own row. Now, I know I can do this with the "visiblity" classes Foundation provides, but then you'd have to duplicate the Col 2 content twice, as far as I understand it. I'd like to avoid this if possible.
Any ideas? Or am I crazy that Foundation doesn't easily allow for this? Or maybe I should just hack it together by making Col 2 positive: absolute or something and call it a day?
You're looking for something called Source Ordering. (It's towards the bottom of that docs page.)
Order your html so that the columns are defined in the order 1,3,2. Then, use the push/pull classes to swap the positions of columns 3 and 2 for when they are all in the same row.
<div class="small-6 medium-4 columns">
... Column 1 Content ...
</div>
<div class="small-6 medium-4 columns medium-push-4">
... Column 3 Content ...
</div>
<div class="small-12 medium-4 columns medium-pull-4">
... Column 2 Content ...
</div>
I need to create a custom push button which will have 3 different background images corresponding to the following states:
normal
mouse over
mouse down
I would like to have a QHBoxLayout with 3 parts for left side, right side and middle side (stretching side) for the button.
Inside the middle size, I would like to have a label to show the text.
I need this button to have a "clicked" event as well.
I have been doing a lot of search to achieve this but I am really lost. I tried many things including custom widget from QWidget or styling QPushButton with stylesheets but I failed to achieve having 3 images for 3 mouse states and the clicked event.
I am looking for help.
You can use the border-image property, by composing a single image for each state like this:
| |
Left Image | Middle Image | Right Image
| |
then by specifying the left and right image sizes as the border slice sizes and in the border widths of the stylesheet. For example, if the right images were 25 pixel wide and the left ones 20, you would have:
QPushButton {
border-image: url(:/normal.png) 0 25 0 20 stretch stretch;
border-width:0 25 0 20; /* without it, only the middle images would show */
}
QPushButton:hover {
border-image: url(:/hover.png) 0 25 0 20 stretch stretch;
}
QPushButton:pressed {
border-image: url(:/pressed.png) 0 25 0 20 stretch stretch;
}
The values represent the distance between the top, right, bottom and left sides of the image.
well,first,you should have 3 picture for 3 states,and then you can use function setStyleSheet .
QPushButton *btn = new QPushButton;
btn->setStyleSheet("QPushButton{background:url(:/Resources/pause_nor.png);border:0px;}"
"QPushButton:hover{background:url(:/Resources/pause_over.png);border:0px}"
"QPushButton:pressed{background:url(:/Resources/pause_over.png); position: relative;top: 1px; left: 1px;}");
I'm trying to achieve a 5px gradient around all edges. I've found multiple ways to do this in all browsers except for IE (-mos-border-colors and apply 5 separate colors, border-image, etc...).
I've tried CSS3 Pie, but can't seem to get it to function at all in IE (any version). There are multiple sizes for this column, so images would be a hassle.
Any one have any solutions for this?
.col {
border: 5px solid;
-moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
-webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
behavior: url(/htc/Support/assets/css/PIE.htc);
}
Maybe box-shadow is an option for you, enabling monochrome gradients/shades…
header {
box-shadow: 0 1em 2em #fff;
-webkit-box-shadow: 0 1em 2em #fff;
-moz-box-shadow: 0 1em 2em #fff; }
Does it really need to look identical in every browser?
Some cross browser solutions: http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
I've tried CSS3 Pie, but can't seem to get it to function at all in IE
(any version).
CSS3-Pie is a bit tricky. Try adding position:relative; to the element you want to apply border image to.
csspie cannot resolve relative paths from your stylesheet to your images. If you do not specify absolute paths from document root to your images, css pie cannot find them.
See this issue here:
http://css3pie.com/documentation/known-issues/#relative-paths