How to optimize form fields in Bootstrap by utilizing the size/maxlength attributes in HTML inputs

When I attempted to utilize html5's form size/maxlength with bootstrap, I encountered an intriguing issue.

The .form-control class in bootstrap overrides the size, but if removed, the input loses its styling.

Check out the code pen here: http://codepen.io/rkhayat/pen/JoeBqx

Thank you!

<div class="container">
    <div class="form-group">
        <p>Phone</p><input class="form-control" id="inputPhone" maxlength=
        "3" name="phone" required="required" size="3" title="" type="tel"
        value="">
    </div>
</div><!--with form-control-->

<div class="container">
    <p>Note that removing form-control removes ALL styles, but retains the
    size from html size input</p>
</div>

<div class="container">
    <div class="form-group">
        <p>Phone</p><input id="inputPhone" maxlength="3" name="phone"
        required="required" size="3" title="" type="tel" value="">
    </div>
</div><!--without form-control-->

Edit: After some research, I came across this http://getbootstrap.com/css/#column-sizing

Implemented bootstrap's suggested solution, although it feels like a workaround. 

<div class="col-xs-4">
            <div class="form-group">
                <p>Phone</p>
                <div class="col-xs-3">
                    <input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
                </div>

                <div class="col-xs-3">
                    <input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
                </div>


                <div class="col-xs-4">
                    <input type="tel" name="phone" class="form-control" value="" size="4" maxlength="4" required="required" title="">
                </div>
            </div>
        </div>
csshtmlformstwitter-bootstrapinput

Answer №1

To set the width of many form elements, especially entire form-groups, I utilize cols. I simply assign them the class "skinny" and include the following CSS code:

.skinny {
padding-left: 0;
}

So far, this method has been effective for me. Although I have not tested it for maxlength, it has successfully resolved my main layout dilemma!

Answer №2

Exciting News! Check out this blog post I created about the topic that has generated so much interest!

If you're curious, here's how I resolved the issue. Huge thanks to @web2tips for your valuable input. (Please refer back to the original question for HTML details)

.phone-number .col-xs-3::after{
 content: "-";
 position:absolute;
 right: 5px;
 color: black;
 border: 0px solid;
 top: 5px;
}

.phone-number .col-xs-4{
 width:25%;
}

.phone-number .col-xs-3, .phone-number .col-xs-4{
padding-left:0;
}

It's a bit disappointing that bootstrap's .form-control already includes preset widths.

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

What is the best way to determine if a date is empty using Vuetify?

Could someone help me with checking if a date was entered by the user? I want to display an error message if a date is not provided. I attempted to use a rule for this purpose, but unfortunately it's not showing any error message. Below is the code I ...

htmlvue.jsvuetify.js

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

As someone unfamiliar with AngularJS, I have a simple inquiry regarding the subject. The code on my page begins by defining an app and controller: <script> var isisApp = angular.module('isisApp', []); isisApp.controller('Acco ...

javascripthtmlangularjs

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

htmlcss

Make sure to always display the browser scrollbar in order to avoid any sudden page

Question: How can I ensure the scrollbar is always visible in a browser using JavaScript? I've noticed that some of my web pages have a scrollbar while others do not, causing the page to jump when navigating between them. Is there a way to make t ...

htmlcssbrowserscrollbar

Is there a way to selectively display a portion of my CSS class based on certain conditions?

Is there a way to conditionally render all of the css inside the following hover psuedoclass based on a variable (data) being not null? Within my React Component that utilizes Material UI makeStyles, I have the following styles: const useStyles = makeStyle ...

cssreactjsmaterial-uipseudo-classconditional-rendering

Display a persistent bar on the page until the user reaches a specified <div> element through scrolling

Looking to implement a sticky bar at the bottom of my page that fades out once the user scrolls to a specific div and then fades back in when scrolling up and the div is out of view. This bar should only appear if the user's screen size is not large ...

javascriptjqueryhtmlcss

Store data in LocalStorage according to the selected value in the dropdown menu

Can you help me understand how to update the value of a localstorage item based on the selection made in a dropdown menu? <select id="theme" onchange=""> <option value="simple">Simple</option> <option valu ...

javascripthtml

Having difficulties with JavaScript's if statements

I'm facing an issue with my JavaScript code that is meant to modify the value of a price variable and then display the updated price. The problem arises when I have multiple select options, as the price only reflects the ID of the last statement. Here ...

javascripthtmlif-statement

Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestio ...

htmlcsssvg

Set maximum size for background image in div

I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop a ...

javascriptjqueryhtmlcss

conditional statement for manipulating data in javascript/html

I am working on appending results in an object as options in a datalist dropdown. While it is functioning correctly, the issue arises when not all elements have a specific level in the object consistently, impacting which results are added to the list. $( ...

javascriptjqueryhtml

Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Behold the upvote button of steemit.com: <span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;"> <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns=" ...

javascripthtmlcssanimationsvg

Creating a dynamic video background using Html5 and CSS with a scrolling attachment

video { width: 100%; z-index: 1; position: fixed; } I tested this code and it works well, however, the video remains fixed across the entire body of the page... ...

javascripthtmlcss

Using httpRequest to handle binary data in JavaScript

Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...

javascripthtmlxmlhttprequestbinary-dataresponsetext

The function .innerHTML is not functioning correctly, at least in my opinion

When I utilize .innerHTML to insert text into a textarea, the script stops functioning if I manually begin editing the text in the textarea. Here is the code snippet: (function($){ addPort = function(name) { switch(name) { case 'name1': ...

javascripthtml

Tips for transferring data from a table row to a bootstrap modal in Angular 2

Attempting to remove a record from a table involves the user clicking on the delete button, which triggers a confirmation box. Once the user confirms deletion by clicking another delete button in the modal, the record should be deleted. The desired action ...

twitter-bootstrapangular

Eliminate unnecessary transparency in React Material UI Tooltip / Popper by adjusting opacity restrictions

Looking to integrate the Tooltip component from the React Material UI Library into my project. The code snippet I am using is as follows: <WhiteOnDarkGreyTooltipWithControls disableTouchListener disableFocusListener title={ <Text selectable ...

javascriptcssreactjsmaterial-ui

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

javascriptphpjqueryhtmlajax

What attribute should I utilize to ensure the image always takes priority over text when using @media queries?

resolution My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using: .section4 { text-align: cen ...

htmlcss

What is the solution for setting a regular height to a Bootstrap select when no option is currently selected?

On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...

htmltwitter-bootstrapbootstrap-select