Issue with Edge browser: child element exceeds parent's defined width

We need to meet a specific requirement that involves displaying a prefix inside a textbox that cannot be edited. Check out the HTML/CSS code on JSFiddle. The issue arises when we resize the window.

HTML:

<div class="customNameContainer" dir="ltr">
    <div title="Publisher prefix" class="publisherPrefix">new_</div>
    <input name="customname" class="customName" type="text" maxlength="36">
</div>

CSS

.customNameContainer{
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
  color: #333333;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  border: 1px solid #999999;
  background-color: #ffffff;
  width:50%;
}

.publisherPrefix{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center;
  color: #888888;
}

.customName{
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
  color: #333333;
  width: 100%;
  border: 0;
}

Note: This code works in all browsers except Edge.

Issue:

https://i.sstatic.net/wU1U7.png

htmlcssmicrosoft-edge

Answer №1

I managed to come up with a workable solution, although it may not be perfect.

It appears that Edge sets a default min-width for input elements, but this default can be overridden by specifying max-width or min-width in the CSS.

To address this issue, simply add min-width: 0; to the uniqueName class.

Check out the revised fiddle for a demonstration. I removed unnecessary flexbox styles from .publisherPrefix.

.uniqueNameContainer {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
  color: #333333;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  border: 1px solid #999999;
  background-color: #ffffff;
  width: 50%;
}

.publisherPrefix {
  color: #888888;
}

.uniqueName {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
  color: #333333;
  min-width: 0;
  width: 100%;
  min-width: 0;
  border: 0;
}
<div class="uniqueNameContainer" dir="ltr">
  <div title="Publisher prefix" class="publisherPrefix">new_</div>
  <input name="uniquename" class="uniqueName" type="text" maxlength="36">
</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

Align Button to the Right Within a Div Container

Could someone help me figure out how to align a label to the left and a button to the right within a div tag? Currently, my label aligns perfectly but my button is not aligning correctly and may even be outside of the div tag. Any assistance is appreciated ...

htmlcss

Issues with jQuery causing responsive CSS triangles to fail implementations

Recently, I stumbled upon the interesting concept of CSS triangles created using element borders. I decided to incorporate this design into one of my custom Wordpress themes, but I encountered a problem. I wanted to add a triangle at the bottom of a div, l ...

jqueryhtmlcss

Ways to customize the appearance of an iframe's content from a separate domain

I am facing a challenge with my widget and multiple websites. The widget is hosted on one domain, but the websites use an iframe to display it. Unfortunately, because of the Same Origin Policy, I cannot style the content of the iframe from the parent websi ...

javascripthtmlcssiframe

Tips for modifying the color of selected text

Is there a way to change the color of the dropdown text? Currently, it is set to red but initially appears as black. When clicked on, it changes to red. How can I make it so that the color is initially displayed as red? <select> <option style ...

htmlcss

Are there any methods to create a circular z-index?

Is there a way in CSS to arrange #element-one above #element-two, then #element-two above #element-three, and finally #element-three above #element-one? Are there alternative methods to achieve this layout? ...

css

Redirecting a CSS link on a website

I have a webpage with a "read more" option that redirects to the About Us page. When I click on "read more", the About Us page opens at the top, but I want it to redirect to the bottom of the About Us page. How can I achieve this? ...

css

optimal method for displaying HTML strings with components in Vue

My website is a Blog/News site featuring posts that contain HTML content stored in the database. In addition to posts, I also want to include elements like sliders which cannot be generated using v-html. I explored Vue's Render Functions to find a so ...

javascripthtmlvue.jsvuejs2

Choosing JavaScript

<select> <script type="text/javascript"> $.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data){ var mydata = new Array(); var i = 0; // индекс масси ...

javascriptjqueryhtmlselect

How can I adjust the alignment of my menu items to be centered without using flexbox?

Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...

htmlcss

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...

cssreactjsfont-awesomematerial-uitailwind-css

Discovering indistinguishable "Feeling Fortunate" inquiries

My goal is to create a program on my website that can compare the top search results for different queries. For instance, I want it to recognize that the top search result for "twelve" and "12" is the same, leading to https://en.wikipedia.org/wiki/12_(numb ...

javascriptphphtmlnode.js

Utilizing a lone web element per row on a responsive webpage: A guide

click here for imageCurrently using the latest version of selenium web driver. Is there a method to utilize a single webelement (as a list webelement) in order to access row data on a responsive web page? For instance, consider the following CSS in the br ...

javacssseleniumselenium-webdriverresponsive-design

Reverse the order of jQuery toggle animations

Looking for something specific: How can I create a button that triggers a script and then, when the script is done, reverses the action (toggles)? (I am currently learning javascript/jquery, so I am a beginner in this field) Here's an example: ...

javascriptjqueryhtmlcssjquery-animate

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

htmlvue.jsvuejs2vuetify.js

What is preventing my accordion from closing completely?

I'm currently working on creating FAQ questions in an accordion format. However, I've encountered an issue where adding padding around the answer section prevents the accordion from closing completely. Removing the padding solves the problem, but ...

javascripthtmlcss

Utilizing ng-repeat to loop through a div element that consists of various nested tags

I need to display multiple tabs, with each tab having a table where the values are populated from a database. The number of tabs is dynamic and fetched from another page of the application. All tables have the same structure but different values. How can I ...

javascripthtmlangularjsangularjs-ng-repeat

Blazor Control in Razor Component Library (CSS Protection)

I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...

cssblazorblazor-webassemblyrazor-class-library

Highlight the parent name in the menu when I am on the corresponding child page

Here is a snippet of a recursive function: function recursive($arrays, $out) { if (is_array($arrays)){ //$out .= "<ul>"; foreach($arrays as $parent => $data) { //if parent is empty if ($parent === '') { ...

phpjquerycssrecursion

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

I encountered the following issue: A first chance exception of type 'System.Web.HttpException' occurred in System.Web.dll Additional information: Maximum request length exceeded. while attempting to upload 250 JPEG files, each around 98 KB in ...

c#asp.nethtml

How can an HTML5 application be configured to enable access to intranet and local files?

It's a known fact that accessing the local path of a file added using a file input field or drag-and-drop is not possible even with the new FileAPI. Whether this limitation is good, bad, or ugly is not up for debate. The FileAPI specs clearly state th ...

javascripthtml