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


    CSS Howto..

    How to put horizontal dropdown menu bar

    How to access my .png from a folder using CSS?

    Panel in Horizontal List item showing behind Button

    How to manage text breaks in span using js, css or anything else

    Can someone explain or show how to combine a bootstrap 3 collapsing top nav and and offcanvas side nav?

    How do I get this text using Jsoup?

    How Visually Long is a String?

    a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

    how to create a QT plugin using Meego Touch Framework?

    How would I go about making my q and a page like this: http://www.text-link-ads.com/r/faq

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How to make the width of a div in the middle responsive

    How does the following line of JavaScript work?

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    how to set auto div height from ul/li elements variable height

    Slideshow picture disapears

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    how to load external div into a master.html div from a number of submenu items

    Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

    How to see the source code of a particular html tag by onClick() javascript without showing its css?

    AngularJS - how to set css class for the custom directive?

    Hovering over navigation link to show a separate div

    How to make a CSS transition work “backwards”?

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    HTML/CSS: How to achieve the following center-left alignment?

    How to set the added elements by jQuery to the behind of other element

    How to import Google Web Font in CSS file?

    How to select the second paragraph after another with css?

    How long can a webpage be?

    Website layout moving slightly between pages - how to stop it