CODEWITHSUNDEEP
htmlcss
user15573857
user15573857

Reputation:

Gap between <select> tag when user selecting

I'm creating a form and in that form I have multiple <select> tags but
when I press Ctr + A I get gaps and whitespaces in the selection like this:

enter image description here

This happens in every browser except Firefox
I tried completely removing the whitespace and newlines from the code but it still didn't work
any idea how to fix this?

Jsfiddle

Source Code:

* {
  margin: 0;
}

form {
  background-color: black;
  color: white;
  padding: 2rem 2rem 1rem 2rem;
}

fieldset {
  border: 0;
}

form label {
  margin: 2rem 1rem 1rem 0;
  display: inline-block;
}
<form>
  <fieldset>

    <label><span style="color:red">* </span>Must fill</label><select>
      <option>option 1</option>
    </select><br>
    <hr>

    <label> generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select><br>

    <label> another generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select><br>
    <label>Fill Info</label><br>
    <textarea></textarea><br>

    <label>Fill other info<br>(additional)</label><br>
    <textarea></textarea><br>

    <button>Send</button>
     </fieldset>
</form>

Upvotes: 3

Views: 120

Answers (3)

user15573857
user15573857

Reputation:

I found the solution! It was stupidly simple:

br{
  user-select: none;
}

Upvotes: 0

Random Kindle
Random Kindle

Reputation: 520

Maybe this will help

* {
  margin: 0;
}

form {
  background-color: black;
  color: white;
  padding: 2rem 2rem 1rem 2rem;
}

fieldset {
  border: 0;
}

label {
  margin: 2rem 0rem 1rem 0;
  display: inline-block;
}
<form>
  <fieldset>
    <label style="margin-right: 1rem;">
      <span style="color:red">* </span>Must fill</label>
    <select>
      <option required>option 1</option>
    </select>
    <br>
    <hr>
    <label> generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select>
    <br>
    <label> another generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select>
    <br>
    <label>Fill Info</label><br>
    <textarea></textarea>
    <br>
    <label>Fill other info<br>(additional)</label><br>
    <textarea></textarea>
    <br>
    <button>Send</button>
  </fieldset>
</form>

Changed

form label {
  margin: 2rem 1rem 1rem 0;
  display: inline-block;
}

to

label {
  margin: 2rem 0rem 1rem 0;
  display: inline-block;
}

added margin-right: 1rem for the first <label>

I think you should reduce some more margin b/w them to remove the other spaces\gaps.

Upvotes: 1

Techy Shadow
Techy Shadow

Reputation: 359

You should use position: absolute along with top and left this helps you to reposition your labels however you want without making a gap.

Try this code 

* {
  margin: 0;
  padding: 0;
}

form {
  background-color: black;
  color: white;
  position: relative;
  top: {adjust as per need};
  left: {adjust as per need};
}

fieldset {
  border: 0;
}

form label {
  top: {adjust as per need};
  left: {adjust as per need};
  display: inline-block;
}
<form>
  <fieldset>

    <label><span style="color:red">* </span>Must fill</label><select>
      <option>option 1</option>
    </select><br>
    <hr>

    <label> generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select><br>

    <label> another generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select><br>
    <label>Fill Info</label><br>
    <textarea></textarea><br>

    <label>Fill other info<br>(additional)</label><br>
    <textarea></textarea><br>

    <button>Send</button>
     </fieldset>
</form>

Visit here to know more about positions

Also as per @Sfili_81 said you can also simply remove/or adjust the margin and you wont have gaps

Upvotes: 0

Related Questions