Looking to create a unique text input with static content on the right and editable text on the left
https://i.stack.imgur.com/K0YfM.png
Any suggestions?
Looking to create a unique text input with static content on the right and editable text on the left
https://i.stack.imgur.com/K0YfM.png
Any suggestions?
Consider trying out a similar approach. Another option is to specifically target elements with certain class names. I've included some adjustments to the width and padding of the input element. Feel free to modify them based on your needs.
label {
position: relative;
}
label span {
position: absolute;
right: 0;
top: 0;
padding-right: 10px;
color: grey
}
input {
padding-right: 40px;
width: 150px;
}<label><span>bhat</span>
<input type="text" placeholder="0.00" />
</label>Building upon @kiranvj's points, I have also integrated JavaScript to toggle the display of the floating text based on user input:
function hideSpan(x) {
document.querySelector('.fp').style.display = x.value !== "" ? "none" : "block";
}label {
position: relative;
}
label span {
position: absolute;
right: 0;
top: 0;
padding-right: 10px;
color: grey;
user-select: none;
cursor: text;
}<label><span class="fp">bhat</span>
<input type="text" placeholder="0.00" oninput="hideSpan(this)"/>
</label>This design was accomplished by utilizing absolute positioning for the span element within the textbox.
.input-with-txt {
position: relative;
display: inline-block;
}
input {
padding: 10px;
padding-right: 45px;
}
.input-with-txt > span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}<div class="input-with-txt">
<input type="text" placeholder="0.00" />
<span>baht</span>
</div>Even though it seems simple, I am struggling to get it to work properly. My goal is to have the existing elements in my list shift to make room for a new element added, and then have the new element appear with a smooth fade transition. I have tried to im ...
I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...
I am currently working on a navigation menu that includes list items a, b, c, d, e, f. One issue I am facing is when a user hovers over the list item d, the submenu items like d1, d2, d3, d4, and d5 appear within the d section. However, the background col ...
When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...
I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. Could you assist me in achieving this? Thank you! HTML: <header> <div class="c ...
When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...
My landing page has a menu that scrolls users to the selected section. However, my client prefers the page at a 90% zoom level. To accommodate this request, I added the following line of code: body { zoom:90%; } Unfortunately, when I click on a menu o ...
I'm having trouble getting my info-container div to adjust its height based on its contents. I suspect that the floating div within it might be causing the issue, but I'm not certain. I've included a link to jsfiddle where you can view the C ...
I've encountered some issues in my nextJS app with utilizing certain TailwindCSS classes such as top, left, or drop-shadow. Even after attempting to update Tailwind from version 1.9.5 to 3.3.3, I have not seen any changes. I believe that I am import ...
My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...
Currently, I am developing a function that can detect any changes made in the text field and then activate the save button accordingly. This code is being executed in Visual Studio 2017, using HTML and JavaScript. (function () { var customer_addres ...
I am new to ReactJS and I would like help on how to hide the watermark on a Google My Map. Can someone please assist me with this? <iframe src="https://www.google.com/maps/d/u/1/embed?mid=1OMSkPKZi-U-CnmBr71zByNxp8HYi-vOc&ehbc=2E312F" fram ...
I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below: <div id = "div1"></div> <div id = "div2"></div> <div id = ...
I would like to implement an input field similar to the one shown in the image. When the input field is clicked on, I want to blur the background. image example Do I need to use a specific library for this? Currently, I am using Material UI. ...
As a newcomer to AngularJS, I am attempting to create a page with two ui-grid elements and a button labeled "other-grid". The goal is for the first grid to load initially, and when clicked again, it should be replaced by the second grid. However, I am en ...
I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...
I have designed a popup registration form using the Bootstrap modal class. To ensure form validation, I have integrated some jQuery validation engine functionality. Additionally, I customized the appearance by adding a box shadow, adjusting the background ...
I am currently working on a function that displays real-time dates based on user input. Currently, when the user enters the input, it is displayed in the front end as follows: 28.10.2018 10:09 However, I would like the date to change dynamically based on ...
I am currently developing a form for my application using Cordova CLI 8.0, Ionic 1.3.5, and AngularJS 1.5. My goal is to set a checkbox as required within the form. Here's the approach I have taken so far: <ion-checkbox name="entry.exportcode" n ...
Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...