jQuery Mobile: issue with positioning an external panel on the right side

I am looking to incorporate an external header and two external panels, one on the left and one on the right. The challenge is to ensure that these panels remain visible at all times on larger screens.

I encountered some difficulties positioning the panels with an external header (internal worked fine). I was able to resolve this issue for the left panel by using:

position: absolute;
left: 0;
top: 4em;

However, I faced a problem with the right panel when using:

position: absolute;
right: 0;
top: 4em;

This caused the right panel to be placed above the left panel.

You can view this scenario in action on this jsFiddle: https://jsfiddle.net/9eb4mekr/

When I tried using 

position: relative; float: right;
instead, the right panel shifted to the right but ended up below every other panel (you can test it out in the jsFiddle).

Do you have any suggestions on how to properly position external panels alongside an external header while ensuring they remain visible at all times on large screens?

javascriptjqueryhtmlcssjquery-mobile

Answer №1

The issue has been identified, and thanks to the assistance of Tasos Anastasiou, a solution has been found. By setting the header position to fixed using data-position="fixed" in the header div, the relative positioning now functions properly on both panels.

To view the updated and functional jsFiddle demonstration, click here: https://jsfiddle.net/vhkmok8o/

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

Empty page displaying JSON output following form submission through AJAX

I'm attempting to implement an AJAX login feature on my web application. However, upon submitting the login form, I am faced with a blank page displaying JSON responses. For instance, upon successful login, I receive: {"success":true} When incorrect ...

phpjqueryajaxlaravel

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

htmlangularjs

Display popup when hovering over an li element, but only after one second of hovering over it

My goal is to display an inner div when hovering over an li element. I have implemented a fadeIn and fadeOut effect, but the issue is that if I quickly hover over all li elements, the fadeIn effect triggers for all of them. Ideally, the inner div should on ...

javascriptjqueryhtmlhover

Navigating through an array of functions, some of which may return promises while others do not

Is there a way to efficiently iterate and execute an array of functions where some return promises, requiring the use of await, while most do not return promises, necessitating them to be set as async? for (let i = 0; i < this.steps.length; i++) { ...

javascriptnode.jsgenericsasync-awaitpolymorphism

Issues with the use of overflow:hidden

I need to create 5 divs aligned horizontally next to each other, spanning the width and height of the window. Each div should occupy 20% of the window width, and any overflow content should be hidden. Below is the CSS code for two of the divs: #container1 ...

htmlcss

What could be the reason behind the index not getting properly set for the array that was cloned afterward?

I need assistance with a code snippet that clones an array, resets the index (0, 1, 2 ...), and stores it in a variable named buildingsPayload: console.log('1:', this.buildings) const buildingsPayload = this.buildings.map((building, index) => ...

javascript

CSS styles are not getting rendered by Firefox when loading content using jQuery AJAX

My website allows users to comment on books and articles, with a search input to find relevant sources. Using jQuery, I dynamically load new sources from an outside site based on search terms and display them in a list using AJAX. However, I’m facing two ...

jquerycssajaxfirefox

Run a Javascript function when the expected event fails to happen

I currently have this setup: <input type="text" name="field1" onblur="numericField(this);" /> However, I am struggling to figure out how to execute the numericField() function for the element before the form is submitted. I attempted using document ...

javascript

I'm facing an issue with my LAMP stack where the image appears when I access it through a URL, but doesn't seem to load when I try to load it using jQuery

My PHP file is located at path/renderer/renderImage.php and it generates a PNG image that displays correctly in the browser when I visit the URL directly. However, when I try to load this image into a DIV using jQuery from path/index.html with the followin ...

phpjqueryhtmllamp

Is ngx-translate the key to implementing localization (internationalization) in Angular 4+?

I am currently working on localizing content in Angular. I am encountering some difficulty in localizing async observables. Below is an example of how I have implemented localization for regular HTML without using async: <p class="pageTwo" [translate] ...

htmlangularlocalizationinternationalizationngx-translate

Unable to locate the module model in sequelize

Having some trouble setting up a basic connection between Postgres and SQL using Sequelize. I keep getting an error where I can't require the model folder, even though in this tutorial he manages to require the model folder and add it to the sync, lik ...

javascriptnode.jspostgresqlsequelize.jssequelize-cli

What are the various ways to display time zone in a different format?

I need to display the timezone in a unique manner. I have captured the user's timezone in a variable called timeZone, which currently returns the value as Asia/Calcutta. console.log(timeZone) // "Asia/Calcutta" Is there a way to showcase the timezon ...

javascriptjquerymomentjs

How can I enable drag-and-drop functionality for my carousel?

I'm encountering an issue with my carousel. I utilized a bootstrap carousel template and added my own images for the slides. I included jQuery to make it draggable, along with the necessary CDN links. However, while it is now DRAGGABLE, it no longer c ...

htmljquerybootstrap-5

Locating Undiscovered Users within mongodb

I have created a post collection where each user who marks a post as read has their user ID added to an array within the post document. Now, I am attempting to identify which users have not read certain posts by utilizing the $nin function while iteratin ...

javascriptnode.jsmongodbexpress

Incorporating React into an existing jQuery single page application

My current dilemma involves transitioning from a jQuery-built single page app to React. The challenge I'm facing is that, when building sections at a time, issues arise during the process. One major obstacle is the necessity of passing in a parent "r ...

javascriptjqueryreactjsfrontend

Unable to access properties of an unknown item (reading 'remove')

Can you provide guidance on how to remove the top-level parent element of a div? I've been attempting to delete the main parent element of a specific div. element.innerHTML = ` <div class="postIt-item"> <div class="postIt-item-btn ...

javascript

Objects become visible over a sphere only when they are positioned behind it

I am currently working on a project to create a dynamic rotating globe with points of interest marked on it. The globe rotates, and I want the points of interest to be visible whenever they are in view. However, I am facing an issue where the points of in ...

javascriptthree.js

Having issues with sitemap.xml functionality in Next.js post build

I've encountered an issue while working on my Next.js project. Everything runs smoothly in development, but once I build the project for production, the /sitemap.xml URL doesn't return any data. To address this problem, I created a sitemap.ts fi ...

javascripttypescriptnext.jssitemap.xml

Creating a calculator with JQuery and encountering challenges with performing multiple calculations

I've been working on a calculator using jQuery, but I'm encountering issues with the clear button not functioning properly after multiple calculations. On top of that, subsequent calculations are producing inaccurate results. I am seeking to enh ...

javascriptjqueryhtml

issue encountered when attempting to update a counter using jQuery within a loop in Django

There is an issue where only the last product in the cart gets updated when clicking the increment or decrement buttons. However, manually updating the value for other products and then clicking the button works without any problem. This is the HTML code ...

pythonjquerydjango