Changing the size of an input field in Bootstrap 4 by utilizing the input-group-append class

Currently, I am working on setting up a pay rate feature that includes two input boxes for numbers.

However, I am facing an issue where the input boxes are stretching too much, causing the cents field to drop down to the next line. The Maxlength property in Bootstrap seems to be getting ignored, so I am unable to control the length of the input box effectively.

<div class="form-group col-md-6">
        <label for="pay_rate">Pay Rate</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="number" name="pay_rate" id="pay_rate" class="form-control" style="text-align: right;" placeholder="0" maxlength="4" size="4">
            <div class="input-group-append">
                <span class="input-group-text">.</span>
            </div>
            <div class="input-group-append">
                <input type="number" name="pay_rate" id="pay_rate" class="form-control" placeholder="00"maxlength="2" size="2">
            </div>
        </div>
</div>

I am brainstorming the best approach for creating a money input field that displays both the dollar sign and cents. However, I need to ensure that when the data is loaded into the SQL database, the dollar sign is not included. Any suggestions on how to achieve this?

htmlcssinputbootstrap-4

Answer №1

Great question! It appears that using multiple input-group-append classes does not impact the last input boxes, so we need to manually set the width using the max-width property.

Here is a functional example:

.myClass {
  max-width: 32%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="form-group col-md-6">
  <label for="pay_rate">Pay Rate</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="number" name="pay_rate" id="pay_rate" class="form-control" style="text-align: right;" placeholder="0" maxlength="4" size="4">
    <div class="input-group-append">
      <span class="input-group-text">.</span>
    </div>
    <div class="input-group-append myClass">
      <input type="number" name="pay_rate" id="pay_rate" class="form-control" placeholder="99" maxlength="4" size="4">
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the syntax for navigating with JS Angular and HTML, such as when using the code snippet: ng-click="save(userForm)"

I am struggling to grasp the functionality of a specific part of this code. Despite my efforts to find tutorials, I have been unable to locate relevant information. There are two lines in particular that puzzle me: <button type="submit" class="btn btn ...

javascripthtmlangularjs

Retrieve the screen width using a JavaScript function and apply it as a percentage

I find myself needing to adjust the size of table elements based on the width of the screen. While I am not well-versed in javascript or html, resolving this issue is crucial. Unfortunately, I did not create the original asp page and have limited ability t ...

javascripthtml

What is the best way to crop a page?

Running a React application, I am integrating a page from an external ASP.NET app. To achieve my goal of extracting only a section of the page rather than the entire content, I am unsure if it is feasible. Specifically, I aim to extract just the body of th ...

javascripthtmlreactjsreact-native

Developing web applications using Express.js and Jade involves connecting CSS stylesheets

I'm currently in the process of developing a web application using Express.js along with some Bootstrap templates. I utilized jade2html for conversion, and while the page loads successfully, it lacks any styling. The following code snippet is what I ...

htmlexpresspug

Break apart PDFs into individual images or convert to HTML

I'm currently working on a project that requires the development of a unique webtool. The purpose of this tool is to allow users to effortlessly upload their PDF documents, which will then be displayed in a browser with an engaging page flip effect ut ...

phpjqueryhtmlpdf

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

javascripthtmlcss

Creating Eye-Catching Titles with HTML and CSS

As a beginner in HTML and CSS, I'm curious about creating an eye-catching header on a website with a different background than the rest of the page. Is it possible to achieve this effect using HTML and CSS? Apologies if this question sounds silly. T ...

htmlcss

Ways to create a responsive design for this specific part of the

https://i.sstatic.net/2JyyN.jpg Hello everyone, I'm looking to make this section responsive at 768px .AppleContent { background-color: #9ACD32; text-align: center; padding: 50px 200px; color: white; } <section class="section-1"& ...

htmlcssresponsive-designbootstrap-4

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss

FireFox appears to be experiencing issues with accessing the contentDocument of a frame using jQuery

While this line of code functions correctly on Chrome and IE, it encounters an issue on FireFox. The error message displayed in the FireFox console is: ReferenceError: $ is not defined var lang = $($('#navFrame')[0].contentDocument).find('# ...

jqueryhtmlfirefoxdomframe

The default values for CSS filters

I have a keen interest in various CSS filters: blur brightness contrast grayscale hue-rotate invert opacity saturate sepia Could someone provide the default values for each filter (preferably as a % value, where applicable)? The MDN documentation does no ...

cssangularcss-filters

A guide to utilizing CSS to showcase the content of all four div elements in HTML body simultaneously

Is there a way to use CSS to display the content of all 4 divs in the same place on the HTML body, based on the URL clicked? Only one div should be displayed at a time in the center of the page. For example, if URL #1 is clicked, it should show the conten ...

javascriptjqueryhtmlcss

Unable to fix position: sticky issue following Angular 15 update

Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers. <div class="row"> <div class="col-12"> <di ...

htmlcssangularangular-material

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

What is the best way to incorporate bullet points into a textarea?

How can I make a bullet point appear when pressing the 'enter' button inside a textarea? I tried using this code, but it doesn't seem to work. Any suggestions? <script> $(".todolist").focus(function() { if(document.getElementById( ...

javascriptjqueryhtml

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

cssreactjsmaterial-uifont-facereact-admin

Transfer data from href link to specific detail page

I am currently working on a table that displays all the users. My goal is to turn the usernames into clickable links that direct you to their profile page. What steps should I take to convert the username into an href link and send it to the detail page? ...

phphtmlvariableshyperlink

Looking to activate a button upon clicking a button on a different page using php and javascript

Is it possible for the first user logged in on one page to have a button, and when clicked, enable a disabled button on another page where the second user is logged in? This functionality needs to be implemented using PHP/JavaScript. Thank you in advance ...

javascriptphpjqueryhtml

Steps to design a text div that extends beyond the bottom boundaries

Can anyone help me troubleshoot this design code using Bootstrap 3.x? Specifically, I am facing an issue with the following div. Any suggestions? Click here for more information. img{max-width:100%;} .mydiv{margin-bottom:20px;} .mytext{ positio ...

htmlcsstwitter-bootstrap-3absolute

Is there a way to modify the scroll ion-content's color scheme?

Is there a way to change the scroll color in Ionic to green, specifically for ion-content? Any suggestions on how I can achieve this? Below is my HTML code: <ion-header> <ion-toolbar> <ion-buttons slot="start"> ...

htmlcsstypescriptionic-framework