Optimize your mobile experience by creating a notification menu that is scrollable and fixed in position

Recently, I purchased Moltran, but encountered a major issue: The notification menu disappears on mobile devices, which is not ideal for me. After some research, I discovered that removing the hidden-xs class from the li notification element can solve this problem. By changing 

<li class="dropdown hidden-xs open">
to <li class="dropdown open">, the issue was resolved.

I then proceeded to expand the small menu to full width on smaller devices for better user experience:

@media (max-width: 767px) {
    .nav > li.dropdown:not(.hidden-xs).open .dropdown-menu {
        width: 100vw;
    }
}

Everything seemed perfect until I encountered one obstacle: scrolling within the menu was not possible. On my 5" smartphone, three elements at the end of the menu were hidden and scrolling simply affected the background due to its absolute position.

To illustrate this issue further, I have provided a simple demo on the online demo. In this demonstration, I removed the hidden-xs class to ensure the menu appears on smaller windows as mentioned earlier in the code: 

<li class="dropdown hidden-xs open">
.

When the window size is very small, users are unable to see the full notification menu or scroll through it effectively:

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

As depicted in the image above, even though the scrollbar indicates content below, it does not allow access to view all notifications due to the issue with scrolling. I attempted various solutions, including changing position types, but none proved successful in resolving the problem caused by absolute positioning. I seem to be at an impasse.

Hence, my query is: What modifications should be made to maintain the current functionality while enabling smooth scrolling within notifications on smaller devices?

javascriptjqueryhtmlcssnotifications

Answer №1

It seems that setting the overflow property on your navigation bar might solve the issue you are experiencing.

.topbar{
    height: 100%;
    background: transparent;
    overflow-y: auto;
}

UPDATE: By setting the height of the topbar to 100%, it may cause it to overlap all other elements on the screen.

Alternatively, you can apply a separate class when the notification button is clicked and style the element accordingly. Here's an example:

.topbar.notification-open{
    height: 100%;
    background: transparent;
    overflow-y: auto;
}

You can then use jQuery to toggle this class:

$('.dropdown-toggle').click(function(){
    $(this).closest('.topbar').toggleClass('notification-open');
});

Answer №2

If you want the notification panel to be scrollable, you can use the following CSS:

.navbar-nav .open .dropdown-menu {
  background-color: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  left: auto;
  position: absolute;
  right: 0;
  z-index: 100;

  // Additional code needed

  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* allows lazy scrolling */
  max-height: 500px; //or adjust as needed
}

By adding this CSS, your notification panel should now be scrollable. I hope this solution helps you.

Answer №3

To ensure your notification area displays properly on small devices, you can set a fixed height using a media query and add overflow-y:auto. Make sure to specify the height in pixels only. For instance, if "notification_area" is the class for your div element...

@media (max-width:600px){
.notification_area{
    overflow-y:auto;
    height:300px;
    }
}

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

Select the default option and what occurs in the event of an HTTP connection

I am currently facing an issue with two aspects. Firstly, I am struggling to set a default option in my Select element. Despite using ng-model, it only displays a blank option at the moment: <select class="form-control" ng-model="pageSize"> ...

javascriptangularjsnode.js

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

What are the best techniques for resizing a Text Field with media queries?

The contact form is responsive and functioning correctly for the textarea field, but there are issues with the input type=text fields on smaller screens. I attempted to address this by incorporating media queries. Below is my code: <!doctype html> ...

htmlcssmedia-queriesresponsive

I successfully converted a d3 chart to a base64 image format and now I am looking to share it on Facebook using either client-side JavaScript or Angular

After generating a base64 image from a cool d3 chart, my next challenge is figuring out how to share it on Facebook using either client-side javascript or Angular. Any suggestions? ...

javascriptangularjs

Struggling to update the position of an array and dynamically show its contents using Angular

I am working with an Array of Objects, each containing an Array of strings. Utilizing ng-repeat to display all the strings, I have a button to switch to the next set of strings by changing the selected object in the outermost array. Below is the code snipp ...

javascriptangularjs

Using this.setState in ReactJS removes filters

Hey everyone, I've been struggling with a technical issue for the past few days and would really appreciate any hints or solutions. The problem lies in creating a table using the material-table library. Specifically, I need to extract the docID and do ...

javascriptreactjsstatesetstate

Troubleshooting: Ngx-Echarts Animation Issue at Startup

I've been working on integrating ngx echarts into my Angular app, but I'm facing an issue with the animation during the initial load of the chart. Take a look at this Stackblitz example where you can see that the bars render quickly on initial lo ...

htmlangulartypescriptapache-echartsngx-echarts

Steps to develop a log-in API using Node.js

In the process of developing my web application, I have utilized node js exclusively for all functionalities and the web user interface has been successfully implemented. An issue that has come to light is that users are able to access the services API wi ...

javascriptnode.js

Looking to distinguish selected options in a multiple select in AngularJS by making them bold?

When working with Angular, I have a multiple select drop down with options such as Select fruits, Apple, Orange, Banana. How can I make the selected options, like Banana and Apple, appear in bold and change background colors? ...

htmlcssangularjsselect

Storing the DOM in a Variable

I have saved the response of an XMLHttpRequest() into a variable from a specific website, let's say yahoo.com. How can I retrieve the values of the DOM content using either getElementById or getElementsByName on this variable? For instance: var dump ...

javascriptjqueryhtmlxmlhttprequest

Problem with jQuery Window Resize Trigger Not Reactivating

I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented onl ...

javascriptjquerycsstabsslider

Using onChange input causes the component to re-render multiple times

As I delve into learning React, I've encountered some challenges. Despite thinking that I grasped the concept of controlled components, it appears that there's a misunderstanding on my end. The issue arises after an onChange event where I notice ...

javascriptreactjsmultiple-input

Unable to retrieve the desired information from the jQuery AJAX request

Here is an example of a C# web method: [WebMethod] public string Greetings() { return "Greetings from the server"; } This is the jQuery AJAX code used to call the web method: $.ajax({ url: "http://10.0.2.2/SampleService/ ...

c#jqueryajaxweb-services

Personalize your jQuery stack chart

I want to create a bar chart that plots users against work performance. I have been looking into using canvasjs.com to implement it as a stack chart, like shown https://i.sstatic.net/FdzRD.png However, I need to divide each section based on time. I am aim ...

jquerychartscanvasjs

Is it recommended to utilize a "default" key within an object?

Creating a JavaScript application and looking to establish a config object. Here's what I have so far: var config = { localization: { locales: ['en', ..., 'de'], defaultLocale: 'en' } } Consideri ...

javascriptobjectdefaultconfig

Designing a form within a div container while ensuring that the content remains contained

I've been struggling to perfect this formatting for quite some time now. While I've come across many similar examples to what I'm aiming for, I just can't seem to get it right. My goal is to create a form that will "popup" using JS for ...

htmlcssnested

Troubleshooting a malfunctioning PHP form that uses jQuery and AJAX

Snippet of HTML code: <form class="contact_form" action="" name="contact_form"> <ul><li> <input type="email" name="email" placeholder="Please enter your email here" required /> </li><li> <button class="submit" type=" ...

phpjqueryhtmlajaxforms

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

javascriptjqueryhtmlselect

Incorporate Add to Homescreen functionality into your Angular 4 Project using JavaScript

Currently I am in the beginning stages of learning Angular development. One of my assignments involves integrating the add to homescreen jQuery plugin into one of my pages. This is my attempt at implementing it in my home.component.ts file: ngAfterViewIn ...

javascriptjqueryiosangular

What is the best method to extract the values of objects in an array that share

var data= [{tharea: "Rare Disease", value: 3405220}, {tharea: "Rare Disease", value: 1108620}, {tharea: "Rare Disease", value: 9964980}, {tharea: "Rare Disease", value: 3881360}, ...

javascripttypescript