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>I've been working on creating a functionality to have multiple dropdown menus using Bootstrap, JQuery, and AJAX. The goal is to select multiple countries from these dropdowns and store the selected values in CSV format in my database. Initially, I had ...
My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...
Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...
I am currently learning PHP and attempting to retrieve data from a database to display it in an HTML table. However, I am facing an issue where the total number of records returned is 13 but only 12 records are being displayed in the table (it seems to be ...
Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...
Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...
Recently, I've delved into AngularJS and have been exploring its depths for a few days now. I'm curious about the use of ng-style in styling components within both static and dynamic webpages. Given that we already have the traditional style tag ...
I am currently working on a project where users should be able to select their schedule. Here is the code that I have written so far: <?php //if form has been submitted process it if(isset($_POST['submit'])){ $servername = "localhost"; ...
I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...
My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...
I have completed the implementation of all UI components, which are visually appealing. Here is the data structure I am using: public filters = [ { tag: 'Year', label: 'year', items: [200 ...
Is there a way to determine if the text input provided by the user is empty or contains some text? I'm in the process of developing a TO-DO app and I'd like it so that if a user fails to enter anything into the text area and clicks on "add", the ...
Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...
I've been attempting to implement the bounceInUp animation from animate.css on a div upon showing it, but I can't seem to get it to work. What am I doing wrong? Can someone guide me on the correct way to achieve this effect? This is my CSS code ...
Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...
Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...
I'm new to Angular and I'm attempting to adjust the width of a primeng auto complete component in order to fill the column of a table. I've already experimented with using style="width: 100%" but that approach hasn't yielded any result ...
Here is the CSS code I have for the two important items... html, body { background-image: url("../images/background.png"); background-attachment: fixed; height: 100%; } --and-- #navBar { font-family: Cinzel; position: sticky; t ...
My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...
Recently, I stumbled upon this interactive Pen: https://codepen.io/golle404/pen/BoqrEN that caught my eye. I thought it would be interesting to make the object move every few seconds. My first attempt involved using the following code snippet: setTimeout( ...