The issue of 'position: fixed' not properly functioning within the Materialize CSS modal

My goal is to have the header of the Modal stay fixed while scrolling, but for some reason, the option position:fixed; is not working. I am currently using Materialize CSS to build the modal and surprisingly, position:sticky; is working.

$(document).ready(()=>{
   $('#missionModal').modal();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
    <div class="">
        <div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">

        </div>
        <div style="margin-top:100px;height:550px">
            <p>This ois naven don</p>
        </div>
    </div>
    <div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
    <i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

javascriptjqueryhtmlcssmaterialize

Answer №1

Perhaps give this a try. I have revamped your HTML and CSS code:

To make the modal body scrollable, specify a fixed height for it after identifying your header. Additionally, Materialize CSS has a default overflow-y: auto property which I set to initial to disable scrolling for the entire modal.

Please review my updated code below:

$(document).ready(()=>{
   $('#missionModal').modal();
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.modal {
  overflow: initial !important;
}

.modal-header {
  height: 100px;
  background: #0a2701;
  font-size: 40px;
  padding: 20px;
  color: #ffffff;
}

.modal-body {
  overflow-y: auto;
  height: 120px;
background: #fff;
}

.modal-body div {
  height:550px
}

.modal-close {
  float: right;
  display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
  <div class="modal-header">This is a header.</div>
        <div class="modal-body">
          <div>
            <p>This ois naven don</p>
          </div>
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
</div>

<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
    <i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

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

The specialized element encountered an issue with mapping

For a while now, I've been trying to create my own custom component but it's not working as expected. The interaction seems fine, but for some reason, it only renders the last item in the arrays. export default class MyComponent extends Comp ...

javascriptreactjs

Utilizing Vue.js to incorporate the isActive property to the class name within a v-for loop, along with implementing dynamic class names

I am currently using a loop to iterate through some data in my store.js file, and everything is functioning as expected. However, I would like to add a condition to check if the Vue instance is active before applying a specific class to the polygon element ...

javascriptcssvue.js

jQuery locates all elements with a specific class after all other elements

I am working with multiple dynamically generated divs that share the same class. The amount of these divs can vary, so I do not have a fixed number in advance. My goal is to insert an additional div after the last one in the sequence. <div class="some ...

jqueryjquery-selectors

Tips for organizing and sorting date data in a JSON datatable

I am working with two date input fields: <form id="refresh" method="post" action="income.php"> <input type="text" id="dari" name="dari" /> <input type="text" id="sampai" name="sampai" /> <button type="submit">Refresh</b ...

javascriptjqueryjsonajaxjquery-ui

Is it possible to construct an IFrame using URL parameters?

Looking to implement an iframe that displays a page provided as a parameter in the URL using ASP.NET MVC4. Here's the approach I have in mind: Updated the code but it still doesn't seem right to me. <?php if(!isset($_GET['link'] ...

phphtmlasp.net-mvc-4

chosen problem concerning jquery

My objective is to transfer li elements from one container to another container when the user clicks on the li span. I have a choices container and a choices display, so when a user clicks on the li span with the id of "add" in the first container, the r ...

jqueryhtmlcssevents

Utilize select2 for dynamically loading an external html component

When the page is loaded, it includes another HTML page with a select element that I want to style using select2. The basic page structure looks like this: <select class="selectAddItem" id="selectAddItem" name="selectAddItem" style="width: 150px;" clas ...

javascriptjqueryajaxjquery-select2

Leveraging the power of Express.js, transmit local data alongside a

Why can't I display the active user in my view using plain HTML when console log shows it? Here is the code snippet: app.post('/', function (req, res) { var user = { user : req.body.username }; res.render('doctor_hagfish/pets&ap ...

javascriptnode.jstemplatesexpress

Setting up SSL/TLS certificates with Axios and Nest JS

I have a Nest JS application set up to send data from a local service to an online service. However, the requests are not working because we do not have an SSL certificate at the moment. Can anyone provide guidance on configuring Axios in Nest JS to accept ...

javascripttypescriptnest

Performing a validation check on a value upon pressing a button prior to its submission

Hey there! I'm pretty new to React and could use some help with validating a value before using it in my partialRefund function. I want to make sure the value is not empty and is numeric before proceeding with the partialRefund operation. The first ...

javascriptreactjs

Tips for comparing two attributes using Simple HTML DOM libraries

I'm attempting to retrieve a very specific tag using Simple HTML DOM, and I need to check two attributes in order to do this. However, I am unsure of the correct syntax. Currently, my code looks like this: foreach($html->find("ul[class=someclass]" ...

phphtmlsimple-html-dom

Implementing Browser Back or Back button in AngularJS

Currently, I am developing an application that utilizes route methods to navigate between webpages for different modules. Essentially, it is a single page application with route methods responsible for loading the HTML content in the body section. The iss ...

javascriptangularjsback

Issues with implementing the Skeleton feature in the Alert module

Having an issue with a Skeleton component not taking full width inside an Alert component. It seems to be occupying less space than expected. https://i.stack.imgur.com/cMLEy.png Here is the relevant code snippet: <Alert icon={<NotificationsIcon s ...

cssreactjsmaterial-ui

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...

javascriptreactjstypescriptcomponents

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

Reactive forms in Angular now support changing focus when the Enter key is pressed

I have successfully created a table and a button that generates dynamic rows with inputs inside the table. One issue I'm facing is that when I press enter in the first input, a new row is created (which works), but I can't seem to focus on the ne ...

javascriptangulartypescript

Using a three.js texture with a JSON object

Currently, I am working on a customization project where I am using three.js to export an HTML5 canvas as a 3D preview. My goal is to have the texture placed only on the front side, but it seems to appear on all sides instead. This is the code I am using: ...

javascriptthree.js

This function is designed to only work under specific conditions

Looking for assistance with a function that takes an item ID as input and changes its border when pressed. The goal is to increase the border width by 2px when there is no border, and remove the border completely when pressed again. Currently, only the f ...

javascript

Create a new NVD3 graph with a vertical line added

I am working with a NVD3 graph that displays a simple data set. My goal is to draw a line over the graph in a different color (similar to a cut-off value, which will be at x=5) <meta http-equiv="content-type" content="text/html; charset=UTF8"> <s ...

htmlangularjsnvd3.js