Looking to align two input text fields with awesome icons next to them.
<span i class="fa fa-link fa-lg">
<input id="product" type="text" placeholder="Product" required/>
</span>
<br><br>
<span i class="fa fa-desktop fa-lg">
<input id="desktop" type="text" placeholder="Desktop" required/>
</span>
https://i.sstatic.net/s88Ay.png
Want the inputs to be left aligned based on the width of the icon.
Utilize the fa-fw font-awesome utility class to enhance your icons.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<span>
<i class="fa fa-link fa-fw fa-lg"></i>
<input id="product" type="text" placeholder="Product" required/>
</span>
<br>
<br>
<span>
<i class="fa fa-desktop fa-fw fa-lg"></i>
<input id="desktop" type="text" placeholder="Desktop" required/>
</span>Consider separating the icons into their own distinct elements to create a block element with a set width.
One possible structure could look something like this:
<div>
<i class="fa fa-link fa-lg"></i>
<input id="product" type="text" placeholder="Product" required/>
</div>
<br><br>
<div>
<i class="fa fa-desktop fa-lg"></i>
<input id="desktop" type="text" placeholder="Desktop" required/>
</div>
Add a fixed width to the font awesome icons as shown below:
i {
width: 20px;
}
It appears that your HTML code is currently invalid.
To ensure proper display, consider utilizing the fontawesome utility class fa-fw to give the icon a fixed width. You can find more information about fixed-width icons in the documentation here:
You can test out the following code snippet using this example: https://jsfiddle.net/0vwfp6e2/1/:
<label>
<i class="fa fa-link fa-lg fa-fw"></i>
<input id="product" type="text" placeholder="Product" required/>
</label>
<label>
<i class="fa fa-desktop fa-lg fa-fw"></i>
<input id="desktop" type="text" placeholder="Desktop" required/>
</label>
I am encountering an issue with a sliding effect on a div. When it has a class hddn, the overlay will have right: -100% from the viewport. However, when the hddn class is removed, it should return to the viewport with right: 0. How can I animate this movem ...
My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...
Current Program Versions: Django 3.1.13 Python 3.8.10 My models.py: # Defining models here. class Odorant(models.Model): Pubchem_ID = models.IntegerField(primary_key = True) Name = models.CharField(max_length =50) Ruletype = models.TextCh ...
Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...
This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...
I am currently working with a div element that dynamically generates a table. Although I can generate the table and use on("click" or "mouseover", function) to achieve certain results, I need the table to update as it loads. In my initial attempts, I tri ...
I'm struggling to align my custom radio buttons alongside text. Here is an example image: https://i.sstatic.net/2g5w8.jpg Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { ...
Is there a way to get rid of the white pop-up background in MUI's default CSS? <Dialog open={open} onClose={() => { setOpen(false); }} > <DialogContent> <h1>Do you really ...
With the combination of Angular and Bootstrap 5, I have crafted this unique HTML form: <div class="mb-3"> <label for="genreName"> Type name</label> <div *ngIf="!enterTheGenre" class="form-group&qu ...
After attempting to modify this code for a big change, I encountered some issues with its functionality. <td> <label> <input type="radio" v-model="options.prdtType" value="CODE001"> <i& ...
I have designed a basic bootstrap 4 form using a GET method, but it seems to only send the values from the Submit button and not from the select tag above it. Although the intention is for this to later be handled with a POST request, I have temporarily s ...
When utilizing material-ui, I am seeking assistance with fixing the full video width on the screen. I have tried using width:auto. Attached below is an image for reference. Could someone please provide guidance on how to resolve this? Thank you in advance. ...
Currently, I'm attempting to generate an HTML graph in a PDF output using rmarkdown: --- title: "Test report" output: pdf_document always_allow_html: yes params: plot: NA --- {r, echo=FALSE,message=FALSE, fig.height=4, fig.width=10, fig.show=&apo ...
For my website to gracefully degrade, I need to conditionally load CSS only when its corresponding JavaScript is enabled and functioning properly. What is the most straightforward method to load local CSS if and only if the browser supports JavaScript? T ...
Recently, I've been facing some challenging issues. I'm attempting to design a login page with a basic layout: For screens wider than 800px: Two columns The left side will feature a logo, login form, text box, and button. No background image. ...
I am in the process of developing a dynamic page where users can add anywhere from 1 to n products effortlessly. Although I have been exploring AngularJS for several months, I find myself facing some challenges when conceptualizing this scenario. The HTM ...
I have a MySQL database filled with various records that I've displayed in an HTML table on a webpage. I want to add two buttons next to each record, both of which trigger PHP scripts. For example, let's say the table lists the names of three pe ...
I created a design in Photoshop that features an edge shaped like this: Can I use CSS to create a border consisting of repeated triangles? ...
Having trouble accessing a table located in the content page from my codebehind. I am attempting to convert the content to an xml file but the code Table tbSelectedColumns = Master.FindControl("ContentPlaceHolder1").FindControl("selectedColumns") as Ta ...
I have been trying to dynamically add elements to a webpage using php. My goal is to have the images alternate between left and right for each item. Even after experimenting with nth odd/even, I still can't seem to make it work. Could there be somet ...