What is the rowTab div doing in the survey form project?

HTML-CSS
1

I’m trying to understand how the form works and I’ve read the MDN doc on structuring a form. What is the purpose of the divs with rowTab or rightTab?

**<div class="rowTab">**
  <div class="labels">
    <label id="name-label" for="name">* Name: </label>
  </div>
  **<div class="rightTab">**
    <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
  </div>
</div>
1 Like
2

I think you are referring to the sample survey that FCC provides. Understanding this rowTab or rightTab requires reading the associated css. Web devs. usually use divs to group elements stylistically or spatially.

3

Hi
<div class="rowTab"> makes each question stack nicely one atop the other and allows for them to be aligned to the center. This also creates a common container for children to align themselves with. Note that rightTab pushes off this div with some top margin.

It makes sense logically too - 1 rowTab div for each question.

<div class="rightTab"> and <div class="labels"> are styled as inline-block so they don’t start a new row. These are containers that are target of css styles to help align the unique content properly. Note the left / right alignment of the text and subtle adjustments to keep the label content inline with the input content.

3 Likes
4

I was wondering the same thing because I do not see

rowtab

in the CSS code of the project in codepen. Is it in the javascript of this pen?

1 Like