How to make an anchor fill the height of its containing div

Tags: css,jquery-ui

Problem :

I know this is really basic to some of you, but I don't know enough css to make this happen.

I'm trying to make my own version of a spinner, and it will hook into jqueryui themes, so has to at least initially use their classes. I also need to make the widget able to change its height (and width) dynamically.

My issue is that I don't know how to resize the buttons to fit the height of their container. If I actively set the height of the .ui-spinner div, the container is too small to fit the text. If I don't, then the div is bigger, so the anchors need to be as well, but I don't know how big. Looking at it with developer tools, I don't see any margins or paddings to account for the extra size.

I see How to style an anchor tag to look like a button with the same height as the button? keeps popping up as a similar question, but I've already set the style to be inline-block.

Here's what I currently have. I've made a fiddle for it at http://jsfiddle.net/37za8/

HTML

<div class="ui-corner-all ui-widget ui-widget-content ui-spinner">
    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
    <span class="ui-icon ui-icon-minusthick"></span>
</a>

    <input class="ui-spinner-input" style="margin: 0;" value="0" />

    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
        <span class="ui-icon ui-icon-plusthick"></span>
    </a>
</div>

jQuery

var _selector = ".ui-spinner"

$(_selector + " .ui-spinner-input").css("height", "18px");
$(_selector + " a").css("height", "18px");

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", "24px");
$(_selector + " span").css("margin-left", "4px");

I can change anything you all say will help, as long as the result is dynamically sizable. I'm sure this will be easy for most of you. Thanks in advance!

Edit

For clarification, I'm trying to eventually imitate the jqueryui spinner. I'm attempting to make a widget/component where the height can be set before displaying. A simple example of jqueryui handling it is this fiddle. The component I built has a setHeight function which will set the height of the widget. All it is is those two lines that set the height in jQuery. There must be some way to set up the css (or add more jquery if necessary) so that I can dynamically change the height.

---

Solution :

If you use a mixture of css and jquery you should be able to achieve what you want:

css

.ui-spinner,
.ui-spinner > a,
.ui-spinner-input {box-sizing:border-box;}
.ui-spinner > a {width:24px; text-align:center;}
.ui-spinner span.ui-icon {left:50%; margin-left:-8px;}
.ui-spinner-input {width:52px;}

jquery

var spinner = $(".ui-spinner"),
    children = spinner.children();

 spinner.height(48); //added for test purposes (if you change the height it should change the inner object heights)

children.height(spinner.height() - 2);  //minus 2 is because the box-sizing hasn't taken into account the borders for some reason

Example