Search code examples
jqueryresizable

jquery Resizeable malfunctioning in Firefox

in my web page i have a table and i want its first column to be resizeable. it works fine in IE8 but on Mozilla it shows resize icon in bottom right corner of the document. this is the code

$(".resizable").resizable({
            maxHeight: 25,
            maxWidth: 350,
            minHeight: 25,
            minWidth: 150
        });

here is how it shows up in IE8 alt text

here is how it shows up in Firefox alt text

plz see the resize icon on bottom right corner

<table cellspacing="0">
    <thead>
        <tr>
            <th class="resizable ui-resizable">Task Number<div class="ui-resizable-handle ui-resizable-e" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none;" unselectable="on"></div></th>
            <th>Start Date</th>
            <th>Duration</th>
            <th style="width: 100px;">DeadLine</th>
            <th>Parent TaskID</th>

        </tr>
    </thead>
    <tbody>


             <tr class="1" id="row-0" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskN

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/12/2010" style="text-align: center;" name="StartDate[0]" id="StartDate_0_" class="DatePicker 11 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[0]" id="Duration_0_" class="DurationChange 11">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="2" id="row-1" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskP

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/11/2010" style="text-align: center;" name="StartDate[1]" id="StartDate_1_" class="DatePicker 12 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[1]" id="Duration_1_" class="DurationChange 12">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="3" id="row-2" style="color: blue;">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task12

                </td>
                <td style="text-align: center;">
                16/12/2010

                </td>
                <td>
                5

                </td>
                <td>18/11/2010</td>
                <td></td>
             </tr>





             <tr class="3.1" id="row-3" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task2

                </td>
                <td style="text-align: center;">
                10/12/2010

                </td>
                <td>
                5

                </td>
                <td>19/09/2010</td>
                <td>1</td>
             </tr>





             <tr class="3.1.1" id="row-4" style="color: red;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task3

                </td>
                <td style="text-align: center;">
                22/12/2010

                </td>
                <td>
                1

                </td>
                <td></td>
                <td>2</td>
             </tr>





             <tr class="3.1.1.1" id="row-5" style="color: red;">
                <td width="150">
                    <div style="width: 56px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task9

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[5]" id="StartDate_5_" class="DatePicker 9 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="34" name="Duration[5]" id="Duration_5_" class="DurationChange 9">

                </td>
                <td></td>
                <td>3</td>
             </tr>





             <tr class="3.1.2" id="row-6" style="color: orange;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task10

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[6]" id="StartDate_6_" class="DatePicker 10 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="12" name="Duration[6]" id="Duration_6_" class="DurationChange 10">

                </td>
                <td>04/10/2010</td>
                <td>2</td>
             </tr>





             <tr class="3.2" id="row-7" style="color: red;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    task5

                </td>
                <td style="text-align: center;">
                <input type="text" value="25/10/2010" style="text-align: center;" name="StartDate[7]" id="StartDate_7_" class="DatePicker 5 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="3" name="Duration[7]" id="Duration_7_" class="DurationChange 5">

                </td>
                <td></td>
                <td>1</td>
             </tr>





             <tr class="3.3" id="row-8" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    001

                </td>
                <td style="text-align: center;">
                <input type="text" value="19/10/2010" style="text-align: center;" name="StartDate[8]" id="StartDate_8_" class="DatePicker 7 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="5" name="Duration[8]" id="Duration_8_" class="DurationChange 7">

                </td>
                <td>23/10/2010</td>
                <td>1</td>
             </tr>





             <tr class="4" id="row-9" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task4

                </td>
                <td style="text-align: center;">
                15/01/2011

                </td>
                <td>
                5

                </td>
                <td></td>
                <td></td>
             </tr>




    </tbody>
    </table>
Solution

  • i solved this problem by putting the div in td and assigning resizable class to td instead of td itself. its now working fine both in IE and firefox