Is there a way to incorporate a fonticon following an input field?

Here's the code snippet I'm working with:

<div class="form-group">
<label for="site-title">Site title<span style="color: red;">*</span></label> 
<input class="form-control" type="text" value="" id="site-title" name="" required> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="mdi mdi-information-outline"></i></a>
</div>

The issue is that I want to position a font-icon right after the input field, but it currently appears below it. How can I adjust the positioning so it shows up after the field?

htmlcssbootstrap-4

Answer №1

If you're looking to align items on your page, consider implementing the following CSS:

.input-container {
display: -ms-flexbox;
display: flex;
width: 100%;
margin-bottom: 15px;
}

.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}

.input-field {
width: 100%;
padding: 10px;
outline: none;
}

Utilizing CSS for alignment purposes offers a straightforward solution. Check out the user-friendly W3Schools tutorial for more information and guidance: https://www.w3schools.com/howto/howto_css_form_icon.asp

Answer №2

When I encountered a similar issue, I found a solution by utilizing flex in CSS and the :after pseudo-element. Another approach is to use the i tag within a span tag inside a div tag. If these methods do not resolve the problem, consider employing flex for the icon and using the :after pseudo-element in CSS.

<div class="form-group">
<label for="site-title">Site title<span style="color: red;">*</span></label> 
<input class="form-control" type="text" value="" id="site-title" name="" required> <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><div><span><i class="mdi mdi-information-outline"></i></span></div></a>
</div>

Answer №3

Here is an example you can follow:

    <div class="form-group">
       <label for="site-title">Site title<span style="color: red;">*</span></label> 
       <div class "form-input">    
         <input class="form-control" type="text" value="" id="site-title" name="" required> 
         <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
            <i class="mdi mdi-information-outline"></i>
         </a>
       </div>
    </div>

You can implement the following CSS:

.form-group {
  display: block;
}
.form-group:after,
.form-input:after {
  content: "";
  clear: both;
  dispay: block;
}
.form-group label,
.form-input {
  display: block;
  width: 100%;
}
.form-group label span {
  display: inline-block;
  margin-left: 7px;
}
.form-group .form-control {
  width: 85%;
  float: left;
}
.form-group .form-control a {
 width: 15%;
 display: block;
 float: right;
}

If you are using Bootstrap 4, its grid system is based on flexbox. For more information, check out this link about flexbox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving data from a contact form with php, js, and ajax?

I am facing an issue with my contact form on a website. I am unable to receive the filled fields from the contact form via email. Can someone please help me figure out what is wrong with the code or suggest an alternative solution? Any assistance in fixing ...

javascriptphphtmlajax

Link numerous number-type inputs together

I'm looking to create a form with 6 input fields of type number. Each label will have specified min and max values. The challenge is that if I set one field to be between 0-50, for example in red, then the next field in yellow can't be from 49-70 ...

javascripthtmlreactjsinput

When the condition is false, Angular 8's ngIf creates an empty element

Encountering an issue with Angular8 and ngIf: I have a piece of code that generates a div element loading images and their associated details onto a webpage from a JSON file based on a condition: HTML Code: <div class="row" > < ...

htmlangularangular-ng-if

Adding navigation links to move forward and backward on a webpage in Django:

Currently, I am leveraging Django Python Templates to create a blog with two distinct frames. The code below is used to populate the links on the left side frame: {% for post in posts %} <div class="post"> <ul style="padding: 1px;"& ...

htmldjangotemplates

Implementing jQuery function to hide or show content upon page load

Is there a way to have the content hidden when the page is first opened, but then revealed once a button is clicked? Any suggestions? <script> $(document).ready(function(){ $("#rooms").click(function(){ $("#rooms_box").show(); }); $("#faciliti ...

jqueryhtmlshow-hide

Maintaining equal height for two columns using CSS techniques

I'm facing a challenge with two columns in a container, both having dynamic heights and different color backgrounds. I want the columns to always be the size of the taller one regardless of the content. How can I achieve this using CSS? Here is the H ...

htmlcss

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used? Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/ If p ...

jqueryhtmlcssresponsive-designmedia-queries

Using Bootstrap 4 to validate credit card information with personalized error messages

How can I apply Bootstrap 4 validation to ensure that the credit card number contains only numbers, is 16 digits long, and display appropriate messages based on user input? I want to display three distinct messages: 1. When no input is provided, show "Cre ...

javascripthtmltwitter-bootstrapvalidationbootstrap-4

Looking to implement URL navigation based on a selected value from a dropdown menu when the onClick button is pressed

I am struggling with getting the Go Button to navigate to a specific URL like "&age=10" without selecting it. I require assistance with creating code that will allow me to redirect to the URL with post URL variables for my WordPress site. ...

javascriptphpjqueryhtmlwordpress

Ways to eliminate the final empty space in a grid

Looking to create a layout with 5 boxes? Currently, I have managed to set up the grid structure, but the issue is that there is still some space below the last item in the grid. Below is the styled component for Container: const Container = styled('di ...

cssmaterial-uicss-grid

Incorporating the Bootstrap Theme seamlessly into your existing Shopify design

After buying a Bootstrap theme, I found out that uploading it directly to Shopify isn't as simple as I thought. Despite hours of searching, I still can't figure out how to integrate the theme into my Shopify setup. Any assistance would be greatly ...

bootstrap-4shopify

What is the best way to implement a front-end CSS style for text instead of a background style?

I have HTML text I want to style with a color like rgba(0,0,0,0.1), but I want the color to appear above or on top of the text, not below or behind it. Issue: How can I accomplish this? (CSS or JavaScript solutions are welcome). Thank you in advance for ...

javascripthtmlcss

Windows Outlook - automatic tag wrapping feature

My goal is to ensure that buttons wrap properly inside their cell. I have set a max-width for the cell as well as a ghost table of 200px. The width should not extend past 200px, causing the span to wrap to the second row automatically. This method works ev ...

htmlcssemailoutlookhtml-email

Dynamic Dropdown Menu Using PHP and jQuery

I was trying to implement a tutorial I found on this website for a car-related project, but I encountered an issue. The tutorial was working fine, but I needed to add a 'Go' button to allow users to view the selected car from the drop-down menu. ...

javascriptphpjqueryhtml

What is the function of table widths in accommodating wider details during insertion?

What happens when a detail width is set to <td width="10"...> and something wider, like a picture that is 20 pixels wide, is placed in that detail? ...

html

How can I immediately disable a button upon clicking "cancel" on a modal that contains TextFields in React Version 18?

New to React development. Looking for a way to reset a button to its initial disabled state when canceling out of a modal. The scenario is that upon clicking a button, a dialog will appear with an "ADJUST" button that is initially disabled until text is ...

javascripthtmlreactjsmaterial-ui

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

Assign a value to the input field based on changes made in another input field

I am brand new to the world of JavaScript and currently grappling with setting a value in an input field based on the onchange event of another input field. Here is my code sample for input field 1: <input type='text' onchange='methodTh ...

javascripthtmldom-eventsonchange

Adjusting the size of the iframe on-the-fly

Scenario: Currently, I am tackling a project involving developing a responsive design using the standard HTML/CSS combination. Everything seems to be working smoothly except for one specific situation where an iframe is nested inside a div. The challenge l ...

javascriptjqueryhtmlcssiframe

Styling with Radial Gradients in CSS

Struggling to create a banner with a radial gradient background? I'm almost there, but my code isn't matching the design. Any assistance would be greatly appreciated as I can't seem to get the right colors and only part of the first circle i ...

cssvue.jsgradientbannerradial-gradients