Never tried this and not near computer but what about adding a font awesome icon at the end of the text input?
Good idea, thanks, I tried this but was unable to position it correctly.
Maybe something on the lines of:
<div class="d-flex align-items-center mb-3">
<div class="form-group md-3 form-floating w-100"> <input type="text" class="form-control" id="login_users_username" name="login_users_username" placeholder="Enter Username" required=""><label for="login_users_username" class="form-label" style="">Username</label>
</div>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-asterisk fa-fw"></i>
<br>
</p>
</div>
<div class="d-flex align-items-center mb-3">
<div class="form-group md-3 form-floating w-100"> <input type="text" class="form-control" id="login_users_username1" name="login_users_username1" placeholder="Enter Username " required=""><label for="login_users_username1" class="form-label" style="">Username</label>
</div>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-fw"></i>
<br>
</p>
</div>
The width would be a little less as you can see on the 2 extra username fields as it makes space for the icon and under that is one with no icon but keeps the inputs the same width
1 Like
It looks good but I’m unable to reproduce your results.
<div class="form-floating form-group md-3 mb-2">
<input type="text" class="form-control" id="input1" name="FirstName" aria-describedby="input1_help" placeholder="First Name" required="">
<label for="input1" class="form-label">* First Name</label>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-asterisk fa-fw"></i>
<br>
</p>
<small id="input1_help" class="form-text text-muted visually-hidden">Enter your first name</small>
</div>
You need all the code looks like you left out the flex container
I’m not sure how to incorporate all your code into an existing form.
Try paste this under your current form group (just so you don’t lose your existing if this doesn’t work in your form):
<div class="d-flex align-items-center mb-3">
<div class="form-group md-3 form-floating w-100">
<input type="text" class="form-control" id="input1" name="FirstName" aria-describedby="input1_help" placeholder="First Name" required="">
<label for="input1" class="form-label">First Name</label>
<small id="input1_help" class="form-text text-muted visually-hidden">Enter your first name</small>
</div>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-asterisk fa-fw"></i>
<br>
</p>
</div>
Here’s a full form so you can see how it looks:
<form id="form1">
<div class="d-flex align-items-center mb-3">
<div class="form-group md-3 form-floating w-100"> <input type="text" class="form-control" id="login_users_username" name="login_users_username" placeholder="Enter Username" required=""><label for="login_users_username" class="form-label" style="">Username</label>
</div>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-asterisk fa-fw"></i>
<br>
</p>
</div>
<div class="d-flex align-items-center mb-3">
<div class="form-group md-3 form-floating w-100">
<input type="text" class="form-control" id="input1" name="FirstName" aria-describedby="input1_help" placeholder="First Name" required="">
<label for="input1" class="form-label">First Name</label>
<small id="input1_help" class="form-text text-muted visually-hidden">Enter your first name</small>
</div>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-asterisk fa-fw"></i>
<br>
</p>
</div>
<div class="d-flex align-items-center mb-3">
<div class="form-group md-3 form-floating w-100"> <input type="text" class="form-control" id="login_users_username1" name="login_users_username1" placeholder="Enter Username " required=""><label for="login_users_username1" class="form-label" style="">Username</label>
</div>
<p class="pt-2 pb-2 ps-2 pe-2">
<i class="fas fa-fw"></i>
<br>
</p>
</div>
<div class="form-group md-3 form-floating mb-3"> <input type="password" class="form-control" id="login_users_password" name="login_users_password" aria-describedby="input7_help" placeholder="Enter Password" required=""><label for="input1" class="form-label">Password</label>
</div>
<button id="btn1" class="btn btn-primary" type="submit">Button</button>
</form>
You will need to edit the labels, inputs etc to your liking but should give you an idea of the structure if still a little unsure
It’s working somewhat, I’ve lost al;l my responsive width settings from the parent “column” object. The flex container doesn’t stretch horizontally
Could you paste your entire form tags and ill see if I can adjust this design for your form see if I can get it working with the responsive widths etc
It’s a huge form… can a flex container be set to be responsive somehow? This would fix it.
You could try giving it a width of 100% if you are trying to get it all the way across a column etc
Using the design panel’s width setting makes any number I imput 'pixels", I can’t find a percentage or column-based setting for a flex container
Ok thanks that pointed me in the right direction. It was the Vertical From Group which needed to be set at 100%, not the Flex box. All I have to do now is wrap each item in the Flex box and add the paragraph to it.
Thank you for all the help!
1 Like
This will automatically place the asterisk on the left of a required input field:
input:required+label::before {
position: absolute;
left: -10px;
top: 0;
content: "*";
color: red;
}
This is intriguing but I’m not a CSS wizard as you are.
Where do I put this CSS code?
Please make sure to format the code you paste as described here:
Thanks