Antd radio circle falls outside - javascript

I using radio button in React js App.
And lately i noticed that in radio button cicrle falls outside the button.
I thought maybe there are something wrong with margins, paddings.
But when i removed all margins, styles, classNames and so on.
Issue still didn't dissapear.
When i tried to use the same ANTD component in another page, it was the same problem.
I didn't use any specific styles in index.css
Did anyone had this issue before with ANTD Radio
Sorry i didn't provide any code.
But i don't even have anything to provide.
I literelly deleted everything that was possible

Create a css file for your component and add the following css. Your issue is most probably due to the position property which is overriden by some other css
position should be position: absolute;
default antd .ant-radio-inner::after should be as follows
.ant-radio-inner::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
background-color: #1890ff;
border-top: 0;
border-left: 0;
border-radius: 16px;
transform: scale(0);
opacity: 0;
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
content: ' ';
}
When position property is removed from above class you get this issue, check the following screenshot
After removing position: absolute; property
After adding position: absolute; property:
I hope this helps you.., Thank you :)

Related

Why does the on mouse in even gets triggered when the mouse is not in the button?

I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.

Hiding figcaption on mobile devices

I'm in the process of updating my old website to a responsive design. I cobble together bits of script to get the look I want, and definitely don't claim to fully understand it when it works, so I could use some simple-words advice. My original site used subcontent divs to show/hide captions. See here: http://www.nancychuang.com/projects/mtc/ for caption links below the images . For the new site, I purchased an inexpensive template and have been modifying it.
I didn't know how to apply the original caption into the new template, because the original was positioned using the extremely basic method of nested tables. It seems with this current template it's not possible to have text underneath the images, so I needed something unobtrusive on top. Was able to make figcaption script work by using the code from css-tricks SlideinCaptions. So the new site will look like this: http://nancychuang.com/test/MTC.html .
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0; }
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease; }
figure:hover
figcaption { opacity: 1; }
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px; height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75; }
figure:hover:before { opacity: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
This figcaption script works on touch-screen, although to be honest I don't know why! There's no reference to touch or click in the code (so I can't figure out how to make the opposite action to "click off"). On desktop computer, hovering away from the image will hide the caption, on mobile the caption is stuck once activated. Since the text is proportionately large on mobile, I definitely want the user to be able to hide it. Either if there's a way to just touch anywhere on screen to make the caption disappear, OR like the original hidediv version where I add a link for the user to click:
<DIV id="subcontent1">
<p class="caption">Mae Tao Clinic, started by Dr. Cynthia Maung in 1989, is the primary care facility for many Burmese living on the border. Helping refugees, uninsured migrant residents of Mae Sot, as well as Burmese who cross the border due to difficulties obtaining care on the other side, the clinic today offers a comprehensive range of services.
<p class="caption"><a class="caption" href="javascript:dropdowncontent.hidediv('subcontent1')">HIDE</a></p></td>
</DIV>
*related: with figcaption, can you specify the width of the hover block the way I did with my original subcontent divs? I'm not clear what 24px is referring to in the code...a minimum width, maybe? but no maximum?
Appreciate the help! Thank you!
I'll throw in an answer anyway...
In your CSS, you have:
figcaption { opacity: 0; }
which means that figcaption is not visible by default.
And you have:
figure:hover figcaption { opacity: 1; }
which means that the figcaption will be made visible when hovering the containing figure.
The above two styles are mainly what's causing the caption to appear on hovering the picture, and in the case of a mobile device - on tapping the picture.
You asked how to hide the caption on a mobile device once it appears. The simple answer is - based on the above CSS - to tap anywhere outside the picture which can be interpreted as the picture losing focus.
However, do you really want to have this effect on a mobile device? It is not very intuitive. There are ways to change the styling depending on device. For example, if viewed on mobile device, the figcaption should always appear underneath the picture, which makes more sense to me. This can be achieved by using media query CSS to target different screen sizes.
I suggest that you do some online CSS tutorials to learn all the cool things CSS can do. It's definitely worth the time especially that you're customising a website already.
As a solution you need to check is the device touch or not therefore CSS can define based on the result.
#media (-moz-touch-enabled: 0), (pointer: fine), (-ms-high-contrast: none) {
figure:hover:before {
opacity: 0;
}
.cap-bot:before {
bottom: 10px;
left: 10px;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
}

Fixed divs under the bootstrap fixed nav

I'd like to attach some fixed alerts underneath the navbar-fixed navigation bar in bootstrap. My best attempt to this point is to make a div positioned at 50px with position: fixed; and width: 100%, and to insert the alerts in this div. The problem is that this cuts off the top of my other content the same way that navbar-fixed cuts off content when one fails apply padding to the body element.
#Alerts
{
position: fixed;
width: 100%;
top: 50px;
}
.alert
{
top: 0px;
//position: fixed;
padding-left: 15px;
padding-right: 15px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0px;
border-radius: 0px;
}
body {
padding-top: 50px; // to avoid 'underlapping' the navbar
}
Here's a link to a not-working example: http://www.bootply.com/pnEHtLhUBi
My best idea at the moment is to use JS to adjust the padding-top value on body as alerts are created/destroyed, but this is likely bad for maintenance/readability and I'd prefer to do something more declarative with css.
Any suggestions?
Looks like there won't be a way to do this without js.
Since if the alert is dynamic, meaning it only appears when its triggers via the alert method
$('#alert-danger').show('slow', function(){
$('body').addClass('moreMargin')
});
you can also remove the moreMargin class from the body when you hide the alert
What about putting it inside the same div as the nav. When they popup they will push down the other content?
Also, since these are alerts, won't the user already have seen the content that is being covered? If they want to see it again they can just close the alerts. Maybe I just misunderstood what you are going for?

how to change the CSS background-image of a class-pseudoelement by Javascript only?

I'm getting nowhere with this. I have an element, which is using a :before pseudo selector.
CSS is like this:
.initHandler:before {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 110%;
z-index: 999999;
background-color: white; /*background:white url(../images/ajax-loader.gif) no-repeat center center;*/
content: "initializing...";
text-align: center;
font-color: #ccc;
line-height: 150px;
vertical-align: bottom;
}
This gives me a white background for my app, which is loading "behind the curtain". On iOS I'm using a startup image, which I'm setting in the page head before jquery and jquerymobile are loaded.
I now want to change the background of my initHaendler:before element to the determined iOS splashscreen.
However I need to this in pure javascript and I have no idea how to select a class/pseudoelement to set a css value.
Can someone help out?
Thanks!
Setting CSS pseudo-class rules from JavaScript seems to suggest that you can't and offers a workaround by appending a stylesheet to the document. I'm unsure if it'd work on iOS but it's worth a shot

Creating an overlay in CSS?

I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob

Categories