Duplicate label issue with 'No files chosen' message on Bootstrap form control

After migrating to webpack for managing our assets (js, scss, ...), everything seemed to be working smoothly. However, we encountered a minor issue where the input label behind the file-selector-button is overflowing with its neighbor, as shown in the examples below. This problem persists even when using only default bootstrap styles without any additional modifications.

https://i.sstatic.net/agVjh.png https://i.sstatic.net/cjcAZ.png

Our basic webpack application configuration includes:

import "bootstrap/scss/bootstrap.scss";
import "bootstrap-icons/font/bootstrap-icons.css"

// [...]

import "bootstrap";

In the first example snippet:

<div class="row pb-3">
  <div class="col">
      <input class="form-control" type="file" name="uploadFile" id="uploadFile" required>
      <div class="invalid-feedback">
      Please select a file
    </div>
  </div>
</div>

The second example is taken from Bootstrap Docs

Even inspecting the page with tools like Google Chrome did not provide a solution to this issue. I am currently using Bootstrap 5.2.0 (tested on 5.2.2, 5.1.x, etc., with the same results) and have not made any additional modifications to the bootstrap framework itself.

htmlcsswebpackbootstrap-5

Answer №1

Seems like the issue is related to postcss-loader. It seems that properties like margin-inline-start will be removed from the final built version. (Related Post: How can I stop 'postcss-preset-env' from removing CSS logical properties?)

The suggested fix doesn't seem to work, but for now, a temporary solution could be to completely remove postcss-loader. However, I am determined to find a way to resolve this and continue using postcss-loader.

Answer №2

As outlined in the answer to the related query on: How can I stop 'postcss-preset-env' from stripping CSS logical properties?, make sure to include:

{
   stage: 2,
   features: {
       'logical-properties-and-values': false
   }
}

within the postcssPresetEnv() function inside your postcss.config.js

The resulting script should resemble this:

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
    plugins: [postcssPresetEnv({
        stage: 2,
        features: {
            'logical-properties-and-values': false
        }
    })],
};

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

Is there a way to arrange list items to resemble a stack?

Typically, when floating HTML elements they flow from left to right and wrap to the next line if the container width is exceeded. I'm wondering if there's a way to make them float at the bottom instead. This means the elements would stack upward ...

javascripthtmlcss

When using ES6 modules through a script tag, an issue arises with the message "The requested module does not have an export named 'default'."

My attempt to include a module using a script tag caused an error: <script type="module"> import phonebar from "https://unpkg.com/jssip-emicnet/dist/phonebar.js" The error message stated that the module at '' did not export ' ...

npmwebpackecmascript-6es6-modulesumd

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance: https://i.sstatic.net/Gc8sP.png When the number of rows exceed ...

csstypescriptscrollmaterial-uioverflow

Unusual problem encountered with Chart.js bar chart, image dispersion

On my HTML page, I have integrated a stacked bar chart using the Chart.js library to visually represent data for users. The data changes based on user selection, and the JavaScript function that enables this onclick feature is: function aggLav(){ [... ...

javascripthtmljsongraphicschart.js

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

disable caching for xmlhttp request

One issue I am facing is with a JavaScript function that retrieves JSON data via an Ajax request. The problem I'm encountering is that the browser starts caching the response to this request, which means I am not getting the most recent data from the ...

javascriptphpajaxhtmlcaching

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

htmlcss

Removing an unnamed cookie

A mysterious cookie mysteriously appeared on my website, courtesy of Sharethis (value "sharethis_cookie_test"). This cookie is causing all sorts of session issues for me specifically on Chrome. Despite removing the sharethis plugin from my site, this pesky ...

javascripthtmlgoogle-chromecookiessharethis

How to submit a textarea with the enter key without needing to refresh the page

I'm attempting to handle the submission of a textarea when the user hits the enter key, storing the text in a variable, then swapping out the form with the text and adding a new form at the end, all without refreshing. I had success doing this with an ...

javascriptjqueryhtmlajax

Using PHPs nth-child in media queries

There are multiple images on MyPage, typically displayed in rows of 6. However, the number of images per row adjusts based on browser size using media queries. The issue arises with the margin set for the last image in each row, as the nth-child property r ...

phphtmlcss

Guide to making an `Ajax Login` button

I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...

javascripthtmlajax

Building Background Service Workers with React Scripts and webpack Configuration

I am currently developing a chrome extension using ReactJS and TS along with a service worker. Due to the new manifest V3 requirements, I am required to specify my service worker in a specific way: "background": { "service_worker": &q ...

reactjstypescriptgoogle-chromewebpackgoogle-chrome-extension

Flexbox margins (exceeding 100% total width)

Currently collaborating with @c4rlosls and we are facing 2 issues: https://i.sstatic.net/44WcI.jpg If the parent container with class container-fluid has a px-0, it extends beyond 100% width. Additionally, the elements with classes .cont2 a and .cont3 a do ...

htmlcssflexboxbootstrap-4

Issue with Chrome extension: inability to submit values

My Chrome extension is not functioning properly. Here is the code that I have: //manifest.json { "manifest_version": 2, "name": "auto login", "description": "This extension allows for automatic logins.", "version": "1.0", "permissions ...

jqueryhtmlgoogle-chromegoogle-chrome-extension

Issue with locating JavaScript controller in Angular HTML file [Node.js/Angular]

Here are all the files and folders in my project located within the same directory. If you want to check out the project on Github, you can find it here: https://github.com/JohnsCurry/learnAngular. Just to confirm, they are all in the same folder. Unfortu ...

javascripthtmlangularjsnode.js

Tooltips experience issues when interacting with elements that do not utilize the :active state

$(function () { $('[data-toggle="tooltip"]').tooltip() }) <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

A CSS rule to display a nested list on the left-hand side

I created a menu that you can view here. When hovering over "tanfa demo example," the sublist appears on the right side. The issue I'm facing is that my menu is positioned all the way to the right, which means the sublist also appears on the extreme ...

javascriptjquerycssdrop-down-menu

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

What are the best methods for extracting real-time data from Yahoo Finance streaming services?

Yahoo finance streaming employs a unique method where a file gradually grows in size to continually update their data: ^FTSE Is there a way for me to gather this data (I have no intention of selling it- just looking to create my own beginner trading dash ...

c#javahtmlajaxtcp

The extensive magnetic scrolling functionality in Ionic 2 sets it apart from other frameworks

Hi everyone, I could really use some assistance! I've been working on developing an Ionic 2 App and my navigation setup is not too complex. I have a main menu where clicking on an item opens another menu with a submenu. From there, if I click on an i ...

javascriptjqueryhtmltypescriptionic2