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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Buttons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
</head>
<body>
<section>
<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>
<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>
</section>
</body>
</html>
Main CSS file - css/index.css
(The magic is done here... :P)
@charset "utf-8";
/* CSS Document */
html,body{
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
}
section{
padding:2em;
}
.btns .ui-button{
margin-left: 0;
margin-right: -4px;
}
Main Javascript file - js/index.js
$( document ).ready(function() {
$( "section input[type='radio']" )
.button();
});// JavaScript Document
* Click
here for the demo shown in this post.
^ Click
here for the source files for the demo.
