Repeating Row display issue

I have textareas that are displaying beyond the row. I want the row to be sized to the height of the textarea. I cannot get the row in the fieldset to change height.

<div class="sheet-row sheet-row-details">
	<div class="sheet-cell sheet-col0"><textarea class="sheet-ritualdesc" name="attr_ritualdescr" placeholder="Ritual Description"></textarea></div>
	<div class="sheet-cell sheet-col1"><textarea class="sheet-ritualcast" name="attr_ritualcasting" placeholder="Typical Casting"></textarea></div>
</div>
</fieldset>

.sheet-rituals .sheet-row-details { height: 60px; }
.sheet-rituals .sheet-row-details .sheet-col0 {
	width: calc(50% - 28px - 0.4em);
	margin-left: 20px;
	}
.sheet-rituals .sheet-row-details .sheet-col0 textarea {
	width: 100%;
	height: 60px;
	resize: none;
	}
.sheet-rituals .sheet-row-details .sheet-col1 {
	width: calc(50% - 28px - 0.4em);
	margin-left: 8px;
	}
.sheet-rituals .sheet-row-details .sheet-col1 textarea { 
	width: 100%;
	height: 60px;
	resize: none;
	}

Is there a reason you're using textarea instead of just a text input?

Yes the Ritual Description and Typical Casting is usually a short paragraph

I ask, because the boxes aren't resizable, so not sure how useful they'll be in that regard.  

To answer your question, though, how  tall is the row? Because you can force the text area to be that size. I'm going to guess somewhere around 60px.  You'll likely need to make the text area a little smaller than that, due to border widths, paddings and margins.

That's my point. I have already tried to change the row height of the rows in the div. I have looked at the row height in .repitem. So I am trying to figure out what to do next.

I'm going to need more of the code to take a look. I pasted the above in a character sheet and I don't get the full row view.

Right. As soon as I can I'll post it.

Cool.  This may also help: https://stackoverflow.com/questions/20933266/what-is-the-minimum-height-of-a-textarea-in-css

You may need to adjust the minimum number of rows and/or line-height.

CSS:

.sheet-rituals { width: calc(100% - 0.4em); height: auto !important;}
.sheet-ritualheader .sheet-col0 { width: calc( 100% - 320px - 0.4em) ; }
.sheet-ritualheader .sheet-col1 { width: 80px; }
.sheet-ritualheader .sheet-col2 { width: 80px; }
.sheet-ritualheader .sheet-col3 { width: 80px; }
.sheet-ritualheader .sheet-col4 { width: 80px; }
.repcontainer .repeating-rituals { height: inital; overflow: auto; }
.sheet-rituals .repeating-rituals .repitem { height: inital; overflow: auto; }

.sheet-row-rituals .sheet-col0 { width: 22px; margin-left: 30px; } /*Button*/
.sheet-row-rituals .sheet-col1 { width: calc(100% - 378px - 0.4em); } /*Name*/
.sheet-row-rituals .sheet-col1 input { text-align:left; }
.sheet-row-rituals .sheet-col2 { width: 80px; }
.sheet-row-rituals .sheet-col3 { width: 80px; }
.sheet-row-rituals .sheet-col4 { width: 80px; }
.sheet-row-rituals .sheet-col5 { width: 80px; }

.sheet-rituals .sheet-row-details { height: 60px; }
.sheet-rituals .sheet-row-details .sheet-col0 {
	width: calc(50% - 28px - 0.4em);
	margin-left: 20px;
	}
.sheet-rituals .sheet-row-details .sheet-col0 textarea {
	width: 100%;
	height: 60px;
	resize: none;
	}
.sheet-rituals .sheet-row-details .sheet-col1 {
	width: calc(50% - 28px - 0.4em);
	margin-left: 8px;
	}
.sheet-rituals .sheet-row-details .sheet-col1 textarea { 
	width: 100%;
	height: 60px;
	resize: none;
	}

HTML:

<div class='sheet-box sheet-rituals'> <!-- Rituals Container -->
	<div class="sheet-table sheet-ritualtable">
		<div class="sheet-header sheet-ritualheader">
			<div class="sheet-cell sheet-col0">Ritual Name</div>
			<div class="sheet-cell sheet-col1">Energy</div>
			<div class="sheet-cell sheet-col2">Skill</div>
			<div class="sheet-cell sheet-col3">Damage</div>
			<div class="sheet-cell sheet-col4"><div class="sheet-popup">Type</div><span class="sheet-tooltip">
			<table>
				<thead>
					<tr>
						<th>Abbr</th>
						<th>Multiplier</th>
						<th>Name</th>
					</tr>
				</thead>
				<tbody>
					<tr><td>cut</td> <td>x1.5</td><td>Cutting</td></tr>
					<tr><td>imp</td> <td>x2.0</td><td>Impaling</td></tr>
					<tr><td>cr</td>  <td>x1.0</td><td>Crushing</td></tr>
					<tr><td>pi-</td> <td>x0.5</td><td>Small Piercing</td></tr>
					<tr><td>pi</td>  <td>x1.0</td><td>Piercing</td></tr>
					<tr><td>pi+</td> <td>x1.5</td><td>Large Piercing</td></tr>
					<tr><td>pi++</td> <td>x2.0</td><td>Huge Piercing</td></tr>
					<tr><td>aff</td> <td>-</td><td>Affliction</td></tr>
					<tr><td>burn</td><td>x1.0</td><td>Burning</td></tr>
					<tr><td>cor</td> <td>x1.0</td><td>Corrosion</td></tr>
					<tr><td>fat</td> <td>x1.0</td><td>Fatigue</td></tr>
					<tr><td>tox</td> <td>x1.0</td><td>Toxic</td></tr>
					<tr><td>spec</td><td>-</td><td>Special</td></tr>
				</tbody>
				</table></span>
				</div>
			</div>
			<fieldset class="repeating_rituals">
				<input class="sheet-toggle" type="checkbox" />
				<span class="sheet-checkbox"></span>
				<div class="sheet-row sheet-row-rituals">
					<div class="sheet-cell sheet-col0"><button type="roll" name="attr_weaponroll" value="@{whispermode} &{template:GURPS} {{roll= [[3d6]] }} @{vs} {{target= [[@{skill} + @{modifier}]] }} {{charactername=@{character_name} }} {{rolltype=MAGIC}} {{rollname=@{ritualname}}} {{damagetype=@{type} }} {{woundmod=@{wound_modifier} }} {{notes=@{ritualnotes} }} {{damageroll=[[@{damage}]]}} {{hit-loc=[[ @{hitlocationroll} ]] }} {{critbody=[[ @{critbodytable} ]] }} {{crithead=[[ @{critheadtable} ]] }} {{success=([[@{skill} + (@{modifier} +1))]]}}" /></div>
					<div class="sheet-cell sheet-col1"><input type="text"  name="attr_ritualname" placeholder="Ritual Name"/></div>
					<div class="sheet-cell sheet-col2"><input type="number"  name="attr_ritualenergy" value="0" placeholder="0"/></div>
					<div class="sheet-cell sheet-col3"><input type="number" name="attr_skill" value="10" placeholder="0"/></div>
					<div class="sheet-cell sheet-col4"><input type="text"  name="attr_damage"placeholder="0"/></div>
					<div class="sheet-cell sheet-col5">
						<select name="attr_type">
							<option value="cut">Cutting (cut)</option>
							<option value="imp">Impaling (imp)</option>
							<option value="cr">Crushing (cr)</option>
							<option value="pi-">Small Piercing (pi-)</option>
							<option value="pi">Piercing (pi)</option>
							<option value="pi+">Large Piercing (pi+)</option>
							<option value="pi++">Huge Piercing (pi++)</option>
							<option value="aff">Affliction (aff)</option>
							<option value="burn">Burning (burn)</option>
							<option value="cot">Corrosion (cor)</option>
							<option value="fat">Fatigue (fat)</option>
							<option value="tox">Toxic (tox)</option>
							<option value="spc">Special (spc)</option>
						</select>
					</div>
				</div>
				<div class="sheet-row sheet-row-details">
					<div class="sheet-cell sheet-col0"><textarea class="sheet-ritualdesc" name="attr_ritualdescr" placeholder="Ritual Description"></textarea>
					</div>
					<div class="sheet-cell sheet-col1">
					<textarea class="sheet-ritualcast" name="attr_ritualcasting" placeholder="Typical Casting"></textarea>
					</div>
				</div>
			</fieldset>
		</div>
</div> <!-- ===== END SHEET-BOX SHEET-RITUALS ===== -->

Can you invite me to a game where I can see a character sheet in your environment? The code above still doesn't give me what you show in the screen shot above... I tried posting a pic, but the forums won't upload it... :-/

That's what I get with the code posted above...

Holy Crapizoids!!! I have fixed the textarea issue!!

There was a sheet-wrapper that set the height of the cells when it should have been set to height: inherit; . 

Thanks everyone for your input.

Here is the HTML and CSS

<div class='sheet-box sheet-rituals'> <!-- ===== BEGIN SHEET-BOX SHEET-RITUALS ===== -->
	<div class="sheet-table sheet-ritualtable">
		<div class="sheet-header sheet-ritualheader">
			<div class="sheet-cell sheet-col0">Ritual Name</div>
			<div class="sheet-cell sheet-col1">Energy</div>
			<div class="sheet-cell sheet-col2">Skill</div>
			<div class="sheet-cell sheet-col3">Damage</div>
			<div class="sheet-cell sheet-col4"><div class="sheet-popup">Type</div><span class="sheet-tooltip">
			<table>
				<thead>
					<tr>
						<th>Abbr</th>
						<th>Multiplier</th>
						<th>Name</th>
					</tr>
				</thead>
				<tbody>
					<tr><td>cut</td> <td>x1.5</td><td>Cutting</td></tr>
					<tr><td>imp</td> <td>x2.0</td><td>Impaling</td></tr>
					<tr><td>cr</td>  <td>x1.0</td><td>Crushing</td></tr>
					<tr><td>pi-</td> <td>x0.5</td><td>Small Piercing</td></tr>
					<tr><td>pi</td>  <td>x1.0</td><td>Piercing</td></tr>
					<tr><td>pi+</td> <td>x1.5</td><td>Large Piercing</td></tr>
					<tr><td>pi++</td> <td>x2.0</td><td>Huge Piercing</td></tr>
					<tr><td>aff</td> <td>-</td><td>Affliction</td></tr>
					<tr><td>burn</td><td>x1.0</td><td>Burning</td></tr>
					<tr><td>cor</td> <td>x1.0</td><td>Corrosion</td></tr>
					<tr><td>fat</td> <td>x1.0</td><td>Fatigue</td></tr>
					<tr><td>tox</td> <td>x1.0</td><td>Toxic</td></tr>
					<tr><td>spec</td><td>-</td><td>Special</td></tr>
				</tbody>
				</table></span>
				</div>
			</div>
			<fieldset class="repeating_rituals" style="display: none;">
				<input class="sheet-toggle" type="checkbox" />
				<span class="sheet-checkbox"></span>
				<div class="sheet-row sheet-row-rituals">
					<div class="sheet-cell sheet-col0"><button type="roll" name="attr_weaponroll" value="@{whispermode} &{template:GURPS} {{roll= [[3d6]] }} @{vs} {{target= [[@{skill} + @{modifier}]] }} {{charactername=@{character_name} }} {{rolltype=MAGIC}} {{rollname=@{ritualname}}} {{damagetype=@{type} }} {{woundmod=@{wound_modifier} }} {{notes=@{ritualnotes} }} {{damageroll=[[@{damage}]]}} {{hit-loc=[[ @{hitlocationroll} ]] }} {{critbody=[[ @{critbodytable} ]] }} {{crithead=[[ @{critheadtable} ]] }} {{success=([[@{skill} + (@{modifier} +1))]]}}" /></div>
					<div class="sheet-cell sheet-col1"><input type="text"  name="attr_ritualname" placeholder="Ritual Name"/></div>
					<div class="sheet-cell sheet-col2"><input type="number"  name="attr_ritualenergy" value="0" placeholder="0"/></div>
					<div class="sheet-cell sheet-col3"><input type="number" name="attr_skill" value="10" placeholder="0"/></div>
					<div class="sheet-cell sheet-col4"><input type="text"  name="attr_damage"placeholder="0"/></div>
					<div class="sheet-cell sheet-col5">
						<select name="attr_type">
							<option value="cut">Cutting (cut)</option>
							<option value="imp">Impaling (imp)</option>
							<option value="cr">Crushing (cr)</option>
							<option value="pi-">Small Piercing (pi-)</option>
							<option value="pi">Piercing (pi)</option>
							<option value="pi+">Large Piercing (pi+)</option>
							<option value="pi++">Huge Piercing (pi++)</option>
							<option value="aff">Affliction (aff)</option>
							<option value="burn">Burning (burn)</option>
							<option value="cot">Corrosion (cor)</option>
							<option value="fat">Fatigue (fat)</option>
							<option value="tox">Toxic (tox)</option>
							<option value="spc">Special (spc)</option>
						</select>
					</div>
				</div>
				<div class="sheet-row sheet-row-ritualdetails">
					<div class="sheet-cell sheet-col0"><textarea class="sheet-ritualdesc" name="attr_ritualdescr" placeholder="Ritual Description"></textarea>
					</div>
					<div class="sheet-cell sheet-col1">
					<textarea class="sheet-ritualcast" name="attr_ritualcasting" placeholder="Typical Casting"></textarea>
					</div>
				</div>
			</fieldset>
		</div>
</div> <!-- ===== END SHEET-BOX SHEET-RITUALS ===== -->

/* =========================== Rituals =================================*/
.repcontainer repeating_rituals[data-groupname="repeating_rituals"] > .repitem repeating_rituals{
    display: inline-block;
	height: inherit;
}
.sheet-rituals { width: calc(100% - 0.4em); height: auto !important;}
.sheet-ritualheader .sheet-col0 { width: calc( 100% - 320px - 0.4em) ; }
.sheet-ritualheader .sheet-col1 { width: 80px; }
.sheet-ritualheader .sheet-col2 { width: 80px; }
.sheet-ritualheader .sheet-col3 { width: 80px; }
.sheet-ritualheader .sheet-col4 { width: 80px; }

.sheet-ritualtable .sheet-row-rituals .sheet-col0 { width: 22px; margin-left: 30px; } /*Button*/
.sheet-ritualtable .sheet-row-rituals .sheet-col1 { width: calc(100% - 378px - 0.4em); } /*Name*/
.sheet-ritualtable .sheet-row-rituals .sheet-col1 input { text-align:left; }
.sheet-ritualtable .sheet-row-rituals .sheet-col2 { width: 80px; }
.sheet-ritualtable .sheet-row-rituals .sheet-col3 { width: 80px; }
.sheet-ritualtable .sheet-row-rituals .sheet-col4 { width: 80px; }
.sheet-ritualtable .sheet-row-rituals .sheet-col5 { width: 80px; }

.sheet-rituals .sheet-ritualtable .sheet-row-ritualdetails{
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    height: inherit;
}
.sheet-rituals .sheet-ritualtable .sheet-row-ritualdetails .sheet-col0 {
    width: 400px;
    margin-left: 20px;
}
.sheet-rituals .sheet-ritualtable .sheet-row-ritualdetails .sheet-col1 {
    width: 400px;
    margin-left: 8px;
}
.sheet-rituals .sheet-ritualtable .sheet-row-ritualdetails .sheet-col0 textarea.sheet-ritualdesc {
    width: 390px;
    min-height: 60px;
    resize: vertical;
}
.sheet-rituals .sheet-ritualtable .sheet-row-ritualdetails .sheet-col1 textarea.sheet-ritualcast {
    width: 390px;
    min-height: 60px;
    resize: vertical;
}

I know the feeling, I spent the past two days trying to figure out where an extra 5px was coming from, because it kept things from lining up properly.

Glad you got it sorted. :)