Conceal the title text within the collapsed sidebar in AdminLTE

When using the AdminLTE theme, I noticed that when I collapse the sidebar, the menu title gets hidden under the pull-right-container icon. See the image below for a better understanding.

View Error Image

Is there a way to display it on a new line?

Below is the code snippet:

<aside class="main-sidebar">
<section class="sidebar" style="height:auto">
    <ul class="sidebar-menu tree" style="white-space: normal" data-widget="tree">
        <li class="treeview menu-open" style="white-space: normal">
            <a href="#">
                <i class="fa fa-circle-o"></i>
                <span>Demo Test Demo Test </span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <div style="width:100%;display:inline-block">
                        <div style="width:10%;float:left;padding-top: 5px;">
                            <i class=" fa fa-arrow-circle-right"></i> 
                        </div>
                        <div style="width:90%;float:right">
                            This is a test
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </li>
    </ul>
</section>

Answer №1

To implement the desired style, include

style="padding-right: 50px;white-space: normal;"
within the span tag:

<section class="sidebar" style="height:auto">
    <ul class="sidebar-menu tree" style="white-space: normal" data-widget="tree">
        <li class="treeview menu-open" style="white-space: normal">
            <a href="#">
                <i class="fa fa-circle-o"></i>
                <span style="padding-right: 50px;white-space: normal;">Demo Test Demo Test </span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <div style="width:100%;display:inline-block">
                        <div style="width:10%;float:left;padding-top: 5px;">
                            <i class=" fa fa-arrow-circle-right"></i> 
                        </div>
                        <div style="width:90%;float:right">
                            This is a test
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </li>
    </ul>
</section>

The solution has been successfully implemented.

https://i.sstatic.net/BsJyX.pnghttps://i.sstatic.net/GWeET.png

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

For my website's navigation bar, I utilized Bootstrap 4. Despite my efforts, I encountered difficulty in modifying the background color of the enclosing div element

After experimenting with a few different options such as setting the background-color to transparent, rgba(0,0,0,0), and background: none; I found that when I used background-color: red or any other color, the color changed as expected. Below is the HTML ...

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

The use of htmltools::tags$iframe in Shiny to display an HTML file is not functioning properly when combined with renderUI()

Hello everyone, this is my first question on StackOverflow. I hope you can help me out even though my question may not be in the correct format. I have an HTML widget that was created using flowmapblue.R and saved as a file that I want to display in a Mar ...

Parent div overflowing due to vertical flex container

In my current project, I am attempting to design a layout with a fixed header and footer along with a dynamic content area that utilizes the remaining vertical space. The content-wrapper contains a lot of data, which may require a scrollbar to navigate. H ...

sliding effect of the background image

Currently, I am in the process of creating a navigation system that includes a background image slide effect. My goal is to mimic the design of a specific website: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/ However, my challenge lie ...

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

Create a randomly generated value in a JSON format

{ "description": "AppName", "name": "appName", "partnerProfile": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19090b1969c90989ddf929e9c">[email protected]</a>", "firstName": "John", ...

Persistent footer overlaps lower body content

Issue with Sticky Footer in Safari I recently added a sticky footer to my website, but I'm facing problems with it covering the body content on Safari. It works fine on Chrome and Firefox after adding a bottom margin to the body to adjust for the hei ...

"Efficiently handle multiple instances of the same name using AJAX, JavaScript

I have a PHP-generated multiple form with HTML inputs containing IDs and NAMEs. I am struggling to capture all this information. When I click the "Done" button, everything is marked as completed due to the button names. <?$command = "SELECT * FROM exam ...

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

There are additional elements that can be toggled, but I prefer to only toggle the one that I have selected

Every time I click on a table a, intending to toggle the .info inside the same div, it also toggles the .info in other divs. Can someone provide assistance with this issue? function info() { $('.table a').click(function() { $('.info ...

Dealing with network issues when submitting a form

Is there a smooth way to handle network errors that may arise during the submission of an HTML form? It is important for me not to have the browser cache any information related to the form, but I also want to ensure that the user's data is not lost i ...

The calendar on the Datetimepicker is not appearing in the proper position

I have encountered an issue while using Eonasdan bootstrap datetimepicker in a paramquery grid. Whenever I open the datetimepicker, the calendar appears hidden inside the grid. To tackle this problem, I added the following CSS condition: .dr ...

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. https://i.sstatic.net/aAtn6.png After attem ...

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

Safari's compatibility issues with Next.js Images are preventing Flexbox from working properly

I'm trying to lay out Next.js Images using flex-wrap with a fixed height but variable width based on the image. I'm utilizing tailwind for this project. Everything is working perfectly on Google Chrome as expected. https://i.sstatic.net/KTTx9.j ...

Navigating an indefinite amount of state variables in React.js: A comprehensive guide

Receiving data from the server with an unknown number of items in the API leads me to utilize the map method in HTML for rendering. Below is the return section: if (loading) { return ( <div> <div> <Header /> ...

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...