I've got problems to get text in the label to the bottom of the label.

I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without ing up with a working solution.

/

.uppgifter
{
    vertical-align: text-bottom;
}

Seems not to help!

I've got problems to get text in the label to the bottom of the label.

I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without ing up with a working solution.

http://jsfiddle/kaze72/jQ6Ua/

.uppgifter
{
    vertical-align: text-bottom;
}

Seems not to help!

• javascript
• jquery
• html
• css

• but you are not making the label fall. you are simply increasing its height?? is that you really want?? – Manish Mishra Commented Mar 4, 2013 at 9:21
• Yes, in that way, I can have a "cool" background leaving a trace! – kaze Commented Mar 4, 2013 at 10:20

7 Answers 7

You can try

.uppgifter
{
    display: table-cell;
    vertical-align: bottom;
    background-color: yellow;
}

jsFiddle

Updated jsFiddle so that .uppgifter's height in animate method matches #spelplan's height.

.uppgifter
{

    padding: 580px 0 1px 230px;
}

You could just animate the padding-top:

$("#the_button").click(function () {
    $(".uppgifter").animate({
        'padding-top':"500px"
    }, 4000, "linear", function() {});
});

try this:

$(document).ready(function() {

    $("#the_button").click(function () {
        $(".uppgifter").animate({ 
            "height":"100px","padding-top":"500px"}, 
            4000, "linear", function() {});
    });
});

or just a suggestion, take a look at this :):

$(document).ready(function() {

    $("#the_button").click(function () {
        $(".uppgifter").animate({ 
            "top":"500px"}, 4000, "linear", function() {});
    });
});

bined with

.uppgifter
    {
        vertical-align: text-bottom;
        position:relative;
        background-color: yellow;
    }

    * 
    {
        font-family: cursive;
    }

    .panel
    {
        position:relative;
        border: 1px solid;
    }

    #spelplan
    {
        height: 600px;
    }

    .uppgifter
    {
        position:absolute;
        vertical-align: text-bottom;
bottom:0;

        background-color: yellow;
    }

I simply added two transparent divs set with a 90% height that force the text down as the label height changes.

http://jsfiddle/jQ6Ua/15/

#div
{
height:90%;
width:200%
}

To vertically align a text in a container, multiple techniques can be used. However, most of them have additional script calculation at runtime (if the height of the text container is changing) which can mess with the business logic.

A hack can be used in your particular situation. You can add an image container with empty src inside your text container with 100% height and 0 width set by css.

<label id="uppgift" class="uppgifter" style="display:inline-block;"><img scr=""/>Abc</label>
<label id="uppgift2" class="uppgifter" style="display:inline-block;"><img scr=""/>123</label>

//and css
.uppgifter img{
    height:100%;
    width:0;
}

Example

This way you would not have to write logic for additional added layers.