Make sure to place the <i> tag within the <li> tag at the bottom to automatically resize the height

Currently, I am working on customizing my menu design with a mix of bootstrap and font awesome CSS styles. It would be easier to demonstrate the issue on a live page. My main objectives are two-fold:

  1. I want to position the chevron icon at the bottom with a slight margin (2-3px) like this, ensuring it remains at the bottom with a little space.

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

  1. The issue I am facing is that the <li> items do not adjust their size based on the content inside them. As shown in this screenshot, the items are stuck to the bottom border, and even if I add some margin, it leads to an undesired outcome.

https://i.sstatic.net/NWrZu.png https://i.sstatic.net/JRdjz.png

The CSS styles I am currently using are:

.item-icon-container {
    margin: 2px 0 15px 0;
    float: right;
    display: block;
    height: 100%;
}
.item-icon-container .expand-indicator {
    display: block;
}
.item-icon-container .badge {
    display: block;
}

For the complete HTML code, you can refer to http://pastebin.com/S26C9xSU

I am seeking assistance in resolving this issue. Any help would be highly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To ensure that the height of all elements inside the LI is affected, we can include a last element in the LI with the style clear:both

Potential solutions:

1) Utilize CSS with the :after selector

.list-group-item a:after{
  content:"";
  font-size: 1px;
  display:block;
  clear:both;
}

2) Add an extra element. At the end of each LI, you can insert

<div style="clear:both;"></div>

For example:

<li id="cat-id-5" class="cat-parent-empty list-group-item">
    <div class="item-icon-container">
        <span class="badge">1</span>
        <i class="fa expand-indicator fa-chevron-down"></i>
    </div>
    <a href="http://crosp.net/category/technology/" title="View all posts in Technology">
        <i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
        &nbsp; Technology
    </a>
    <div style="clear:both;"></div>
</li>

The CSS option appears more visually appealing. The extra element provides better compatibility.

Answer №2

To enhance the visual appeal of your expand-indicator element, consider incorporating padding (assuming the HTML code is structured this way). Check out this example on https://jsfiddle.net/ve39a1qj/.

.item-icon-container .expand-indicator {
    display: block;
    padding-bottom: 20px;
}

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

Display a progress bar that shows completion based on the maximum value supplied

I successfully created a progress bar using HTML, CSS, and Javascript. It functions perfectly up to a provided value of 100. However, if a value higher than 100 is given, the progress completes but the value continues to change until it reaches the maximum ...

javascripthtmlcssprogress-bar

Why does the combination of using "!" and the in operator sometimes return false instead of true?

When working with Javascript, the code snippet below demonstrates how it operates: > var foo = { bar: 1 } undefined > foo { bar: 1 } > 'bar' in foo true > !'bar' in foo false > 'baz' in foo false > !'ba ...

javascriptnode.js

navigate a specific web address using Express routing

Is there a specific regex pattern that should be used in an Express application to match a URL? For example, if the endpoint is www.mydomain.com/v1/https://www.url-to-be-matched.com. I am aiming to accept https://www.url-to-be-matched.com as parameters. H ...

javascriptnode.jsexpress

The layout is being disrupted by the PHP if statement, causing a significant amount of extra space

My table was functioning normally until I added an if statement to restrict editing and deleting posts for those who are not the author. Strangely, this caused a large white space to appear. The if statement only involves the last 2 columns (Edit and Delet ...

phphtmlcssif-statement

Re-establishing connection with Nodejs socket.io Server

As a newcomer to nodejs, I've encountered an issue where my Android Smartphone is unable to maintain a stable connection with my Node Js Server. Specifically, when the webpage remains open and the Smartphone enters LockedScreen Mode, the device will d ...

jquerynode.jssocket.io

Converting a JavaScript animation into a video through server-side processing: A step-by-step guide

Attempting to tackle a challenging task but willing to give it a shot: Our team is currently working on developing a website that enables users to generate animations using javascript and html. However, our latest client request involves uploading the cre ...

javascriptjqueryajaxserverside-javascript

Updating Button Color Based on Input Field Value in EJS

How can I change the color of a button in EJS when the input value changes? <div> <textarea name="mytextarea" id="inputcontent" cols="30" rows="3" style="margin-top: 10px; margin-bottom: 10px; f ...

javascriptnode.jsfrontendejs

The iisnode encountered an issue with HRESULT 0x6d resulting in a status code of 500 and a substatus of 1013

Despite trying multiple solutions, none seemed to work for my Node.js website hosted on Windows IIS with iisnode. Everything was running smoothly until today when I encountered an interesting situation. Let's say my domain is cdn1.site.com and it&apos ...

javascriptnode.jsexpressiisiisnode

Why is the Ajax call not selecting the image in the ASP.NET form?

I've been working on a project using asp.net core and I encountered an issue with sending an ajax request to the controller. Specifically, my ajax function is causing me some trouble when it comes to uploading images/files. Currently, whenever a user ...

jqueryajaxasp.net-coreasp.net-ajax

Is it possible that an object sent as a response body from a Spring MVC application's controller cannot be fetched using the jQuery AJAX method?

After making an AJAX call, the EmployeeBean object is not being returned and no exception is being thrown. Here is the code snippet from the controller method: I am trying to return an EmployeeBean object from this method using @Responsebody @RequestMapp ...

jqueryajaxjsonspringmodel-view-controller

"Pushing elements into an array does not function properly within a promise

I'm having trouble with my code - the push method isn't working and it's not returning anything. import {nearbyUsers, getLatitude, getLongitude} from './helper' const users = [] nearbyUsers(session, getLatitude(), getLongitude()).t ...

javascriptnode.jsreactjsnext.js

Having trouble navigating through multiple layers of nested tables with jquery Accordion feature? Let us assist

I am new to web languages and may not be able to explain this clearly, but I have a task from my manager. He wants me to convert a list into collapsible sections similar to Reddit sidebars in order to declutter the layout. The structure always follows this ...

jqueryaccordion

Encountering a problem during the conversion of HTML to JSON

I am facing an issue with the content of a specific div on my webpage. <div id="hidLocsJsonForAutoComplete" style="display:none;">[{"id":1,"desc":"Amazon","name":"amazon"},{"id":2,"desc":"Apple Bees","name":"applebees"},{"id":3,"desc":"Babys r Us"," ...

jqueryhtmljson

What is the best way to show hidden content within a masked div, similar to a tooltip?

In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect. The purpose of using images as masks is to allow the icons to be colored in different ways by cha ...

cssmask

Modify the information on a page by clicking a button on a different page

I'm currently working on the design of a website that consists of two pages. The first page features a button, which when clicked should remove the hidden class from an element on the second page. I have searched extensively for a solution, but so far ...

javascriptphpjqueryajax

A single pledge fulfilled in two distinct ways

My code ended up with a promise that raised some questions. Is it acceptable to resolve one condition with the token string value (resolve(token)), while resolving another condition with a promise of type Promise<string>: resolve(resultPromise); con ...

javascripttypescriptpromiseresolve

Is Javascript necessary for submitting a form to a PHP script?

In my current project, I am working on a page to edit information in a database. While I know how to create the form in HTML and the PHP script that runs on the server, I am facing a challenge with JavaScript. My understanding of JavaScript is limited, and ...

phpjavascripthtmlajax

Prevent premature termination of slow HTTP requests in Node.js/Express server

Having an issue with long duration http requests in my React/Nodejs application. Whenever a request takes more than 4 minutes to respond, it gets aborted before reaching the client. Could there be a timeout setting for requests or something else I am overl ...

javascriptnode.jsexpress

Error with Webdriver/FXDriver utils.js leading to Firefox unresponsive script issue

While running browser tests with Watir webdriver and FXDriver, everything seems to be functioning well except for one test that loads a lightbox containing a large amount of HTML. When this lightbox opens, Firefox displays a popup indicating that Utils.js ...

javascripttestingwatirwebdriverwatir-webdriver

Update the content in the Bootstrap modal

I'm currently implementing modal Bootstrap in my ASP.NET website. I have encountered an issue where the text in the modal does not change according to the errors returned in the code behind, even after modifying the text value of the control before ma ...

javascriptasp.netvb.netbootstrap-4