The radio button looks very weird in VS 2012, but looks normal in VS 2010.
could not paste images in this control therefore tried to show it using characters. There is a large textbox and the circle to check appears in the centre of that textbox.
Tried with both HTML and ASP controls but the appearance is the same.
VS 2010:
Radio o
VS 2012:
Radio | ----------------------------------------------------|
Markup is pretty standard and renders 'normal' kind of radio controls in VS2010 but in VS2012 it is quite weird with large text box with the radio control in its centre. Unfortunately could not upload image to show,
It looks like this is the result of default styling within VS2012 applications that use the default Site.css file, as seen by the CSS below :
/* These styles will apply to all <input> elements, including radio buttons */
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
creating the following appearance :
by applying a "fixed" class to these elements, you can easily avoid this issue by either setting the width to auto; or a specific size that you find aesthetically pleasing :
You can simply add the CssClass='fixed' to your two RadioButtons and place the above style at the bottom of your Site.css, or set the width of them directly using the style element :
<!-- Using the newly created class -->
<asp:RadioButton ID="RadioButtonMale" CssClass="fixed" runat="server" GroupName="Gender" />
<asp:RadioButton ID="RadioButtonFemale" CssClass="fixed" runat="server" GroupName="Gender" />
<!-- Directly setting the width of the fields -->
<asp:RadioButton ID="RadioButton1" style="width:20px;" runat="server" GroupName="Gender" />
<asp:RadioButton ID="RadioButton2" style="width:20px;" runat="server" GroupName="Gender" />
Thank you Rion for your detailed reply - much appreciated but unfortunately the issue remain unresolved. The radio buttons are not budging.
I think you have put your finger correctly as they appear normal if I dont use default master page with site.css in contents folder. If I don't use any master page the appearance is normal.
But on the hand if I comment out the input, textarea{...} in site.css the appearance remain weird/abnormal.
I have tried solution exactly as you said with addng input.fixed in site.css (the fixed class does not appear in properties window under cssClass if it is added in site.css but if I make another stylesheet.css and add it over there it does appear in properties
tab under cssClass) Either way it doesnot get applied to the radio buttons and they remain the same.
Also tried applying inline style with style="width:20px;" (by the way style does not appear in intellisence) and also with width="20px" (width does appear in intellisence)
Also tried in site.css input[type="radiobutton"]{ ...(your parameters) } and input[type="radiobuttonlist"]{...} and input[type="radio"]{....} but no affect.
Also updated the visual studio itself but no joy.
I feel this is a bug in the program as it does not happen in vs2010 and if I dont use the default master pages with default site.css
Ensure that the additional styles that you are adding are being placed at the very bottom of the Site.css file
(under all previous style declarations) and that you added the proper class to your inputs (class='fixed').
Have you tried swapping out your Site.css file with the one that I used in the JSBin example? Or as opposed to adding the .fixed class to your Radio Button elements, just replace the last class (input.fixed) with this one :
The last answer should fix the issues and will avoid having to use a specific CSS class to solve this problem. Try copying the CSS from the last JSBin example and pasting it within your Site.css file. (You can also remove the class='fixed' on your Radio
Button elements)
After doing this when you run perform a "hard refresh" (CTRL + F5) to possibly clear any caching of your current Site.css file.
SHR
Member
30 Points
63 Posts
Weird Radio button appearance in Visual Web Express 2012
Jan 20, 2013 07:03 PM|LINK
The radio button looks very weird in VS 2012, but looks normal in VS 2010.
could not paste images in this control therefore tried to show it using characters. There is a large textbox and the circle to check appears in the centre of that textbox.
Tried with both HTML and ASP controls but the appearance is the same.
VS 2010:
Radio o
VS 2012:
Radio | ----------------------------------------------------|
| ______________________O_________________________|
Any ideas why is it like this please.
Thanks
Hamid
Rion William...
All-Star
27852 Points
4609 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 20, 2013 07:05 PM|LINK
Can you post some of your source / markup? Also, do you have any CSS styles that could be interferring such as text-align: center;?
SHR
Member
30 Points
63 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 21, 2013 04:57 PM|LINK
Thank you Rion for the interest
Markup is pretty standard and renders 'normal' kind of radio controls in VS2010 but in VS2012 it is quite weird with large text box with the radio control in its centre. Unfortunately could not upload image to show,
markup is
Thanks
Hamid
Rion William...
All-Star
27852 Points
4609 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 21, 2013 06:39 PM|LINK
It looks like this is the result of default styling within VS2012 applications that use the default Site.css file, as seen by the CSS below :
/* These styles will apply to all <input> elements, including radio buttons */ input, textarea { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; width: 300px; }creating the following appearance :
by applying a "fixed" class to these elements, you can easily avoid this issue by either setting the width to auto; or a specific size that you find aesthetically pleasing :
input.fixed { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; width: 20px; }which makes them look like this :
You can simply add the CssClass='fixed' to your two RadioButtons and place the above style at the bottom of your Site.css, or set the width of them directly using the style element :
Fully Working Example of Your Issue
SHR
Member
30 Points
63 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 22, 2013 08:07 PM|LINK
Thank you Rion for your detailed reply - much appreciated but unfortunately the issue remain unresolved. The radio buttons are not budging.
I think you have put your finger correctly as they appear normal if I dont use default master page with site.css in contents folder. If I don't use any master page the appearance is normal.
But on the hand if I comment out the input, textarea{...} in site.css the appearance remain weird/abnormal.
I have tried solution exactly as you said with addng input.fixed in site.css (the fixed class does not appear in properties window under cssClass if it is added in site.css but if I make another stylesheet.css and add it over there it does appear in properties tab under cssClass) Either way it doesnot get applied to the radio buttons and they remain the same.
Also tried applying inline style with style="width:20px;" (by the way style does not appear in intellisence) and also with width="20px" (width does appear in intellisence)
Also tried in site.css input[type="radiobutton"]{ ...(your parameters) } and input[type="radiobuttonlist"]{...} and input[type="radio"]{....} but no affect.
Also updated the visual studio itself but no joy.
I feel this is a bug in the program as it does not happen in vs2010 and if I dont use the default master pages with default site.css
Any solution please.
Rion William...
All-Star
27852 Points
4609 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 22, 2013 08:28 PM|LINK
Ensure that the additional styles that you are adding are being placed at the very bottom of the Site.css file (under all previous style declarations) and that you added the proper class to your inputs (class='fixed').
Have you tried swapping out your Site.css file with the one that I used in the JSBin example? Or as opposed to adding the .fixed class to your Radio Button elements, just replace the last class (input.fixed) with this one :
input[type='radio'] { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; width: 20px; }Example
SHR
Member
30 Points
63 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 22, 2013 09:04 PM|LINK
Sorry Rion tried putting at the end of the site.css but no success.
Also tried renaming Site.css and excluding it from the project, but of no avail, but if I delete it the radio buttons are of normal appearance.
I made sure that the proper class is added to the inputs.
Rion William...
All-Star
27852 Points
4609 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 22, 2013 09:18 PM|LINK
The last answer should fix the issues and will avoid having to use a specific CSS class to solve this problem. Try copying the CSS from the last JSBin example and pasting it within your Site.css file. (You can also remove the class='fixed' on your Radio Button elements)
After doing this when you run perform a "hard refresh" (CTRL + F5) to possibly clear any caching of your current Site.css file.
SHR
Member
30 Points
63 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 22, 2013 09:33 PM|LINK
Sorry - no success
Copied your css into site.css. removed the cssclass="fixed" but no avail.
I was alway doing hard refresh, closing the browser, and hitting F5 or ctrl F5
Thanks anyway for your continued input.
Hamid
Rion William...
All-Star
27852 Points
4609 Posts
Re: Weird Radio button appearance in Visual Web Express 2012
Jan 22, 2013 09:51 PM|LINK
This is really bizarre. Can you post your entire source (including your entire CSS and HTML) into something like JSBin or onto here?