How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

Tags: javascript,jquery,css,jquery-ui

Problem :

UPDATE: Sorry I make this question to complex.

What I want to ask is that how can I "fix" the buttons' position to the bottom of the jQueryUI dialog as the dialog height grow's larger.

I have a jQueryUI dialog as follow:

        autoOpen: false,
        title: "Upload",
        height: 600,
        width: 500,
        modal: true

And I add two buttons in the dialog and I always want to put them at the bottom of the dialog. Here is the code:

<div id= "ChooseStoryCategory">
    <div id="storyCategory"></div>      

    <div><button id="ChooseCategory"><img src= "../pic/chooseOk.png"/></button></div>
    <div><button id="CategoryCancel"><img src= "../pic/close.png"/></button></div>

css setting:

    position: absolute;
    left: 30%;
    top: 85%;
    bottom: 0;


    position: absolute;
    left: 70%;
    top: 85%;
    bottom: 0;

But I will always increase element inside the dialog like this:

for(multiple times)://pseudocode
var categoryName= "PressNum1";
var value= 3;
var $btn= $('<button/>').text(categoryName).width(400).height(80);
$btn.bind('click', function(){console.log(value)});

As the added buttons increase, their position will exceed the two buttons(ChooseCategory and CategoryCancel). How can I dock the two buttons to the bottom of the jQueryUI dialog?

I have tried to get the initial top position of the two buttons. As each button is added to the dialog, I just change the position of the two buttons.

$("#CategoryCancel").css("height") = $("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");


$("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");

didn't add the px, it just combines the number and string...

Is there any simple alternative approach to dock the two buttons at the bottom of the jqueryUI dialog?

Solution :

Why dont you use the buttons option?

$( "#ChooseStoryCategory" ).dialog({
  autoOpen: false,
  title: "Upload",
  height: 600,
  width: 500,
  modal: true
  buttons: {
    "Choose category": function() {
      // Do something
      $( this ).dialog( "close" );
    Cancel: function() {
      $( this ).dialog( "close" );

Check out the examples within jquery-ui's page: or check out the API documentation:

Here's the jsFeedle: (Took @rusln fiddle and started from there).

    CSS Howto..

    How does jQuery .fadeTo() work?

    How can we control the size of a special character?

    How to identify unused css definitions [closed]

    How to call css styles in specific page in HTML?

    How to change the css of child and subchild menu's border together

    In Firebug, how to tell what is overriding a style?

    Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

    How can I center text on an image using Bootstrap?

    How to make gutter between columns in a CSS grid system

    How to fix an image to the bottom right with resizing window?

    How to make a text flash in html/javascript?

    How to remove “left” value bootstrap popover

    How to set ribbon on image by stacking it in a div?

    how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

    How can i get an image inside an li to disregard padding with css

    How could I join a smaller and a bigger div with rounded edges?

    How to get next elements before a specific element using jquery or css

    If div is visible, than show that content in other div with jQuery

    How to set css to more selectors when one of it is $(this)?

    how to position a css sprite as background for another class

    How to set css via jquery for preventing some action

    How to select li child of a ul without nth-child via css?

    Css Drop down menu, how to keep menu infront of content

    How to use Ant to concatenate CSS files from external CSS @import file

    How to use CSS in ASP.NET application

    How to DRY up on SASS transitions with multiple elements?

    How to redefine CSS classes with Javascript

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    How to extend jQuery.css from plugin

    How do I make these HTML blocks of info stay the same size?