Search jQuery

jQuery Forum

in Using jQuery UI • 10 years ago

I have tried several ways of getting this space to go away.

margin/padding 0px !important various elements
in jquery after .button() call .css() and set margin/padding
white-space:nowrap
wrapping in container divs (the "margin" extends beyond the container divs border somehow)
1 button per cell works - but doesn't fit with the rest of my design
$(selector).parent().css margin/padding 0px (.parent().parent() or even div as the selector)
not using text=false but using   and font-size=0, 1, 10, 20, 30, etc%
margin-bottom:-n px; this works but its not the right way to do it and can break with different themes

How do you get that space to go away?

<!DOCTYPE />
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#themeSwitcher').themeswitcher({ loadTheme: "Redmond", height: 600 });
$(".b1").button({ icons: { primary: "ui-icon-gear" }, text: false });
$(".b2").button({ icons: { primary: "ui-icon-gear"} });
});
</script>
</head>
<body>
<div style="display:table;border:1px solid Black;">
<div style="display:table-row;">
<div style="display:table-cell;">
<button class="b1"> </button>
<button class="b1"></button>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<button class="b2" style="font-size:50%;">abc</button>
<button class="b2" style="font-size:50%;">xyz</button>
</div>
</div>
</div>
<div id="themeSwitcher" style="float:right;"></div>
</body>
</html>

Replies(1)

10 years ago

i always answer my own questions. a nested table does it. if anyone has a better solution ill give you the answer.

<!DOCTYPE />

<html>

<head>

$(document).ready(function () {

$('#themeSwitcher').themeswitcher({ loadTheme: "Redmond", height: 600 });

$(".b1").button({ icons: { primary: "ui-icon-gear" }, text:false });

$(".b2").button({ icons: { primary: "ui-icon-gear"} });

});

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>