asp.net radiobutton size

Hello,

I have a control of type RadioButton.

How do I make the radiobuttons larger?

Thanks in advance.
skbohlerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Obadiah ChristopherCommented:
I'm not sure of this, but tryrb1.styles.Add("font-size","12");
0
skbohlerAuthor Commented:
I want to change the size of the buttons, not the size of the text.
0
DesignbyonyxCommented:
You can't really make the buttons bigger.  Every browser will render it differently... some browsers will make the buttons bigger... some wont.  The only real solution is to use image replacements... which is no easy task.  Fortunately someone has already done and bundled it up in a jQuery plugin:

http://uniformjs.com/

You will need to get in there and edit the CSS sprite and the style definitions.  If you need any help, let us know.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

skbohlerAuthor Commented:
Hummm... I'm in a bit over my head here. Don't know anything about jquery

How do I call jquery from within vb.net code in a .aspx.vb page?
0
DesignbyonyxCommented:
Well, hopefully you have some experience with styling, css sprites, and a little bit of javascripting.  So you need to include jQuery in the HEAD of your document.  Use this line of code.  It's hosted by google, but it's better to let them host it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

Open in new window


Then, you need to download the uniform plugin.  Extract the files so that the files are in your project: there is a CSS file, a javascript file, and some images.  I suggest unzipping the plugin to a directory like this:

<site_root>/scripts/uniform

So that your folder structure would look like this after unzipping:

<site_root>/scripts/uniform/jquery.uniform.js
<site_root>/scripts/uniform/css/uniform.default.css
<site_root>/scripts/uniform/images/bg-input.png
<site_root>/scripts/uniform/images/bg-input-focus.png
<site_root>/scripts/uniform/images/sprite.png


Then put this in the HEAD of your document AFTER the jQuery inclusion:

<script src="jquery.uniform.js" type="text/javascript"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript">
  $('input:radio').uniform();
</script>

Open in new window



Then, here comes the tricky part.  If you want to make the radio button bigger, you will need to edit the sprite.png image.  You will have to move things around and add your own graphics.  After that, you will need to edit the CSS styles and update the background-position for the radio button styles.

Before all of this, I suggest you take a crash course in jQuery as well as CSS sprites.  hope that helps.  Like I said in my last post, this is no easy task.  If you have a friend who is good with CSS, you should call her.  It would be worth $50 to have this done by someone with a little more experience.  Cheers.
0
DesignbyonyxCommented:
Sorry, I didn't update the file paths for the uniform plugin.  Try doing this instead:

<script src="/scripts/uniform/jquery.uniform.js" type="text/javascript"></script>
<link rel="stylesheet" href="/scripts/uniform/css/uniform.default.css" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript">
  $('input:radio').uniform();
</script>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.