CODEWITHSUNDEEP
javascriptjqueryhtmlcss
eba
eba

Reputation: 673

input to div sizes

I have such code:

<div style="width:500; height:500;">
    <input type="button"/>
</div>

how to fit the button to the div's sizes? if its imposible ny css, i can use js,jquery

Upvotes: 0

Views: 7796

Answers (6)

Joeri Hendrickx
Joeri Hendrickx

Reputation: 17435

Why don't you just put the size on the button instead of the div? The div would automatically take on the correct size, and you'll get a perfect fit, without JS.

Upvotes: 0

Sondre
Sondre

Reputation: 1898

If all you need is getting the button to fill out the div why not remove one of the elements, making either the div act as a button by putting whatever action you want on it's onclick, or just setting the button as the main element with a size.

Might be that you need both, but unless there's a reason you need both, there's no point wrapping the button in a div a you'll just get more elements than needed.

Upvotes: 0

Paulo Scardine
Paulo Scardine

Reputation: 77271

Untested, but you can start by something like this...

HTML:

<div style="width:500; height:500;">
    <input class="expand" type="button"/>
</div>

JS:

$('document').ready(function() {
    $('.expand').each(function(i) {
        $(this).width($(this).parent().width());
        $(this).height($(this).parent().height());
    });
});

Upvotes: 0

rahul
rahul

Reputation: 187050

You can use css for this

<input type="button" style="width: 500px; height: 500px;" />

Better use a class for that

.inpbutton
{
    width: 500px;
    height: 500px;
}

<input type="button" class="inpbutton" />

Upvotes: 0

Dean Burge
Dean Burge

Reputation: 3461

Make sure you give your width and height of parent container a unit suffix on the value:

<div style="width:500px;height:500px;">
    <input type="button" style="width:100%;height:100%;"/>
</div>

Upvotes: 0

Omid
Omid

Reputation: 4705

$('document').ready(function() {
    $('input[type=button]').each(function(){
        $(this).height($(this).parent().height());
        $(this).width($(this).parent().width());
    });
});

Upvotes: 0

Related Questions