I have a numerical input field labeled "days" that I want to add the text " days" to without altering the actual numerical value displayed.
<input type="number" class="days" (keyup)="valueChanged($event)"/>
Users should only be able to edit the numeric value, while the " days" text is a visual addition to the field.
Is there a CSS or TypeScript/JS solution for achieving this?
Why not create a unique style for input units instead of directly inserting them into the input field? Introducing a new design where you can easily append or prepend any unit to the input field could be more user-friendly. Here's a concept:
.unit-input {
border: #DFDFDF solid 1px;
display: inline-flex;
border-radius: 4px;
overflow: hidden;
font-family: sans-serif;
width: 10em;
}
.unit-input__input {
border: 0;
padding: .5em;
font-size: 1em;
width: 100%;
}
.unit-input__input:focus {
background: #EDFFFB;
outline: none;
}
.unit-input__prepend,
.unit-input__append {
background: #F4F4F4;
padding: .5em;
border: #DFDFDF solid 0;
flex-grow: 0;
}
.unit-input__prepend {
border-right-width: 1px;
}
.unit-input__append {
border-left-width: 1px;
}<p>
<span class="unit-input">
<input class="unit-input__input" type="number">
<span class="unit-input__append">days</span>
</span>
</p>
<p>
<span class="unit-input">
<span class="unit-input__prepend">$</span>
<input class="unit-input__input" type="number">
</span>
</p>
<p>
<span class="unit-input">
<input class="unit-input__input" type="number">
<span class="unit-input__append">kg</span>
</span>
</p>An affordable option is to position a span element directly after the input and use a negative margin-right on the input itself:
<input type='number' style='margin-right: -10em;'><span>days</span>
This will allow you to modify the appearance without affecting the underlying data.
If you want to position a span or :after element at the end of an input, you can use absolute positioning. It's ideal if you know the input length beforehand, otherwise JavaScript can be used to calculate and adjust dynamically.
.container {
display: inline-block;
border: 1px solid gray;
position: relative;
font-family: Arial;
font-size: 1rem;
}
.container:after {
content: 'kg';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: .5rem;
pointer-events: none;
}
input {
width: 4rem;
padding: .5rem;
border: none;
box-sizing: border-box;
display: block;
font-size: 1rem;
}<div class="container">
<input type="text" value="100">
</div>[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...
Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...
I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...
I'm currently working on a website design that features a flat aesthetic. I have a header at the top and two blocks of different colors placed side by side underneath it. Initially, I attempted to use float left and right for positioning but was recom ...
I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. https://i.sstatic.net/3OLh0.jpg ...
Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...
Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered ...
How can I utilize the Primefaces version 10 button with a Font Awesome icon, resizing the icon without displaying the words ui:button? A and B are tests that I can resize successfully, but they are not buttons. C and D are buttons where the icon is resize ...
I am faced with a product and cart list scenario. Below is the function I have created to iterate through the cart list and retrieve the specific product using its ID. getCartList(){ this.cart = CART; this.cart.forEach((cart: Cart) => ...
Client .. inserting some content into a form <textarea name="data"></textarea> After typing the following data into the textarea: {title: 'Hello one!', author: 'someone'} {title: 'Hello two!', author: 'mygf ...
Currently, I am in the process of developing an NPM package, and within my codebase lies a specific class that looks like this: import { MIME_PNG } from 'jimp'; import { IDimensions } from './spritesheet'; /** * Representing a single ...
I am currently using Angular 2.0 framework and working on developing an input component. In addition to that, I am also utilizing Google MDL which requires a specific HTML structure with labels for inputs. However, when trying to implement this, I encounte ...
Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...
Using summernote in my Angular project, I am looking to create a custom button that can pass a list as a parameter. I want to have something like 'testBtn': this.customButton(context, listHit) in my custom button function, but I am unsure how to ...
I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...
Hey, I'm trying to implement a gradient on images in my project. Here's what I have so far: import Image from 'next/image' import Box from 'mui/material/Box' import PlayIcon from './PlayIcon.tsx' <Box ...
Here is a validator function that I have: export const PasswordsEqualValidator = (): ValidatorFn => { return (group: FormGroup): Observable<{[key: string]: boolean}> => { const passwordCtrl: FormControl = <FormControl>group.contr ...
Starting a new project with React and Redux has presented me with the challenge of deciding on a styling method. As a newcomer to React, I want to choose a method that won't compromise performance, will offer all CSS3 features, and is easy to maintain ...
Is there a way to generate a PDF upon clicking the "generate PDF" button? The PDF should display an image containing highlighted squares corresponding to the user's selections on the webpage. I've been struggling to include the SVG in the PDF as ...