Saturday, February 23, 2013

JQuery: Irritating button gap...

I was working on Javascript and JQuery the other day and I have came across this strange button gap between a button set, which is kinda annoying. After spending some time playing around it, I finally could come up with a workaround for this annoying problem.

Main HTML file - index.html
<!doctype html>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JQuery Buttons</title>
    <link rel="stylesheet" href="">
 <script src=""></script>
    <script src=""></script>
 <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
  <input name="grp0" type="radio" id="btn0" />
  <label for="btn0">Button 0</label>
  <input name="grp0" type="radio" id="btn1" />
  <label for="btn1">Button 1</label>
  <input name="grp0" type="radio" id="btn2" />
  <label for="btn2">Button 2</label>
  <input name="grp0" type="radio" id="btn3" />
  <label for="btn3">Button 3</label>
  <input name="grp0" type="radio" id="btn4" />
  <label for="btn4">Button 4</label>
  <input name="grp0" type="radio" id="btn5" />
  <label for="btn5">Button 5</label>
 <section class="btns">
  <input name="grp1" type="radio" id="btns0" />
  <label for="btns0">Button 0</label>
  <input name="grp1" type="radio" id="btns1" />
  <label for="btns1">Button 1</label>
  <input name="grp1" type="radio" id="btns2" />
  <label for="btns2">Button 2</label>
  <input name="grp1" type="radio" id="btns3" />
  <label for="btns3">Button 3</label>
  <input name="grp1" type="radio" id="btns4" />
  <label for="btns4">Button 4</label>
  <input name="grp1" type="radio" id="btns5" />
  <label for="btns5">Button 5</label>

Main CSS file - css/index.css (The magic is done here... :P)
@charset "utf-8";
/* CSS Document */



.btns .ui-button{
    margin-left: 0;
    margin-right: -4px;

Main Javascript file - js/index.js
$( document ).ready(function() {
 $( "section input[type='radio']" )
});// JavaScript Document
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

No comments:

Post a Comment