What does the `<div class="rowTab">` do in the FCC Survey Form

I was looking at the source code of the FCC Survey Form example and I can see that each label and input field is wrapped in a div with the class rowTab (example below) but there is no such class in the CSS part and removing it doesn’t change anything. What is the purpose of that div?

    <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

Sounds like it’s a table row.
Can you style it as you want?

I haven’t had a look at the coding yet but if you go to css and java files and control-f ‘rowTab’ it should show you what it does.

The class does not appear in CSS or JS files. I added a border: solid; and each label and input field got surrounded by a border, so it is basically a div to hold together the label and the field, but I don’t understand why there is a class that doesn’t do anything. Is it just so we know what that div does?

I have the same query. I want to see what this class does.

I checked the console- it said something like derived from html

and the css began with>
html,

Anyone ever figure this out after?

It could be a mistake… (if it is really not being styled at all)
The sample code is just a sample, you should do your own thing.

1 Like

I have the same question, and I tried to use left click on the page, and use Ctrl + A, then found there’s a small block which is help align texts and boxes, as showed in the attached picture, good to know this

if you try to delete the first rowTab class, you’ll notice it as there’re 2 more rowTab class below, my understanding is it’s just for alignment, for sure we can change what it would be showed on the page, like size .

1 Like

It is just a logical container for each row in the form. It makes the form elements stack nicely. There are other post concerning this topic that go into more detail. If you’re really interested, you might search for those

1 Like

I have the same question because I do not see this class in the CSS.

Hi all, I am working on this right now and I tried to visualize these elements by putting border for all of them where they actually start and where they finish. You can figure out by color in the CSS which I embedded into the picture and by color of the border.

2 Likes

I was having a difficult time understanding this as well. I like most others are pretty new at this so I eventually took each label and corresponding form and grouped it one

called forms with no style. Good practice to put a border in the CSS to better identify it. Some of these posts are really helpful, i like the one by Stookie, but even better I needed the explanation that the “rowTab” div is mainly there for filler to keep align. I imagine this isnt the only way to do this. Thanks!