I am trying to figure out how to permanently display a % symbol at the far right side of a textbox that shows a percentage. Can anyone help me with this?
I am trying to figure out how to permanently display a % symbol at the far right side of a textbox that shows a percentage. Can anyone help me with this?
In my opinion, a great approach is to enclose the input and desired label within a div element styled to resemble an input, and then eliminate the input styling from the input itself. While I would not recommend this exact method for a live webpage, it can certainly set you on the right path.
.wrapper {border: 1px solid gray; width:110px;}
input {border:none; width:90px;}
.label {width:10px;}<div class="wrapper">
<input type="text" name="percent"/>
<span class="label">%</span>
</div>Are you looking for something like this?
.percentage-box {
position: relative;
}
.percentage-box::after {
content: "\%";
position: absolute;
right: .5rem;
font-size: .9em;
line-height: 1.5em;
}
.percentage-box input {
text-align: right;
padding-right: 1.5rem;
}<span class="percentage-box">
<input type="text" placeholder="0">
</span>input-group, but keep in mind that loading Bootstrap just for this may be unnecessary for your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="input-group">
<input type="text" class="form-control text-right" placeholder="0">
<div class="input-group-addon">%</div>
</div>
</div>
</div>To achieve the desired effect, you simply need to include the percentage symbol within a span element and position it absolutely with left:0 and top:0. Here's a demonstration:
.container{ position: relative;}
span { position: absolute; left: 0; top: 0;}<div class="container"><input type="text" ><span>%</span></div>Utilize the Font-Awesome Icon fa-percent to achieve this effect. Follow these steps:
1. Add a link to the Font Awesome library
2. Use the HTML entity for `fa-percent` as the placeholder in your <input> tag
3. Apply `font-family: FontAwesome;text-align:right;` to the input field in your custom CSS
Example:
input {
font-family: FontAwesome;
text-align: right;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h1>This is How you do it </h1>
<input type = "text" placeholder = "">Currently utilizing npm's Selenium Webdriver. Having difficulty getting By.cssSelector to function properly. Other selectors like By.tagName and By.id are working fine. Here is the code snippet: var webdriver = require('selenium-webdriver&apos ...
My admin panel is built using jQuery and Bootstrap, and it functions properly when used outside of the Angular framework. However, after integrating jQuery and Bootstrap into an Angular project and configuring them, I noticed that I had to double click on ...
I am currently experimenting with dialogflow fulfillment using NodeJS (dialogflow-fulfillment). My goal is to retrieve parameters from dialogflow, however, I encounter an error when trying to access the currency-name parameter: ReferenceError: name is not ...
I encountered an issue while attempting to retrieve stock data from the Square API. injectGlobalHook.js:1648 Fetch API cannot load webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js. URL scheme "webpack-internal ...
export enum TOKENS { CLASS = 1, METHOD, FUNCTION, CONSTRUCTOR, INT, BOOLEAN, CHAR, VOID, VAR, STATIC, FIELD, LET, DO, IF, ELSE, WHILE, RETURN, TRUE, FALSE, NULL, THIS } setTokenPatterns() { let tokenString: s ...
When using JavaScript's Date.parse, it handles Pacific Time without any issues: Date.parse('June 20 2015 10:22 PDT') However, it encounters issues with Alaska Time: Date.parse('June 20 2015 10:22 AKDT') Does anyone have a relia ...
I have been working on a jQuery mobile web application where I attempted to integrate the dangero.us swiper. Despite filling my swiper-container with dynamic HTML and using the reinit() function as recommended in other tasks, nothing seemed to happen. Her ...
I am currently utilizing Angular2 in my project, and I am attempting to dynamically add a text field. However, I keep encountering an error: Error Message (TS): ngOnInit() { this.myForm = this._fb.group({ myArray: this._fb.array([ ...
Back in the prototype days, I used to post a form with its populated data simply by doing: $('form-id').request({ onComplete: function(response){ /* whatever */ } }) Now, I could always manually specify each field when building my request lik ...
Process Overview I have an Angular post that communicates with my Node.js Express backend to send data to an API. My goal is to redirect the user to a different Angular page upon successful post, or display an error message if the post fails. One approac ...
After shifting from CRA to VITE, I am encountering a problem with serving my app. I successfully build my app using vite build. and can serve it using Vite serve without any issues. However, I want to use npm's serve command. Whenever I run vite bui ...
I'm experimenting with Vue 2.0 and I've encountered a bit of confusion. How can I properly pass props to a component's internal data? I've followed the documentation, but it still seems unclear. HTML <service-list :services="model"& ...
Whenever I click on an element, it triggers an input dialog that allows me to upload a photo. The server then responds with a JSON OBJECT containing 4 items: NAME, TYPE, HEIGHT, WIDTH. My goal is to refresh the element's background with the newly upl ...
Here is the structure of my code: interface MutationProps{ username: any, Mutation: any } const UseCustomMutation: React.FC<MutationProps> = (props: MutationProps) => { const [myFunction, {data, error}] = useMutation(props.Mutati ...
Frustration has been brewing within me all week as I grapple with the task of sending out an important emailer soon. The challenge lies in aligning these product images next to their descriptions at the center, a feat that seems impossible to achieve withi ...
Currently, I am working with asp.net in Visual Studio and using jQuery to call a web method. In asp.net, I am generating a dynamic datatable and then returning it by using JsonConvert.SerializeObject(dt). $.ajax({ type: 'POST', url: &apo ...
After updating to the latest version of Presta Shop, I encountered an issue. When I inserted the following code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> jQuery(document).ready(function(){ ...
Trying to modify the width and height of the mat indicator has been a bit challenging. Despite following suggestions from other similar questions, such as adjusting the border width and padding, I am still unable to see the changes reflect in my CSS file ...
Starting a fresh project using Angular and encountering an issue. When attempting to load an external CSS file with <link>, it fails to work. However, using an internal style with @import does work! Not working with : <link rel="stylesheet" type= ...
I have granted permission for administrative staff on our ASP.NET website to upload their profile pictures. The process is simple: just use basic file uploading controls: <img src="<%#ImageFile%>" border='0' width="150" alt="" height="1 ...