The use of a custom padding on a text input with the Bootstrap 3 form-control class can cause the text to be hidden

It seems like the code is working fine in Opera and Chrome, but in Firefox and IE11, the text is getting hidden, which is not very enjoyable. I don't have a Mac, so I can't test it on Safari.

You can see the issue in action on this Plunker.

I've attempted to fix the issue by adding line-height and overflow:visible, but so far they haven't had much impact.

CSS:

#userResponse {
    font-size: 2em;
    padding: 1em 0.25em;
    text-align: center;
}

HTML: 

<!DOCTYPE html>
<html>

  <head>
    <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6bbf5e5e5d6a5b8a5b8a7">[email protected]</a>" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <input class="form-control" id="userResponse" type="text">
  </body>

</html>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you need to increase the height of text fields in Bootstrap, you can use the input-lg class. Make sure to place all form-control elements inside a form-group for proper styling.

<input class="form-control input-lg" type="text">

Here is an example:

<div class="form-group">
    <input class="form-control input-lg" type="text">
</div>

For more information, visit http://getbootstrap.com/css/#forms-control-sizes

Answer №2

Luzan's solution seems to be the most effective approach. To maintain consistent spacing resembling that of Chrome, I adjusted the height to a fixed 58px and eliminated the padding. This adjustment has provided uniform results across all major browsers.

Check out the Updated Plunker for reference.

Embedding HTML code:

<!DOCTYPE html>
<html>

<head>
  <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedf82ccdcdcef9c819c819e">[email protected]</a>" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

  <input class="form-control" id="userResponse" type="text" value='abcdefghijklmnopqrstuvwqyz'>

  <div class="form-group">
    <input class="form-control custom" type="text" value='abcdefghijklmnopqrstuvwqyz'>
  </div>

</body>

</html>

CSS customization:

/* Custom styles are defined below */

#userResponse {
    font-size: 2em;
    padding: 1em 0.25em;
    text-align: center;
}

.custom {
    text-align: center;
    font-size: 2em;
    height: 58px;
}

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

Nuxt 3: Resolving Issues with Page and Layout Transitions

I've been attempting to incorporate layout transitions into my Nuxt 3 project, but unfortunately, it's not working as expected. I even resorted to replicating the code directly from the Nuxt transition documentation, only to face another failure. ...

javascriptcssanimationvuejs3nuxt3.js

Storing multiple text box values into a single application variable in C# - A Comprehensive Guide

[code page="c#"] Hdnano.Value = Application["AccountNum"].ToString(); $(document).ready(function() { $("#ano").on("blur", function() { var accountNum = $('textarea#ano').val(); $("#Hdnano").val(folioNum); }); &l ...

c#jqueryjsonhtmlbootstrapping

Retrieve the class that corresponds to the element in the given list

In my JavaScript code, I have a NodeList of elements that were selected by querying multiple classes. I am using a "for" loop to iterate through the list. What I need is a concise one-liner to quickly determine which class each element was selected by so I ...

javascripthtmldom

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

In my experience, disabling the spellcheck attribute seems to solve the auto-correct issue, but it also eliminates the underlining of misspelled words. <textarea id="TextArea1" spellcheck="false"></textarea> I prefer to keep spellcheck enabl ...

javascripthtmlinternet-explorer

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Does anyone know how to make a checkbox readonly so that its value can be submitted, while also disabling it? Using the disable attribute prevents the value from being submitted, and setting it as readonly doesn't seem to work for checkboxes. Your as ...

javascriptjqueryhtmlcss

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

Having trouble with syntax highlighting on Node.js Vash view files in Visual Studio 2015 Update 3?

While working on a Node.js application using Vash as the view engine in Visual Studio 2015 Update 3, I encountered an issue with syntax highlighting. When writing HTML in the vash files, the code appears as plain text without any syntax highlighting. For e ...

htmlnode.jsvisual-studio-2015vash

Dynamic sizing for sublists

I have come across a nested list structure that looks like this: <ul id="nav"> <li id="" class=""> <a href="http://site.com/wedding.html" class="">Wedding</a> <div class="flyoutWrapper" style="display:block;"> ...

htmlcss

Can anyone help me with displaying auto complete HTML files in VScode?

As a Korean, please excuse my lack of proficiency in English. This image displays the autocomplete feature for HTML files in IntelliJ. This particular file was generated by Spring Boot (start.spring.io). How can I achieve the same in VSCode? ...

htmlspringspring-bootvisual-studio-codeautocomplete

Pass the radio button value and accompanying text to a PHP script

I am struggling with sending both the radio button value and text to php. Currently, I can only send the radio button value. However, I want to also include the text after the radio button without altering the checkbox information. <input name="li ...

phphtml

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

jqueryhtmltwitter-bootstrapsemantic-markup

Look for specific content within a div tag and display that div at the top of the page

<div class="search-container"> <input type="text" class="input-medium search-query" placeholder="Search"> <button type="button" class="btn">Search</button> </div> <div class="panel panel-default"> ...

jqueryhtml

CSS - Positioning a rectangle between two squares

I need help creating a layout with 2 rows of 4 squares, each with a rectangle in the middle of two squares. https://i.sstatic.net/9pWBi.png This is the code I currently have: .main { width: 100%; height: auto; } .square { width: 25%; position: ...

htmlcss

Leveraging Spotify's webAPI to listen to a randomly selected album by a specific artist (ID

Welcome to my little project! As I am not a developer myself, please bear with me for any silly questions that may arise. My idea is to create an "audio book machine." The concept involves using a website that showcases various artists of audiobooks. Upo ...

htmlnode.jsasp.net-web-apiraspberry-pispotify

JavaScript visibility disappearing intermittently

I have created a custom image viewer box that overlays a thumbnail gallery page. The image viewer should appear when a user clicks on a thumbnail. However, currently, the viewer only pops up briefly and then disappears again. I am looking for a way to mak ...

javascriptcssvisibility

Incorporating an HTML/Javascript game into a reactJS website: A step-by-step

After developing a game using plain javascript and HTML along with a few JS libraries, I find myself inquiring about the process of integrating this game into my ReactJS website. Typically, the game is initiated by opening the index.html file located with ...

javascripthtmlreactjs

Eliminate embellishments upon hovering over hyperlinks

Is there a method to prevent my links from becoming underlined or changing color when hovered over? ...

htmlcss

Tips for setting one image as the background for an entire page

Take a look at the web template image linked below: URL - https://ibb.co/cD3iH8 I want to utilize the abstract design image above as the background for an entire page. Please provide guidance on the most effective way to accomplish this task. ...

htmljquerycssuser-interface

Issue with Fancybox Buttons not appearing on parent page upon opening

I previously asked for help on how to open fancybox from an iframe to the parent page. The solution worked perfectly and is still functioning well. Now, I've been requested to add left and right arrow buttons, but it seems that using the code to open ...

jqueryhtmlfancybox

What is the current importance of CSS3 vendor prefixes?

I've been pondering the importance of specifying vendor prefixes like 'webkit', 'moz', 'ms' or 'o' in modern CSS. It seems that Opera has switched to Webkit, meaning we may no longer need '-o-'. IE10 e ...

cssbrowsercross-browservendor-prefix