After tinkering a bit, I've ran into a small visual snag. For some reason, my css gradient isn't coloring correctly around border radius's as you can see by looking # My Fiddle Here
If you comment out just the gradient part of the css, all pixels are colored as they should be. Anyone know a quick fix for this, or able to spot what I did wrong?
I figured it out. I had to simply add the base background color after each gradient statement:
background: background: linear-gradient(to bottom, #900000 0%,#880000 40%,#790000 60%,#710000 100%), #710000;
Related
I am developing one website using Django. The website link is,
http://flooroof.com/listings/
You can see that the tiles on the website has got overlap on each other. This happened after I implemented infinite scroll. I found it at below link,
https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
If you scroll down you will see more and more properties are getting loaded. At a time I am loading 20 listings. But not sure what has gone wrong.
I know there is something wrong with CSS but I am not sure what it is.
Please guide.
Yes as I can see the CSS has issue especially in .grid-item present on after first .infinite-item. I .grid-item has absolute position and only first .infinite-item's .grid-item has proper left and top values. If you want a quick solution then you can do this.
a.grid-item
{
left: auto !important;
top: auto !important;
position: relative !important;
}
One more issue is with image size. your images size are very different from each other so best solution is to use a blank 1px trasparent image with fixed height and show current images as background image.
I created a simple 10x10 black box and added it to a QToolButton as follows:
QIcon minIcon;
minIcon.addFile("c:/tmp/black10x10.png");
minButton = new QToolButton;
minButton->setIcon(minIcon);
However, it appears on screen shifted left (image enlarged for convenience):
Some squinting in Gimp told me that grey area to the left is 56 pixels zoomed and grey area to the right is 68. This misalignment is very noticeable even without zoom - that was how I spotted it in the first place. So, how do I center this icon?
P.S. Tried using a QPushButton without text. Same effect.
It's probably a bit late now, but I stumbled across the same issue and found the following code snippet in QTs qstylesheet.cpp
case CT_ToolButton:
if (rule.hasBox() || !rule.hasNativeBorder() || !rule.baseStyleCanDraw())
sz += QSize(3, 3); // ### broken QToolButton
This would increase your even sized icon to be odd sized and therefor not centered. I'm not sure why there's an addition of 3 but the comment suggest it's a fix for something...
Unfortunately this doesn't fix the issue, it just kind of explains the source of it. But it might help someone to find a better solution than "make all your icons odd sized".
I'm trying to make a Famo.us game where I have a background Image ( an ImageSurface ) and then I put a bunch of other ImageSurfaces over the top and animate them. However the background surface doesn't stay in the background, for starters new ImageSurfaces are drawn underneath, then weirdly they start getting drawn on top. Exact same code generating the surfaces.
the background image has a Transform.behind applied to it.
The image below kind of shows the problem, some of the small squares are behind, and some are on top.
If it makes any difference, the surfaces are all in a HeaderFooterLayout
Any ideas whats going wrong? or how I could debug this?
check the zIndex value of the surfaces isn't the same as the zIndex of the white surface you're attempting to hide them behind. If they are the same (or unspecified) the browser hazards a guess, and you end up with z-fighting where the GPU can't actually decide what to render (the white surface or the tabs?) You could have your tabs resting on one zIndex value, and the white surface on the other.
(The following is written by Keith) For anyone else, what I did was add the following to the ImageSurface
properties: {
zIndex: -1000000
}
Oddly I tried with a zIndex of -10 etc, which didn't work, only once I made that zIndex huge did it seem to fall behind everything else.
I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}
I would like to make a box-shadow appear darker on one side than another.
I would like to do something like the following:
box-shadow: 2px 3px 6px linear-gradient(90deg, #ccc, #fff);
Is this possible?
Firefox, at least, won't let you do this. Firefox only supports linear-gradient in a background-image style.
Even for browsers that may allow gradients in more places than Firefox does, they probably wouldn't allow this particular usage. In general, the gradient properties are only meant to work in places in CSS where images are allowed, not to replace "normal" colors.
You could do something sneaky like making a gradient the background-image of an element that's behind the one you're setting this box-shadow on, which you could use make it appear like the shadow is darker on one side. That's going to be quite a bit more complicated in terms of markup and styling, though.