I'm currently creating a React application with Kotlin and am currently trying to a implement a drag time selector similar to this: https://user-images.githubusercontent.com/35810850/209967764-b715e90e-7da3-4d37-8192-502a035a6cd4.png and thought using the MUI Slider might be the best work around in doing so. I've ran into a couple of blocks and am having difficulty in changing the sliders thumb into a square. Following the documentation, I tried changing the thumb into a square by getting rid of the border-radius:
.MuiSlider-thumb{
width: 50px;
height: 50px;
border-radius: 0%;
}
Unfortunately, nothing changes. In my search for trying to find a solution.
I used these for reference as well, still no good. X X
One thing I do notice though is that:
.MuiSlider-thumb:is(:hover, .Mui-active,) {
height: 20px;
width 30px;
border-radius: 0px;
}
works for me of course only when hovered/active. Also strange that the width and height are different sizes but make a square. If I have 20x20, it comes out as a rectangle instead. If there is a different way of creating the time selector or fixing Slider, please do help!
I tried to give the thumb a border radius of 0 and was expecting a square, not a circle. What resulted was a circle, but a square when hovered.
Related
I've run into an issue when using background-position in a div along with background-size: cover. There seem to be some quirks in the browsers calculations, so I'm looking for a reliable way of doing this.
More detail...
The use case is mostly visual and everything in the interface should scale nicely. In the past I've has good results by either using rem or em units for everything.
At the start or when the screen size changes I'm measuring the available screen space and then set an appropriate font-size on the container. Something like this...
const size = calculateSize();
$("#container").css({fontSize: size + 'px'});
Generally, it works very nicely. Everything scales and positions itself properly - or does it?
I recently added a graphic button - a with a background image.
.button {
background-image: url("img/button.png");
background-size: cover;
width: 10em;
height: 4.5em;
cursor: pointer;
}
.button:hover {
background-position-x: -100%;
}
I did also try background-position-x: -10em, but I prefer the percentage notation as it takes care of itself if I resize the button image.
That's when I started noticing a small, but annoying problem. When I hover over the button, it moves just a little bit. The amount varies depending on how large the available space is. It's usually only a pixel or 2 at the most. It seems equally affected by Chrome, Firefox, and Edge.
It might not seem like much, and maybe I can just accept it as a feature, but I'm wondering if anyone else has experienced this and found a way around it.
One likely solution would be to just use separate images for the different button states, but I prefer keeping the number of images to a minimum.
UPDATE: So, I just tried creating 2 separate images, and then changed the CSS accordingly...
.button {
background-image: url("img/button0.png");
background-size: cover;
width: 10em;
height: 4.5em;
cursor: pointer;
}
.button:hover {
background-image: url("img/button1.png");
/* background-position-x: -100%; */
}
This does make the wobble movement go away, so I'm pretty confident it's some specific issue with how the browser is interpreting background-position-x. Being such a small movement, I suspect it's some sort of rounding error.
Minimal, Reproducible Example:
In an attempt to ensure I wasn't just seeing things, I put together a jsFiddle that illustrates the problem...
https://jsfiddle.net/xtempore/nfLh86sm/8/
I made a simplified version of the button image. It's just black on the left half and very pale grey on the right. Then I put it into 4 different divs each with a different font-size.
When you hover, you should just see the rectangle change from black to grey. And on the 1st and 3rd ones it does. But check out the 2nd and 4th ones! When you hover, there's a sneaky little bit of black appears on the left-hand edge.
The units used are pretty straightforward in this case. The problem seems to appear with odd-numbered pixels. In my case sometimes these font-sizes will also include decimals (e.g. 15.45px).
This problem demonstrates an issue with rendering in the common browsers (Chrome, Firefox, Edge), but I managed to find an alternate method that gives the desired result.
Instead of using...
background-size: cover;
... you can use a percentage, for example ...
background-size: 200%;
If your base image is 2 sprites wide, i.e. contains two images for different states side-by-side, then the specified background-size should be 200%. Similarly, if you have 3 times the size, 300%, and so on.
This gives the desired scaling, even as the div changes size.
You can see that the problem is resolved in the example fiddle by just changing that value from cover to 200%.
With problem: https://jsfiddle.net/xtempore/nfLh86sm/8/
No problem: https://jsfiddle.net/xtempore/2vcg4h1L/
I hope this helps someone else who is getting these weird side-effects.
Some time ago I posted this question trying to understand how could I change the size of a QScrollBar. I was able, at the end, to do what I wanted with the stylesheet code:
setStyleSheet("QScrollBar:vertical { width: 30px; };");
The problem is that, although the width of the scroll bar do change with the code above, the height of the up and down arrow widgets continues to be the same; they don't adjust automatically with the increase in width. So what I get now are two very flat up and down buttons in a large scroll bar.
Unfortunately I wasn't able to even "grasp" the arrow widgets, nor I know what would be the stylesheet code to control just them. The closest I got was from this SO question, but they don't apply to the vertical scroll bar.
So my question is: how can I change the size (particularly the height) of a (vertical) QScrollBar's arrow buttons? (note: no the arrow itself, but the normally square button that contains it)
The Desktop theme specifies the height of these buttons. To have them scaling proportionally you have to remove the styling by setting a background color:
QScrollBar:vertical {
width: 30px;
background: red;
}
I recently read about the "holy grail" design and read implementations for it.
I saw a solution that does something strange on the menus from the sides.
{
margin-bottom: -3200px;
padding-bottom: 32000px;
}
I understand this mechanism causes the menu to be "infinite", I also found out this trick is called bleeding.
I don't understand how it works. Can someone please explain?
EDIT:
both answers were great. Wish I could pick 2. Picked the first one answered. I found another resource that emphasizes on negative margin values which explains bleed as well.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Thanks.
Padding-bottom at that value with stretch the background of the menu down far enough that it will always be seen to take up the whole length of the page. The margin adjustment gives the ability to still position content over this stretched out menu at a position according to the design of your site. Here is an example with the properties adjusted so that you can more easily see what is happening:
http://jsfiddle.net/PVKbp/23/
.two
{
margin-bottom: -3200px;
padding-bottom: 32000px;
margin-left: 100px;
margin-right: 100px;
background-color: #aaaaaa;
}
Bleed in printing is where you create a design purposely extended over the boundaries of the canvas, to ensure that all the page is covered. It basically means that you won't get any dodgy white edges where your design didn't "fit" the document properly:
http://www.duggal.com/connect/wp-content/uploads/2010/08/bleed2.jpg
I suppose the idea of bleed is the same in this instance, whereby you're trying to cover having any potential white spaces by adding padding to the menu
CSS
The only "holy grail" I've heard of in CSS is the 3-column one? If this is the case, I would say that having padding 32000px will be needlessly resource intensive
I've never really created 100% height responsive stuff, so here's a good resource for you: Twitter Bootstrap2 100% height responsive
I am creating a blog, and on the top of the blog is an image of some scene (I used a picture of NYC) with the text of the most recent blog post over top of it. I thought it would be really cool to have the letters have an outline, but can still be transparent so the viewer can still see the image.
I tried text-shadow with a transparent color, but all I got was a black letter (which I didn't expect but makes sense). I ended up using the webkit-text-stroke property, which isn't cross browser at all. I've attached an image of it in both Chrome and Firefox, with a text shadow behind it so you can see how a text shadow appears (kind of) without a color present.
Is there a way to have the desired effect (a border around the text, but no color) in modern browsers? For IE9 and down I'll just use a solid black color so.
This is the code I'm using to get the below effect:
figcaption {
position: absolute;
bottom: 0px;
left: 20px;
font-size: 90px;
color: transparent;
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: #1F1F1F;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);}
Thank you.
A couple of thoughts.
This example isn't exactly what you have described, but the result is good and should work well cross-browser:
http://jsfiddle.net/panchroma/JHvgp/
The key CSS is
h1.figcaption {
color:white;
position: absolute;
bottom: 0px;
left: 20px;
font-size: 90px;
opacity: 0.35;
filter: alpha(opacity=35);
text-shadow: 2px 2px 2px #000;
}
Alternatively, maybe it's possible to do something with with sIFR ... not sure about this though.
Good luck!
EDIT
Good suggestion from Adrien Be below -- with improved cross-browser transparency code:
http://css-tricks.com/snippets/css/cross-browser-opacity/
[I have no real ready-to-use solution here; but my thoughts on this are getting too long for a comment, so excuse me for putting this here.]
Cross-browser that’s kinda hard to achieve. I’ve looked into ways to get this kind of effect as well (and wasn’t satisfied with having it work webkit-only), and I came up with stuff like using dynamically created Canvas or SVG images that I draw the text on and then manipulating alpha values (canvas) or applying mask/filter effects (SVG).
But it’s a bit of a challenge to get the font rendering/positioning exactly right, and when text has to flow over multiple lines it gets even more complex. Best way I found for that is to split up the text into multiple span elements, one for each word; and then I place a Canvas or SVG image containing just that word as a background image for the span element. Big advantage here: The browser still takes care of text flow, like where to break text into a new line etc., because that’s a bit of a hassle to implement yourself in Canvas or SVG. And text flow also automatically adapts if the area the text gets displayed in changes size (f.e. user resizing browser window). What needs a little extra care is handling text resizing after the effect is applied – when user changes font size in their browser, the text I painted on my image might not fit any more – although using SVG and relative units that can be handled quite automatically as well. The other workarounds are either using background-size to scale the background image to the size of the span containing the word, or somehow capture that resize-“event” and re-draw images dynamically.
Using background images has the advantage that I can still keep the original HTML text in place – just setting it to transparent, so that when the user f.e. starts selecting text on the page it will still show up as actual text and is copy&paste-able.
But for a small effect like this it’s quite a lot of work … so I decided in the end to give up on that, and postponed using “transparent letters” until browser support for easier solutions like the webkit one you mentioned gets wider.
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.