Adjusting Height of Left Menu in JQuery Panel

I am facing a challenge with my left menu, created using jQuery panel. Currently, the height of the menu is set to full screen. However, I would like to adjust it so that its height matches the content within (in this case, the ul attribute). Despite trying to manually edit the height from the div style (setting width:100px;height:10px), I have not been successful. Can anyone explain why jQuery panel behaves in this manner?

Does anyone have any suggestions or solutions for this issue?

<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<!--LEFT TOP MENU PANEL-->
    <div data-role="panel" id="leftMenu" data-position="left" data-display="overlay" data-theme="a" data-overlay-theme="a" style="width:170px;">
        <ul data-role="listview">
            <li data-icon="false"><a id="a" href="#">Show A Items</a>
            </li>
            <li data-icon="false"><a id="b" href="#">Show B Items</a>
            </li>
            <li style="display:none" data-icon="false"><a>Show C Items</a>
            </li>
            <li data-icon="false"><a id="c" data-transition="none" href="#show_pollen">Show D Items</a>
            </li>
        </ul>
    </div>
javascriptjqueryhtmlcss

Answer №1

After some tinkering, I made adjustments in jquery.mobile.css. I located the min-height property for .ui-panel and changed it to 0%, it's also worth noting that max-height is now set at 20%. 

.ui-panel{width:17em;min-height: 0%;max-height: 20%;border-width:0;position:absolute;top: 160px;display:block;}

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

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

javascriptjquerycsscarouselowl-carousel

Is it possible for node modules to access and utilize protractor parameters?

Is it feasible for a node module to access a protractor parameter? I am in need of defining a parameter in my protractor conf.js file and then running a specific section of the shared node module js file across 5 projects. For instance, in my conf.js: ...

javascriptnode.jsangularprotractornode-modules

Using HapiJs in Node.js to communicate data back and forth with the client

I have client.js and server.js files that are used to send data to my server using ajax. I am able to successfully send the searched username, but on the server side, the domain is being received as undefined. I'm unsure if the issue lies on the clien ...

javascriptjqueryajaxnode.jshapi.js

What is the process for receiving updates while subscribing in ReactReduxContext.Consumer?

I am currently seeking a solution to staying updated on changes to a stored value in the Redux store by subscribing. I have attempted the following method: <ReactReduxContext.Consumer> {({store}) => { console.log('store:& ...

javascriptreactjsreduxreact-redux

Adding Screens dynamically in React Native allows for dynamic routing and the

I am looking to dynamically add screens from a flexible array. This approach is successful: https://i.sstatic.net/YuDkE.png However, I encountered an issue with this method: https://i.sstatic.net/gkJGm.png The error message reads: Error: Couldn't fi ...

javascriptreactjsreact-nativereact-navigation

Securing data in the browser using JavaScript encryption and decrypting on the server side using Node.js

After hours of trying to encrypt a message using AES256 in the browser, send it to the server, and then decrypt it, I keep encountering this server-side error: error:06065064:digital envelope routines:EVP_DecryptFinal_ex:bad decrypt Despite using crypto- ...

javascriptnode.jsencryption

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss

The background of the ACTK Modal Popup vanishes after multiple instances of scrolling up and down

The issue I'm facing is with the AJAX Control ToolKit Modal Popup's background (the blind curtain) disappearing after scrolling up and down several times. I have attempted to resolve this by applying various CSS styles, but unfortunately, none of ...

asp.netcssasp.net-ajaxajaxcontroltoolkitmodalpopupextender

"Implementing a dynamic image thumbnail list with adjustable opacity effects and the ability to add or remove classes

I found a script on another post, but it's not working correctly in my implementation. Everything is functioning properly except that the "selected" class is not being stripped, causing the thumbnails to remain highlighted after being clicked. Here is ...

javascripthtmlthumbnailsopacity

I'm facing a MongooseServerSelectionError: when trying to connect to 127.0.0.1:27017. Despite trying all the solutions provided on StackOverflow, the issue persists

MongooseServerSelectionError: Failed to connect to 127.0.0.1:27017 at NativeConnection.Connection.openUri (/mnt/d/Ecommerce/node_modules/mongoose/lib/connection.js:802:32) at /mnt/d/Ecommerce/node_modules/mongoose/lib/index.js:341:10 at ...

javascriptmongodbexpress

jQuery scripts were not loaded, resulting in an uncaught type error

Hey there! I am currently using jQuery Tablesorter to handle pagination on my website, but it seems to be throwing an error in the browser console. The specific error message reads: Uncaught TypeError: undefined is not a function viewTags:24 (anonymous fu ...

javascriptjquerypaginationtypeerror

Adding products to an owl-carousel in an HTML document using JavaScript

When I try to add my products to an owl-carousel using JavaScript, the display is not correct. My HTML code looks like this: <div class="container mt-5 mb-5" data-aos-anchor-placement="top-center"> <div class="owl-carouse ...

javascripthtmlcssbootstrap-4

Utilize Google APIs to detect the geolocation of a user and use jQuery to fetch and display the current weather information for that location

Utilizing Googleapis for Geolocation and Openweathermap for Current Weather via jQuery I'm attempting to retrieve the current location and obtain the current weather for that specific area. Below is my jQuery code: $(document).ready(function(){ ...

javascriptjqueryjsonapigeolocation

Customize Your ERPNext Website: Displaying a specific type of Blog Posts

Is there a way to display only a specific category of Blog Posts in a Webpage Section created using the Page Builder? I have designed a Web Template in EPRNext that showcases Blog posts on any webpage by adding a Section through the Page Builder. It' ...

htmlbootstrap-4jinja2erpnextfrappe

Displaying several modals with a backdrop on top of one another using Bootstrap

My issue involves two modals: one that displays appointment information with a delete button, and another that serves as a warning before deleting. I want the delete-warning modal to overlay a backdrop on the modal beneath it, graying it out. However, both ...

htmlcssbootstrap-4bootstrap-modal

Using PHP and Angular.js to pass return value to error callback function

Is there a way to handle error callbacks in PHP and angular.js when an SQL query fails to execute? Let me share my code below for better understanding. session.php: <?php session_start(); $connect = mysqli_connect("localhost", "root", "Oditek123@", ...

javascriptphpangularjs

Tips for successfully retrieving a span value in VUE

I am working with forms <input type="text" v-model="email"> <span>Extracted Value</span> Can someone help me figure out how to pass the value from the span element? data () { return { email: '/*Here goes the extracted valu ...

javascriptjqueryapivue.js

Transforming varied JavaScript objects into a serial form

In my application, there is a concept of an interface along with multiple objects that implement this interface in various ways. These objects are created using different factory methods, with the potential for more factories to be added as the application ...

javascriptjsonpolymorphism

Implementing jQuery form validator post anti-SPAM verification?

I am facing what seems like a straightforward JavaScript issue, but my knowledge in this area is still limited. Following a successful implementation of basic anti-SPAM feature that asks the user to solve a simple math problem, how can I integrate jQuery& ...

javascriptjquery-pluginsspam-prevention

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

My directory structure is as follows: - project |- build |- src |- index.ts |- file.txt The typescript code is compiled to the build directory and executed from there. I am seeking a dependable method to access file.txt from the compiled module without ...

javascriptnode.jstypescriptpath