"input-group-text" help

[jPaulB]

Hi Everybody,

I'm making myself nuts trying to move the text "Gender" several spaces. I could do it with a series of   tags but I would prefer a CSS method if I can.
However, if I add "text-indent: 1.25rem;" statement to the ".input-group-text" class I indent everything, including the font-awesome icon. I don't want to do that, I just want to position the text "gender".

How do I do that in the CSS code?

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h1><span class="input-group-text"><i class="fa fa-transgender-alt" style="color: #0000FF" arial-hidden="true"></i>Gender</span></h1>
                        <div class="box1">
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="cGender1" name="cGender" value="No Answer" checked />
                                    <label class "form-check-label" for'cGender1'>Declined</label>
                                </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="cGender2" name="cGender" value="Male" />
                                    <label class "form-check-label" for'cGender2'>Male</label>
                                </div>
                                  <div class="form-check">
                                    <input type="radio" class="form-check-input" id="cGender3" name="cGender" value="Female" />
                                    <label class "form-check-label" for'cGender3'>Female</label>
                                </div>
                            </div>
                         </div>

.input-group-text {
    border-color: #000000 ;
    border-width: 0.125rem;
    background-color: #00FFCC;
    max-width: 3.00rem;
    font-family:  Cabin SemiBold, sans-serif;
}

 

[BigDady]

Since you only gave css for the input-group-text' I don't know how this will affect other things. Try adding this to the CSS

h1{
    padding-left: 100px;
}

 

[jPaulB]

Hi BigDady,
Once again, you've pointed me in a good direction.
Putting the padding-left: 100px; comment inside the h1{ } class didn't work, it would move the whole block not just the text part.
What did work though, was to create a new class and place the padding-left: 100px; comment along with any other tweaks I wanted. I called the new class "spread".
Then I can just use a <span class="spread">TEXT</span> and it works just fine.
(I didn't know I could do that)
So thank you for your time with my issue. I appreciate you.

 

[BigDady]

Thank You Very Much

 

[VBService]

Why did write down attributes "class" and "for" for <label> in that way?

<label class "form-check-label" for'cGender1'>Declined</label>
<label class "form-check-label" for'cGender2'>Declined</label>
<label class "form-check-label" for'cGender3'>Declined</label>

This is the correct notation so that <label> in the case of the "for" attribute will do its job properly.
In that way you can click even over the text to set mark as check in radio.

<label class="form-check-label" for="cGender1">Declined</label>
<label class="form-check-label" for="cGender2">Male</label>
<label class="form-check-label" for="cGender3">Female</label>

 

[jPaulB]

Hi VBService

If you meant the use of different quotation marks ".." and '..' , I did correct this in my code.
It didn't appear to behave any differently than I expected but that is with minimal testing. If
it started to twerk, I would never find it again.
Thanks for taking the time to reply.

 

[VBService]

If you meant the use of different quotation marks ".." and '..'

not exactly, you just forgot use = (equal sign)

attribute="value"


all entries mean the same and are correct
attribute=value
attribute="value"
attribute='value'

 

[VBService]

If you <label> start working properly, check what you can do e.g.

[ on-line ]

<div class="row">
  <div class="col-sm-6 form-group">
    <h1>
      <span class="input-group-text">
        <i class="fa fa-transgender-alt" style="color: #0000FF" arial-hidden="true"></i>
        <span class="spread">Gender</span>       
      </span>
    </h1>
    <div class="box1">
      <div class="form-check">
        <input type="radio" class="form-check-input" id="cGender1" name="cGender" value="No Answer" checked />
        <label class="form-check-label" for="cGender1">Declined</label>
      </div>
      <div class="form-check">
        <input type="radio" class="form-check-input" id="cGender2" name="cGender" value="Male" />
        <label class="form-check-label" for="cGender2">Male</label>
      </div>
      <div class="form-check">
        <input type="radio" class="form-check-input" id="cGender3" name="cGender" value="Female" />
        <label class="form-check-label" for="cGender3">Female</label>
      </div>
    </div>
  </div>
</div>

<style>
  body {
    background-color: #84e1b2;
  }
  .row { /* element with class name row is a parent for box1, spread, etc. */
    --left: 100px;
  }
  .row * {
    box-sizing: border-box;
  }
  .box1 {
    border: 2px solid #009900;
    border-radius: 1rem;
    padding: 1rem 0 1rem 1.5rem;
    margin-left: var(--left);
    max-width: 110px;
    background-color: #b3ffb2;
  }
  .box1 [type="radio"] {
    display: none;
  }
  .box1 label {
    position: relative;
    font-size: 1.1rem;
    cursor: pointer;
  }
  .box1 [type="radio"]:checked + label::before {
    position: absolute;
    content: '\2605';
    top: -.6rem;
    left: -1.4rem;
    color: #009900;
    font-size: 1.6rem;
  }
  .input-group-text {
    border-color: #000000 ;
    border-width: 0.125rem;
    background-color: #00FFCC;
    max-width: 3.00rem;
    font-family:  Cabin SemiBold, sans-serif;
  }
  .spread {
    padding-left: var(--left);
  }
</style>

[ on-line ]

<div class="row">
  <div class="col-sm-6 form-group">
    <h1>
      <span class="input-group-text">
        <i class="fa fa-transgender-alt" style="color: #0000FF" arial-hidden="true"></i>
        <span class="spread">Gender</span>           
      </span>
    </h1>
    <div class="box1">
      <div class="form-check">
        <input type="radio" class="form-check-input" id="cGender1" name="cGender" value="No Answer" checked />
        <label class="form-check-label" for="cGender1">Declined</label>
      </div>
      <div class="form-check">
        <input type="radio" class="form-check-input" id="cGender2" name="cGender" value="Male" />
        <label class="form-check-label" for="cGender2">Male</label>
      </div>
      <div class="form-check">
        <input type="radio" class="form-check-input" id="cGender3" name="cGender" value="Female" />
        <label class="form-check-label" for="cGender3">Female</label>
      </div>
    </div>
  </div>
</div>

<style>
  body {
    background-color: #84e1b2;
  }
  .row { /* element with class name row is a parent for box1, spread, etc. */
    --left: 100px;
  }
  .row * {
    box-sizing: border-box;
  }
  .box1 {   
    border: 2px solid #009900;
    border-radius: 1rem;
    padding: 1rem 0 1rem 1.5rem;
    margin-left: var(--left);
    max-width: 110px;
    background-color: #b3ffb2;
  }
  .box1 [type="radio"] {
    display: none;
  }
  .box1 label {
    position: relative;
    font-size: 1.1rem;
    cursor: pointer;
  }
  .box1 [type="radio"]:not(:checked) + label::before {
    position: absolute;
    content: '\2024';
    top: -1.1rem;
    left: -1rem;
    color: #009900;
    font-size: 2rem;   
  }
  .box1 [type="radio"]:checked + label::before {
    position: absolute;
    content: '\2605';
    top: -.6rem;
    left: -1.4rem;
    color: #009900;
    font-size: 1.6rem;
  } 
  .input-group-text {
    border-color: #000000 ;
    border-width: 0.125rem;
    background-color: #00FFCC;
    max-width: 3.00rem;
    font-family:  Cabin SemiBold, sans-serif;
  }
  .spread {
    padding-left: var(--left);
  }
</style>

[ HTML Symbols, Entities and ASCII Character Codes ]