2

I am using div container as a drop-able element, so I am adding buttons elements dynamically in to this div container. Div size is resizing if I am adding buttons beyond its size how to avoid this?

Note: This issue occurs in Firefox only

sample:fiddle

#divContainer{
    width:100%;
    height:40%;
    overflow:auto;
    border:1px solid;
    display:inline-block;
}
#click{
    width:100px;
    height:30px;
}
table{
    border:1px solid;
}
body{
    height:1000px;
}

//html

<button id="click">ClickME</button>
<table style="width:20%; height:30%">
    <tr>
        <td>
            <div id="divContainer">
            </div>
        </td>
    </tr>
</table>

//script

 $(function () {

        $("#click").on("click", function () {

            $("#divContainer").append($("#click").clone());
        });
    });
Pranath
  • 321
  • 1
  • 4
  • 13

2 Answers2

0

Try this..

#divcontainer
{
max-width: 40%;
max-height: 30%;
overflow:auto;
display:inline-block;
}
nisar
  • 1,055
  • 2
  • 11
  • 26
  • 3
    "Not sure" is a _terrible_ way to start out your answer. If you have the heart to go out and answer broad questions, include multiple solutions so _at least_ one of them helps the OP. Just some advice! – Aaron Gillion Apr 14 '16 at 04:28
0

Since you are using table, table elements doesn't goes well in % value in different browsers, they adjust their width/height according to the content. So its better you go with max-width and min-width value (that's also in pixels), so that cross-browsers don't create any mess for your design-

Try below css code:

#divContainer{
    width:100%;
    min-height:100px;
    height:40%;
    max-height:100px;
    overflow:auto;
    border:1px solid;
    display:inline-block;
}
#click{
    width:100px;
    height:30px;
}
table{
    border:1px solid;
}
body{
    height:1000px;
}

Updated fiddle link- https://jsfiddle.net/cpqz01ct/3/

Himanshu Aggarwal
  • 1,060
  • 8
  • 13
  • Is any other way to preventing from this problem without using "min-height"? – Pranath Apr 14 '16 at 06:57
  • 1
    Yes, you can instead of using `table`, go for CSS property `display:table;` and `display:table-cell` on `div` element, then can use `postion:absolute` to make height work in `%` since `div` elements does not resize automatically like `table`. – Himanshu Aggarwal Apr 14 '16 at 07:16
  • For little experiment with your layout, you can also check this link- https://css-tricks.com/centering-in-the-unknown/ – Himanshu Aggarwal Apr 14 '16 at 09:47
  • I have checked with your previous comment, not working. This problem happens only in Firefox browser. – Pranath Apr 14 '16 at 10:09