"input-group-text" help

Joined
Aug 16, 2022
Messages
52
Reaction score
2
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".

Screenshot 2023-08-10 094343.png


How do I do that in the CSS code?

HTML:
                    <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>


CSS:
.input-group-text {
    border-color: #000000 ;
    border-width: 0.125rem;
    background-color: #00FFCC;
    max-width: 3.00rem;
    font-family:  Cabin SemiBold, sans-serif;
}
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
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
Code:
h1{
    padding-left: 100px;
}
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
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.
 
Joined
Jul 4, 2023
Messages
463
Reaction score
56
Why did write down attributes "class" and "for" for <label> in that way?
HTML:
<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.
HTML:
<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>
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
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.
 
Joined
Jul 4, 2023
Messages
463
Reaction score
56
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'
 
Last edited:
Joined
Jul 4, 2023
Messages
463
Reaction score
56
If you <label> start working properly, check what you can do ;) e.g.

[ on-line ]
HTML:
<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 ]
HTML:
<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 ]
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,913
Messages
2,570,027
Members
46,420
Latest member
IsobelScha

Latest Threads

Top