My elements not taking same height

Question

I have to arrange my input text elements vertically. and with same height to all of them. I can make custom css class with height say height = "30px", It works perfect but when i zoom in or zoom out in browser there height increases or decreases.

How i can write correct css class to work them properly

ok this is complte html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Feedback System</title>


    <script src="Jquery/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="Jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>

    <link href="CSS/Header.css" rel="stylesheet" type="text/css" />
    <link href="Jquery/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    .textbox
    {
        font-weight:bold;
    }    
        td  
        {
            border:solid 1px #c1c1c1;
        }
        .style9
        {
            width: 500px;
            border: 1px solid #00FFFF;
            height: 442px;
        }        
        .no
        {
            width:50px;
            text-align:center;
        }
        .ques
        {
            width:250px;
        }
        .column
        {
            width:100px;
            height:100%;
            float:left;
            border:none;
            border-right:solid 1px gray;
            overflow:hidden;
        }
        .ans_cell
        {
            width:94px;
        }
        input{
                width:100%;
                line-height:27.5px;
                height:auto;
                display:block;  
                text-align:center;    
            } 
    </style>

    <script type="text/javascript">

    </script>
</head>
<body>



<div id="tabbox" 
    style="top: 160px; left: 7px; position: absolute; height: 38px; width: 100%; text-align: center;" 
    class="style6">
    Feedback Form</div>


<div style="top: 216px; left: 98px; position: absolute; border-radius:20px; border-bottom:solid 1px #33ccff; height: 61px; width: 86%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; border-left-style: none; border-left-color: inherit; border-left-width: medium; border-right-style: none; border-right-color: inherit; border-right-width: medium; border-top-style: none; border-top-color: inherit; border-top-width: medium;">

    <div style="top: 10px; float:left; left: 81px; position: absolute; height: 19px; width: 93%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; margin-left: 40px;">
        <div style="position:absolute; top: 0px; left: -79px; width: 467px; margin-left: 80px;">Name : 
            <span class="style7">Yadav Sagar Sampatrao</span></div>
        <div style="position:absolute; top: 1px; left: 479px; width: 179px; right: 449px;">
            Roll No : <span class="style7">4242</span></div>
        <div style="position:absolute; top: 0px; left: 675px; width: 177px; right: 255px;">Class : 
            <span class="style7">B. E.</span></div>
        <div style="position:absolute; top: -1px; left: 883px; width: 219px;">Deparment : 
            <span class="style7">CSE</span></div>
    </div>

</div>

    <div style="position:absolute; top: 314px; left: 126px; width: 1119px; height: 499px; border:solid 1px #c1c1c1;">

        <table class="style9">
            <tr id="sub_name">
                <td class="no">
                    Sr. No.</td>
                <td class="ques" style="text-align:right;">
                    subject</td>
            </tr>
            <tr id="teacher_name">
                <td class="no">
                    &nbsp;</td>
                <td class="ques">
                    Parmeters to be Evaluated / Name of Teacher</td>
            </tr>
            <tr id="Tr1">
                <td class="no">
                    1</td>
                <td class="ques">
                    Punctuality and Regularity</td>
            </tr>
            <tr id="Tr2">
                <td class="no">
                    2&nbsp;</td>
                <td class="ques">
                    Subject Knowledge and Preparation</td>
            </tr>
            <tr id="Tr3">
                <td class="no">
                    3</td>
                <td class="ques">
                    Clarity of Communication Skilll and Speed of Delivery</td>
            </tr>
            <tr id="Tr4">
                <td class="no">
                    4</td>
                <td class="ques">
                    Clarity of writing on Black Board</td>
            </tr>
            <tr id="Tr5">
                <td class="no">
                    5</td>
                <td class="ques">
                    Use of teaching aids (ex- PPT, OHP, Models, Charts)</td>
            </tr>
            <tr id="Tr6">
                <td class="no">
                    6</td>
                <td class="ques">
                    Timely completion of Syllabus</td>
            </tr>
            <tr id="Tr7">
                <td class="no">
                    7</td>
                <td class="ques">
                    Understanding and Interest Generated in Subject</td>
            </tr>
            <tr id="Tr8">
                <td class="no">
                    8</td>
                <td class="ques">
                    Efforts improving academic performance of Students</td>
            </tr>
            <tr id="Tr9">
                <td class="no">
                    9</td>
                <td class="ques">
                    Class Control and Discipline</td>
            </tr>
            <tr id="Tr10">
                <td class="no">
                    10</td>
                <td class="ques">
                    Availability Outside Classroom for Discussion</td>
            </tr>
            <tr id="Tr11">
                <td class="no">
                    11</td>
                <td class="ques">
                    The attitude of Teacher towards Student</td>
            </tr>

        </table>
        <div id="ans_window" style="position:absolute; top: 0px; left: 501px; width: 616px; height: 441px; border:solid 1px #33ccff;">
            <div class="column">
                <input type="text" disabled="disabled" />
                <input type="text" disabled='disabled'/>
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
            </div> 
            <div class="column"></div>               
        </div>
    </div>
</body>
</html>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Dec 28 '15 at 13:44
Do you need whole html code of this page i can paste that.... — Sagar Yadav, Dec 28 '15 at 14:02
we need the code and css of the element that includes the left table html code with the '
' that you already gave us — Vinc, Dec 28 '15 at 14:07

score 0 · Answer 1 · edited Dec 28 '15 at 21:07

0

Nest the input element in the table's column and set the height to inherit.

edited Dec 28 '15 at 21:07

Shay Rojansky

15,357
2
40
69

answered Dec 28 '15 at 13:46

AsimRazaKhan

2,154
3
22
36

no i cannot i have make add these html elements dynamically with php code and later i have to take values from them which user will enter in this textbox and have to save them in mysql – Sagar Yadav Dec 28 '15 at 13:47
oky, so may be you need to use em or % not px for the height and width. – AsimRazaKhan Dec 28 '15 at 13:48
also there will be more than one column right to this displayed in image – Sagar Yadav Dec 28 '15 at 13:49
you should give us a sample of your code on a working fiddle so that we can check that. – AsimRazaKhan Dec 28 '15 at 13:52
when i place 100% to input in css it becomes 100% to all of them and displaying very big textboxes – Sagar Yadav Dec 28 '15 at 13:52
I can display textboxes with same height by giving height to them by common css class. But only problem is When zoom in and zoom out performed they are not filling the whole height of there parent div – Sagar Yadav Dec 28 '15 at 13:58
set the margin equals 0 of the input fields. – AsimRazaKhan Dec 28 '15 at 14:11

score 0 · Answer 2 · answered Dec 28 '15 at 14:00

0

Change the CSS for input element as follow:

input{
                width:100%;
                line-height:27.5px;
                height:auto;
                display:block;  
                text-align:center;    
            }

answered Dec 28 '15 at 14:00

Shaher Jamal Eddin

462
4
17

no still there is problem same as displayed in image – Sagar Yadav Dec 28 '15 at 14:05
Could you try without the other divs around it? they might be the reason for the issue.. – Shaher Jamal Eddin Dec 28 '15 at 14:12

score 0 · Answer 3 · edited May 23 '17 at 11:44

unless you don't give us a fiddle we can't give you a straight answer!

But i answered yesterday something about the zooming on browsers that you can see it here .

So 'maybe' (cause we have no full code yet) there is a problem on your border width cause its not the same with your left table! Does the problem exists in IE? Try insdead of using 'border', the 'outline' css style in order to avoid messing with zooming...

EDIT: i've made some changes on yout code to find the problem cause it was little messy. Here is the snippet that works in my browsers, i hope it helps:

.textbox
{
    font-weight:bold;
}

.no
{
    width:50px;
    text-align:center;
}
.ques
{
    width:250px;
}
.ans_cell
{
    width:94px;
}

.column
{
    position: relative;
    width:100px;
    display: table;
}
.column input{
    height:32px;
    vertical-align :middle;
    width:100%;
    display:table-cell;
    padding:1px;
    outline:1px solid black;
    text-align:center;
}

.tableone {
    position:absolute;
    top: 314px;
    left: 126px;
    width: 1119px;
    height: 499px;
    border:solid 1px #c1c1c1;
}

.style9 td
{
    height:34px;
    outline:solid 1px #c1c1c1;
}

.style9 .ques {
    width: 500px;
}
.style9
{
    position: relative;
    display: inline-block;
}

#ans_window {
    position:relative;
    display: inline-block;
    border:solid 1px #33ccff;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Feedback System</title>


    <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="Jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>

    <link href="css/style2.css" rel="stylesheet" type="text/css" />
    <link href="Jquery/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

    </script>
</head>
<body>



<div id="tabbox"
     style="top: 160px; left: 7px; position: absolute; height: 38px; width: 100%; text-align: center;"
     class="style6">
    Feedback Form</div>


<div style="top: 216px; left: 98px; position: absolute; border-radius:20px; border-bottom:solid 1px #33ccff; height: 61px; width: 86%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; border-left-style: none; border-left-color: inherit; border-left-width: medium; border-right-style: none; border-right-color: inherit; border-right-width: medium; border-top-style: none; border-top-color: inherit; border-top-width: medium;">

    <div style="top: 10px; float:left; left: 81px; position: absolute; height: 19px; width: 93%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; margin-left: 40px;">
        <div style="position:absolute; top: 0px; left: -79px; width: 467px; margin-left: 80px;">Name :
            <span class="style7">Yadav Sagar Sampatrao</span></div>
        <div style="position:absolute; top: 1px; left: 479px; width: 179px; right: 449px;">
            Roll No : <span class="style7">4242</span></div>
        <div style="position:absolute; top: 0px; left: 675px; width: 177px; right: 255px;">Class :
            <span class="style7">B. E.</span></div>
        <div style="position:absolute; top: -1px; left: 883px; width: 219px;">Deparment :
            <span class="style7">CSE</span></div>
    </div>

</div>

<div class="tableone">
    <table class="style9">
        <tr id="sub_name">
            <td class="no">
                Sr. No.</td>
            <td class="ques" style="text-align:right;">
                subject</td>
        </tr>
        <tr id="teacher_name">
            <td class="no">
                &nbsp;</td>
            <td class="ques">
                Parmeters to be Evaluated / Name of Teacher</td>
        </tr>
        <tr id="Tr1">
            <td class="no">
                1</td>
            <td class="ques">
                Punctuality and Regularity</td>
        </tr>
        <tr id="Tr2">
            <td class="no">
                2&nbsp;</td>
            <td class="ques">
                Subject Knowledge and Preparation</td>
        </tr>
        <tr id="Tr3">
            <td class="no">
                3</td>
            <td class="ques">
                Clarity of Communication Skilll and Speed of Delivery</td>
        </tr>
        <tr id="Tr4">
            <td class="no">
                4</td>
            <td class="ques">
                Clarity of writing on Black Board</td>
        </tr>
        <tr id="Tr5">
            <td class="no">
                5</td>
            <td class="ques">
                Use of teaching aids (ex- PPT, OHP, Models, Charts)</td>
        </tr>
        <tr id="Tr6">
            <td class="no">
                6</td>
            <td class="ques">
                Timely completion of Syllabus</td>
        </tr>
        <tr id="Tr7">
            <td class="no">
                7</td>
            <td class="ques">
                Understanding and Interest Generated in Subject</td>
        </tr>
        <tr id="Tr8">
            <td class="no">
                8</td>
            <td class="ques">
                Efforts improving academic performance of Students</td>
        </tr>
        <tr id="Tr9">
            <td class="no">
                9</td>
            <td class="ques">
                Class Control and Discipline</td>
        </tr>
        <tr id="Tr10">
            <td class="no">
                10</td>
            <td class="ques">
                Availability Outside Classroom for Discussion</td>
        </tr>
        <tr id="Tr11">
            <td class="no">
                11</td>
            <td class="ques">
                The attitude of Teacher towards Student</td>
        </tr>

    </table>
    <div id="ans_window" >
        <div class="column">
            <input type="text" disabled="disabled" />
            <input type="text" disabled='disabled'/>
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </div>
        <div class="column"></div>
    </div>
</div>
</body>
</html>

:( what is "fiddle" i am confused with word. Is it complete code of html. — Sagar Yadav, Dec 28 '15 at 14:08
just click on it and you will see. i just made one with what you have given us untill now: https://jsfiddle.net/834kL8cf/ — Vinc, Dec 28 '15 at 14:10

score 0 · Answer 4 · answered Dec 28 '15 at 14:39

0

Add this to your css file

input[type=text]{height:30px !important;}

answered Dec 28 '15 at 14:39

Pradeep Sambandam

685
4
10

Not working :( still little bit space at bottom of all textboxes – Sagar Yadav Dec 28 '15 at 14:44
In desktop version itself or on resizing the screen? – Pradeep Sambandam Dec 28 '15 at 14:47
So you can try adding a @media based on the screen size and modify the height value as needed. – Pradeep Sambandam Dec 28 '15 at 14:59

My elements not taking same height

4 Answers4