Moving the final item in the list to the end

I've chosen to implement the Vali Admin theme and am currently attempting to move the last list item in the left sidebar to the bottom.

While I have limited experience with flexbox, I decided to change the menu to display: flex and followed the steps outlined in this answer to achieve the desired effect. My objective is to replicate the exact outcome described in that reference.

Here are the adjustments I made to the theme:

.app-menu {
  @extend .app-menu;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;

  li:last-of-type {
    margin-top: auto;
  }
}

You can view a functioning example in this fiddle.

It seems that the issue may be related to the menu not utilizing its full height potential.

I would be happy to provide a working snippet, but unfortunately, I struggled to create one using jsfiddle. Local files are not allowed, and it poses an issue with my gist as well as Codepen.

htmlcssflexbox

Answer №1

To transform .app-sidebar into a flexbox layout, add the following CSS properties:

  display: flex; // Enables flexbox layout
  flex-direction: column; // Arranges items in a column direction

This change allows for applying flex styling to its child elements effectively.

After making the sidebar a flexbox, insert the code below within .app-menu:

    flex: 1; // Utilizes all available space within the sidebar

Additionally, eliminate the padding-bottom on .app-menu to ensure that the final item remains positioned at the bottom without any padding.

Answer №2

give this a shot

.application-menu {
    padding-top: 20px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: flex-start;
    flex-direction: column;

If you want the last item to stay at the bottom of the page, try setting the ul's height to 100%

Answer №3

To ensure proper functionality, it is essential to follow the instructions provided in the attached link. However, one crucial aspect that may have been overlooked is setting the height of the ul element to 100%. By adding the CSS rule height: 100%; to the .app-menu class, you can resolve this issue effectively.

For a visual representation, refer to the example below:

https://jsfiddle.net/abc123de/3/

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

"Exclusive Mui sx styles will be applied only when a specific breakpoint

As I update my old mui styling to utilize the sx attribute, I've noticed the ability to specify styles for different breakpoints using sx = {{ someCssProp: { xs: ..., md: ... and so on. Prior to this, I had been using theme.breakpoints.only for some ...

javascriptcssreactjsmaterial-uibreakpoints

Creating a table with a tableHead cell comprised of multiple components in ReactJS/CSS using Material UI

It's possible that the title lacks description. I am attempting to generate a table with a specific layout like this Essentially, the "Average" cell is combined with two smaller cells for "height" and "width," which can be subdivided further. Unfortu ...

htmlcssreactjsmaterial-ui

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

htmljquerycssweb

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

javascripthtmlcssreactjsmaterial-ui

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unpr ...

htmlcss

Angular Square Grid Design

Attempting to create a square grid layout using CSS for ng-repeat items. Essentially, I am looking to have one big square followed by four smaller squares that combined have the same width and height as the big square. Here is my CSS: .container{ widt ...

javascripthtmlcssangularjs

updating numerous div elements using the jQuery load function

My SQL database contains various data, and on my webpage, I have numerous divs (around 30) showcasing this information. Each div corresponds to a different value in the database. My goal is to dynamically refresh these divs using the jQuery item.load() f ...

jqueryhtmlajaxcomet

Determine the amount of unused vertical space within a block of text

Having applied CSS to a span element: font-height = 120px; height = 120px; line-height = 120px; The text inside the span does not completely fill the height of 120px. Is there a method to determine the offset of the text from the top and bottom boundar ...

javascriptjquerycss

Decoding JSON with HTML in c#

While serializing an object into JSON that contains HTML, I encountered a unique issue. Below is the structure of my class: [Serializable] public class ProductImportModel { public string ProductName { get; set; } public string ShortDescription { get; ...

c#htmljsonentity-frameworkserialization

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

pythoncssscrapyweb-crawler

Adjust the scroll position when the height of a div is modified

Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...

javascripthtmlcssvue.js

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

Hovering over an option in Vue-Bootstrap b-select

I'm working with the Vue-Bootstrap framework and I need to update the CSS rule for the 'option' tag when it is being hovered over. Here is my code snippet: jsfiddle option:hover { background-color: red; } Can someone please explain why ...

cssvue.jshoverbootstrap-vueselect-options

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

I am having trouble with the Bootstrap 5 column not functioning properly within my design

Currently working on a project with Bootstrap, where I am trying to create a footer that looks like the one in the image below: https://i.stack.imgur.com/XIbDk.png Below is the HTML code snippet for my footer: <footer class="footer"> <div class ...

htmlcsstwitter-bootstrap

Restrict the number of simultaneous image downloads in HTML

I am currently seeking the most effective solution for throttling image downloads in a Single Page Application. Issue: When on a slow network and navigating to a details page, there is an overload of image downloads occurring which pushes browser connect ...

htmlimage

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

phpjavascripthtmlsvgraphael

Ensure that the flex item expands to occupy the vacant space left when other child elements are deleted

I am facing an issue with multiple children inside a parent container that has the CSS properties display: flex and flex-direction: column. There is a toggle button on the webpage which removes one of the children when clicked. The problem I need to solv ...

htmlcssflexbox

Retrieve the JSON data embedded within the HTML source code and utilize its contents

I stumbled upon a URL like http://example.com. Taking a look at the HTML source, it appears as follows: <html> test test2 {"customer":{"email":null,"is_eu":true"} t </html> My goal is to extract the JSON data from this source and then manipul ...

phphtmljson

Show both sets of data in two tables on one page

Currently, I have two tables named users and vm_tables. I am currently displaying data from the users table in the following manner: $sel_query = "SELECT * FROM users WHERE account_id=".$_SESSION['admin_id']; <td align="left"><?php ech ...

phphtmlmysql