I have a situation here where i have a radio button which i customized for the styling, then when by accident i zoom out to 90% i saw that the radio button and it inner circle style look odd. look at below example(i created similar situation) on 90% on chrome the inner circle looks a little bit on bottom left (not exactly in the middle)
.radiobutton {
width: 20px;
height: 20px;
margin-right: 5px;
border: 2px solid #40a9c7;
border-radius: 12px;
background-color: white;
position: relative;
vertical-align: middle;
}
.checked{
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 12px;
margin: 4px;
border-width: 0;
border-radius: 6px;
background-color: #40a9c7;
}
<div class="radiobutton">
<div class="checked"></div>
</div>
I don't have any idea what might be the cause here, does it lost precision or something? any help or direction or workaround would be appreciated
Related
I've never had this problem before, but for some reason, my 'overflow: auto' tags are not working correctly. They show scrollbars, but I can't actually scroll the scrollbars. The scrollbar appears if a section is larger than the height of the container, as it should, but the actual scrolling capability is defunct. It's as if the scrollbar is simply frozen and won't move. I've searched across the internet for why this may be happening, and couldn't find an appropriate solution. I also tried removing the 'overflow: hidden' from my parent element, thinking that it may somehow be affecting the entire code, but removing that elicited no effect whatsoever. I've also double-checked that everything has a width and height, since I know that missing those can adversely affect an overflow. I also checked the positioning of each item. (And I also know it isn't just my mouse messing up because scrolling on other sites/pages is perfectly fine)
I'm frustrated and entirely at a loss at this point, so I'm hoping extra sets of eyes may spot something that I'm missing.
Here is my project: https://codepen.io/royalstandard/pen/RwMxrLB
Main container -
.ldmainprofile {
width: 1100px;
height: 1400px;
padding: 0px;
background-image: linear-gradient(80deg, rgba(163,135,135,1.0), rgba(163,135,163,1.0));
border-radius: 15px;
position: relative;
overflow: hidden;
z-index: -10;
}
The first "frozen" container -
.basics {
height: 300px;
width: 270px;
border: 20px solid rgba(92,65,92,0.6);
background-color: #CCC;
border-radius: 10px;
position: absolute;
margin: 20px;
}
.basics ttl {
display: block;
font-family: aclonica;
font-size: 22px;
height: 22px;
width: 250px;
text-align: center;
padding: 20px 10px 10px 10px;
border-bottom: 1px dotted #888;
color: rgba(92,65,92,0.8);
}
.basicscroll {
height: 247px;
width: 240px;
background-color: #FF7777;
padding: 0px 15px;
overflow: auto;
}
.basics cat {
display: block;
font-family: poppins;
font-size: 15px;
text-align: left;
margin: 10px 0px 10px 10px;
color: rgba(92,65,92,0.6);
letter-spacing: 1px;
text-decoration: underline rgba(92,65,92,0.3) 4px;
}
The sections being affected so far are ".basicscroll" (currently coded with peach color as I do to clearly see what I'm working on) and ".info2 trig" at the bottom.
In my code margin-left: is working only in the other browsers. In Firefox it seems I need to double every values i give to the margin-left: that works for the other browers. The element i need to marge is the blue circle.
If I inspect the element and change the css in the inspector and then i give margin-left: 60px (my margin-left: is normally 30px) it works. The same goes for 1em (is i put a 2em it works).
I just strated a formation so i'm not an expert, so if one of you can see where I've made a mistake, thanks in advance for telling me !
Here's my code
.cercle-logo {
height: 65px;
width: 65px;
color: #5CADD3;
border: 2px solid #EBEBEB;
margin-top: 15px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.cercle-logo:before {
content: "";
border: 5px solid white;
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #5cadd3;
position: absolute;
margin-left: 2em;
box-sizing: border-box;
}
<div>
<span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>
Some browser use the parent padding as an offset for the absolute position child elements (chrome does this), because it's obvious that you will move the element using left,right,top,bottom not the margins
Say you have padding-left:20px, on the parent, and you set position absolute on one of it's children, if you won't see much changes, because some browsers uses that 20px and add it as an offset left:20px
One simple solution is to rest the offset, then use margins to push it, which i don't recommend you can use the left property to push it.
.cercle-logo {
height: 65px;
width: 65px;
color: #5CADD3;
border: 2px solid #EBEBEB;
margin-top: 15px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.cercle-logo:before {
content: "";
border: 5px solid white;
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #5cadd3;
position: absolute;
left: 3.7em;
box-sizing: border-box;
}
<div>
<span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>
Thank you for your answer but I might have done something wrong because even though your explanation were clear, and the "code snippet" works well (I test it directly on Firefox), when i write is in Bracket and test it, it moves my blue circle totally on the left but this time on every browsers ...
Is there something I missed ?
Thank you for your time anyway !
The Kendo Splitter has a collapsible property that I want to use. However, the icon is a very small arrow that isn't intuitive at all, the users can barely see it. Even when they know it's there, the icon is so small that clicking it takes some time as hovering such a tiny icon is not that fast.
I want to make it bigger. I managed to enlarge the divider itself
.k-splitbar.k-splitbar-horizontal{
width: 20px;
}
but not the small icon.
I found this post from a user with the exact same issue as me but the solutions there don't work and the user hasn't given any feedback on them.
As stated you can ovveride the rules and here is the description of all the rules for a flat theme
.k-splitbar-horizontal .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
width: 20px; height: 20px;}
.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px;
width: 20px; height: 20px;
}
.k-splitbar.k-splitbar-horizontal{
width: 15px;}
I know 5 years is too late but if someone is struggling with this, here is my solution in SASS.
.k-splitbar{
.k-i-arrow-60-left, .k-i-arrow-60-right{
z-index: 100000;
position: relative;
background: #ccc;
border-radius: 0 10px 10px 0;
bottom: -32px;
left: 20px;
width: 34px;
height: 30px;
font-size: 30px;
}
}
This works for horizontal panes, you can follow similar strategy for vertical ones.
I have this code of my div. I want to alight some text inside. The text has to be aligned to the left curv of the div. How can this be possible?
Thank you!
Here is the code of the div:
#cv {
position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
I believe you want the text to follow the semi circle, and not just have an ordinary align left along a straight edge. This is not (yet) possible with a simple css property. There are some hacky techniques like this however:
http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
There are even a tools to help you, like this one:
http://www.csstextwrap.com/
Adobe is pushing a new css property to wrap text:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
It should be already available in Chrome Canary, but I suppose that is of little use for you today. I think you will have to do with a hack today...
Working example: http://jsfiddle.net/mQFK6/4/
You want to add a <p> to hold the text, and then move it down 50% to the middle of the circle, and float it left
#cv {
position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
p{
top: 50%;
position: relative;
float: left;
margin-left: 5px;
}
I'm sorry if the title doesn't explain it well enough, but it's the best title i could think of to represent my question.
So I've got two divs:
.div-arrow
{
position: absolute;
float: left;
cursor: pointer;
display:block;
width: 136px;
height: 54px;
vertical-align: middle;
border-radius: 4px;
background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
zoom: 50%;
}
.div-diamond
{
position: absolute;
float: left;
cursor: pointer;
display: block;
width: 83px;
height: 54px;
vertical-align: middle;
border-radius: 4px;
background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
zoom: 50%;
}
And I use them to make a layout like this: http://i.stack.imgur.com/htFRd.png
Clicking where the red mark is will activate the green diamond, instead of the diamond it looks like you're clicking. I was wondering how I go about trimming those unseen sections of the image/div, so that you actually click the divs it looks like you're clicking.
All elements on a web page are essentially blocks - so although you may create the look of a circle or a diamond etc it's still really a four sided block element.
For your problem you could consider either using an image map:
http://www.w3.org/TR/html401/struct/objects.html
Or possibly using the HTML5 CANVAS method:
https://developer.mozilla.org/en-US/docs/HTML/Canvas