CODEWITHSUNDEEP
htmlcss
YSuraj
YSuraj

Reputation: 417

CSS height effect on cross-browser?

Running on Chrome displays the expected result. Running same code on Mozilla-Firefox displays unexpected result. So, what will be the solution to get the Chrome result in Mozilla-Firefox?

textarea{ 
         height : 100%;
         position:absolute;
         
         }
<table>
  <tr>
    <td><input type="text"></td>
    <td rowspan=4><textarea></textarea></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td rowspan=4><textarea></textarea></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  
  </table>

Upvotes: 0

Views: 71

Answers (4)

balapa
balapa

Reputation: 240

I know this is a hack, but you can use position absolute to the textarea, so it can set its height to 100%.

.textarea-wrapper {
  position: relative;
}

textarea{
  height : 100%;
  /* firefox fix */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
<table>
  <tr>
    <td><input type="text"></td>
    <td class="textarea-wrapper" rowspan=4><textarea></textarea></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  </table>

Upvotes: 0

Johann Kratzik
Johann Kratzik

Reputation: 794

You can set the textarea to position: absolute. Tested and works on Firefox Mac.

.textarea-td {
    position: relative;
}

textarea{
    height : 100%;
    position: absolute;
    top: 0;
    box-sizing: border-box
        /* so it really takes the same height as the inputs */
}
<table>
  <tr>
    <td><input type="text"></td>
    <td rowspan=4 class="textarea-td"><textarea></textarea></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  </table>

Upvotes: 1

ItsOdi1
ItsOdi1

Reputation: 219

Don't forget! Height of an element is relative to its parent.

You want to set the height to an element which has no information how high is height. You have to give the parent element a height. Look at this:

tr, td, textarea {
    height: 100%;
}
<table>
  <tr>
    <td><input type="text"></td>
    <td rowspan=4><textarea></textarea></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  <tr>
    <td><input type="text"></td>
  </tr> 
  </table>

Upvotes: 2

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

You can Try This type of Manner styling in your table then its resolves easily ,So Please mention height and widths for your table and for its inner elements always .

textarea{ height : 100%; }
td{padding-right:10px;}
<table width="100%">
  <tr height="25">
    <td><input type="text" style="width:100%;"></td>
    <td rowspan=4><textarea style="width:100%;"></textarea></td>
  </tr> 
  <tr height="25">
    <td><input type="text" style="width:100%;"></td>
  </tr> 
  <tr height="25">
    <td><input type="text" style="width:100%;"></td>
  </tr> 
  <tr height="25">
    <td><input type="text" style="width:100%;"></td>
  </tr> 
  </table>

Upvotes: 0

Related Questions