Databases
StackOverflow2013
Postsdbo
POHow to make an anchor fill the height of its containing div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make an anchor fill the height of its containing div
    primarykey
    data
    text
    <p>I know this is really basic to some of you, but I don't know enough css to make this happen.</p> <p>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.</p> <p>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 <code>.ui-spinner</code> 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. </p> <p>I see <a href="https://stackoverflow.com/questions/1121823/how-to-style-an-anchor-tag-to-look-like-a-button-with-the-same-height-as-the-but">How to style an anchor tag to look like a button with the same height as the button?</a> keeps popping up as a similar question, but I've already set the style to be inline-block.</p> <p>Here's what I currently have. I've made a fiddle for it at <a href="http://jsfiddle.net/37za8/" rel="nofollow noreferrer">http://jsfiddle.net/37za8/</a></p> <h3>HTML</h3> <pre class="lang-html prettyprint-override"><code>&lt;div class="ui-corner-all ui-widget ui-widget-content ui-spinner"&gt; &lt;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;"&gt; &lt;span class="ui-icon ui-icon-minusthick"&gt;&lt;/span&gt; &lt;/a&gt; &lt;input class="ui-spinner-input" style="margin: 0;" value="0" /&gt; &lt;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;"&gt; &lt;span class="ui-icon ui-icon-plusthick"&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <h3>jQuery</h3> <pre class="lang-javascript prettyprint-override"><code>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"); </code></pre> <p>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!</p> <h3>Edit</h3> <p>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 <a href="http://jsfiddle.net/8L5zD/" rel="nofollow noreferrer">this fiddle</a>. 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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USScott Mermelstein
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COcan u use a different height than 18px? i tried 24px and it looks ok - http://jsfiddle.net/37za8/1/
      singulars
      1. POHow to make an anchor fill the height of its containing div
      1. USAyyash
    2. COoh you've already answered that :s
      singulars
      1. POHow to make an anchor fill the height of its containing div
      1. USAyyash
    3. COYes. It happens that when I set it to 18, the box ends up being 25 pixels, so 24-26pixels should look decent. That relies on looking up the height in dev tools and then hardcoding, though.
      singulars
      1. POHow to make an anchor fill the height of its containing div
      1. USScott Mermelstein
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload