Using the fieldset element in AngularJS Material causes disruptions in my flex layout

My current issue can be illustrated through two code examples:

The first example functions properly when the fieldset is not included.

In the second example, including the fieldset causes the layout to extend beyond the window when there is long text (in full-page view).

Shortening the text resolves the issue and the layout conforms to the flex layout.

The challenge I'm facing is that excluding the fieldset in the current layout works well in Chrome and Firefox, but fails in IE11. When I add the fieldset, the layout looks good in all browsers, but the mentioned problem arises when adding a long text in the text field. Unfortunately, this text field is for posting a link, so it is expected that the text can easily become lengthy.

I came across a post showing a rough representation of how my page looks without the fieldset.

https://github.com/angular/material/issues/5084

Here are the two code snippets: the functioning one:

angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">

<!--   <fieldset> -->
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley...
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
<!-- </fieldset> -->
</body>

and the non-functional one with fieldset enabled:

angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">

<fieldset>
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas...
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley...
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
</fieldset>
</body>

Question

Is it possible to resolve the layout issue with the fieldset? If so, how can this be achieved?

javascriptcssangularjsflexboxangularjs-material

Answer №1

To resolve the width issue with the fieldset, simply add min-inline-size: auto as the browser's user-agent sets min-inline-size: min-content by default. This fix will not affect user agents that do not support this property.

Check out the demonstration below:

angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">
<fieldset style="min-inline-size: auto">
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
</fieldset>
</body>

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

Entity Framework and the GET request error: Connection Reset

Currently, I am working on developing a straightforward notes application using Entity Framework in ASP.Net Core for the backend and AngularJS for the frontend. The main objective is to have the app load a pre-existing list of notes from my MySQL database ...

javascriptangularjsapientity-frameworkasp.net-web-api

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Currently, I am executing a script inside a Pug template. The script commences by fetching an array of JSON objects from MongoDB. I then stringify the array (data) and proceed to loop through it in order to access each individual JSON object (doc). Subsequ ...

javascriptarraysnode.jsjsonpug

Automatic button rotation

I managed to set up a button that works on click with a delay, making it semi-automatic. However, I'm struggling with getting it to not pause after just one click. Here's what I have so far: <!DOCTYPE html> <html> <body> &l ...

javascripthtml

Hamburger must be used in order for the menu to be displayed

Whenever I visit the site, the menu remains hidden. However, when I resize the page and use the hamburger icon, the menu appears as expected. Even after resizing the page back to its original size, the menu continues to be visible. Refreshing the sit ...

htmlcss

What is the best way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

I am facing an issue with my page that displays transaction search results. I have a search filter based on the "Token" column and when clicked, the search criteria should be set, and the search params should be passed as form-data in a POST method. Howeve ...

javascriptjqueryrubyajaxruby-on-rails-3

Guide to displaying the output of a JS calculation in a Bootstrap modal dialog box

I have a HTML and JavaScript code that determines the ideal surfboard for the user based on their input data (style, experience, height, weight) and displays the recommended surfboard type. Here is the initial code snippet I attempted to use: function c ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

A gojs swim lane diagram requires a date axis to provide accurate time representation

I am currently working on a web application that requires a vertical swim lane activity diagram with a customized date axis displayed alongside it. The nodes in the diagram should be positioned based on their date attribute, and users should have the abili ...

javascriptd3.jsactivity-diagramgojs

Ways to showcase Material-UI Grid components without using cards

I initially used Material-UI grid items for spacing adjustments, but now they are displaying as cards. I would prefer them to be invisible like before, but the documentation doesn't provide a solution for this issue. Any assistance would be greatly ap ...

javascriptreactjsmaterial-ui

Show the checked options retrieved from controller

I am facing an issue with displaying certain checkbox values from the controller. In order to properly save these values, I believe it would be best to declare them in the controller and then use them in the HTML. However, my current code is not successful ...

htmlangularjs

Can a client receive a response from server actions in Next.js 13?

I'm currently developing a Next.js application and I've created an action in app/actions/create-foo-action.js. In this server action, I am attempting to send a response back to the client. import { connectDB } from "@utils/database" imp ...

javascriptnext.jsserver-side-renderingnext.js13server-action

How can I distinguish the search results from the while loop section at the bottom of the page?

One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

phphtmlcssfooter

Assistance in changing an onClick function in JavaScript to onLoad

I've been working on updating a JavaScript function to trigger both on page load and window resize instead of just a click event. In the code snippet below, I've made adjustments by commenting out the section related to the click event, added "wi ...

javascriptjqueryresizewindowonload

Creating a multi-dimensional array in order to store multiple sets of data

To generate a multidimensional array similar to the example below: var serviceCoors = [ [50, 40], [50, 50], [50, 60], ]; We have elements with latitude and longitude data: <div data-latitude="10" data-longitude="20" clas ...

javascriptjquery

Tips for organizing three flexbox divs in a horizontal row

Within the content div, I have three separate divs that resize when the browser window is adjusted. The blue and red divs should maintain a fixed width The green div should resize to fill any available space on the left I attempted to accomplish this usi ...

htmlcss

Dealing with VueJS - Sharing an array of data from a child to a parent component using v-model

I am facing an issue in emitting data (array) from a child component to a parent component using v-model. However, when the parent component is created, my console.log does not work. I am hesitant to work with Vuex as I am still a beginner. Here is my chi ...

javascriptvue.jsevents

Concealing anchor and span elements using CSS in Internet Explorer 7

I decided to simplify things by creating a style within the document to address my specific issue. The problem I encountered involves a row of 4 links that are designed to resemble buttons. I have chosen to hide the Next link (the 3rd item) using CSS. Whil ...

css

What could be causing the footer to not show up at the bottom of the page?

I've encountered an issue with my code where the footer appears to be stuck at the bottom of the h2_c div instead of the bottom of the .content div where it should be. I have tried using positioning but it hasn't resolved the problem. Thank You. ...

htmlcss

What is the reason for Firefox displaying the "excessive recursion" error message?

I have been working on generating an area Google chart using the code below, but I am running into an issue where Firefox is showing me a "too much recursion" error. The chart currently only has one point for testing purposes. Can anyone provide some gui ...

javascriptfirefox

Exploring the capabilities of using Next.js with grpc-node

I am currently utilizing gRPC in my project, but I am encountering an issue when trying to initialize the service within a Next.js application. Objective: I aim to create the client service once in the application and utilize it in getServerSideProps (wit ...

javascripttypescriptnext.jsgrpcgrpc-node

Is it possible to load Javascript using AJAX with jQuery?

So I have this JavaScript code that I insert into a webpage using the following: <script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script> It basically places an object/embed code into the w ...

javascriptjqueryajax