Adding a span to the li element of the ActiveAdmin menu in Rails 5: A step-by-step guide

Is there a way to include a span within an li tag of a menu in ActiveAdmin? Below is the model content for the Menu Item:

ActiveAdmin.register_page "Dashboard" do

  menu priority: 1, label: proc{ I18n.t("active_admin.dashboard") }, html_options: { class: "dashboard" }

  content title: proc{ I18n.t("active_admin.dashboard") } do
    div class: "blank_slate_container", id: "dashboard_default_message" do
      span class: "blank_slate" do
        span I18n.t("active_admin.dashboard_welcome.welcome")
        small I18n.t("active_admin.dashboard_welcome.call_to_action")
      </span>
    </div>
  end # content
end

Answer №1

Instructions for including menu items within a link tag:

<li class="current" id="dashboard"><a href="/admin/dashboard">Dashboard</a></li>

If you want to try something different, consider the following code snippet:

menu priority: 1, label: proc{ "<span id='39740772'>#{I18n.t("active_admin.dashboard")}</span>".html_safe }

This code will generate the HTML with a tag inside the li, but it may not be exactly what you're looking for. If you require the span tag around the a, this solution may not be suitable.

<li class="current" id="dashboard"><a href="/admin/dashboard"><span id='39740772'>Dashboard</span></a></li>

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

Each div in prevAlll() will have its own unique CSS background

In continuation of my initial query, which has now been resolved, you can find the original question here. JS: $(function() { var scaletext = { 1: 'SA', 2: 'A', 3: 'N', 4: 'Da', 5: 'SDa' } $(&a ...

How can one maintain the same color for a child in a sunburst sequence as its parent?

Seeking advice on how to create a lighter color for a child element based on the parent's color. The code I currently use generates random colors as shown below: var color = d3.scale.category20b(); .style("fill", function(d) { return color((d.ch ...

Servlet fails to update and displays a blank screen

I am relatively new to the world of programming and have encountered an issue with my Java web application. Despite successfully adding and deleting products from the MySQL database, I am facing difficulties updating product information. When I attempt to ...

CSS: The hover effect must be triggered by a "click" event

I recently came across a helpful thread on Stack Overflow regarding CSS hover effects only triggering on click. I have implemented a Bootstrap4 dropdown-menu with a hover effect to display the dropdown items. .my-menu ul li { list-style: none; c ...

HTML structure consisting of a 3 by 3 grid

Creating a 3x3 grid with cells that have varying heights depending on content is proving to be challenging. Except for the cells marked with red arrows, the rest of the grid has fixed height in pixels. I attempted to build a 3x3 grid using divs to experi ...

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...

Unlock the Power of Angular: Leveraging ViewEncapsulation.Native to Access HTML Elements

I am encountering an issue where I am receiving an error when trying to access an HTML element by ID. The problem arises when I attempt to access the classList upon a user clicking a button to apply a different style class to the element. The class list an ...

Styling for a table with one column set to a fixed width, one column designated as small, and the rest of the

Creating a table with fixed width first column, text-contracting second column, and equally splitting remaining space for the rest seems to be a challenge. Check out this fiddle for my current attempt: http://jsfiddle.net/B8LnP/ Two key issues to observe ...

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

Guide to implementing the onchange event in JavaScript for this specific scenario

How can the onchange event be utilized in this scenario using JavaScript? First, input data into the input with id="one". Subsequently, the data in the input with id="two" will be updated to match the data in the input with id="one". However, when the da ...

Unable to customize the appearance in SharePoint Online

I've been experimenting with various approaches to implement custom CSS on our SharePoint Online site, but unfortunately, none have been successful. Here is a summary of what I've attempted: Created a custom master page using the Seattle templa ...

adjusting the space between lines for paragraphs with exceptionally large text

Utilizing Bootstrap allows for the adjustment of paragraph font sizes to appear quite large, mimicking the size and style of a heading without the need for an actual heading level HTML tag. I am hesitant to use a genuine <H2> tag to alter the visual ...

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

I am encountering an issue with an absolutely positioned div that is nested within a statically-positioned parent container. I noticed that when I apply the transform: translateY(-50%) property to the container, the child element behaves as if it were bein ...

Can a container be sized based only on the width of one of its children?

Take a look at this snippet of html: <div class="container> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> </div> I am aiming for the containe ...

What is the reason behind this button disrupting the arrangement of my design?

Whenever I attempt to add this customized CSS button to my company's website, it disrupts the center alignment of the entire webpage. Below is the HTML code: <div id="contain"> <button class="support"> </button> ​ Here is the c ...

Remove dynamically created elements from an AngularJS div

Is there a way to remove an item from the criteria list when clicking the delete button? Currently, only the filter is being refreshed and not the tables. Any suggestions on how to resolve this issue? HTML <ul class="list-unstyled"> <l ...

Table-integrated Time Selection Tool

Currently in my Angular project, I have integrated the timepicker widget from ngx-bootstrap. When the timepicker is implemented outside of a table, it appears perfectly normal: https://i.sstatic.net/3Huqx.png However, when placing the timepicker inside ...

Styling Images with Gradient using CSS

Looking to create a unique effect on an image by adding a radial gradient that seamlessly fades into the background color. Despite my efforts, I haven't been able to achieve this using filters and my current code is a bit messy. Here's what I ha ...

Utilize jQuery to showcase elements in a dropdown menu

Hey everyone, I'm working on an ASP.NET MVC4 project and I'm using a jQuery script on the edit page. However, I am encountering an issue with displaying elements on the page. Here is the initial HTML markup of my dropdown before any changes: & ...