AngularMaterial allows the Link to span the entire width of the sidebar

I am attempting to replicate the sidebar layout seen on https://material.angularjs.org/latest/#/. I have extracted some code from the HTML source. The issue I am facing is that the links (which act as buttons) do not span the full width (FOOBAR is being hovered):

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

When I hover over the sidebar on the angularmaterial website, the link spans the full width of the navbar (Autocomplete is being hovered):

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

Below is the code snippet I am using: 

<div ng-controller="SidebarCtrl" layout="column" flex>
  <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" flex>
    <ul class="side-menu">
      <li ng-repeat="item in menu">
        <a class="md-button" ng-class="{'active' : isSelected()}">
          <span class="ng-binding ng-scope">
            {{item.label}}
          </span>
        </a>
      </li>
    </ul>
  </md-sidenav>
</div>

I have not applied any custom CSS (only using the provided material-design styles).

Appreciate your assistance. Thank you.

htmlcssangularjssidebarangular-material

Answer №1

To achieve the desired outcome, simply adjust the CSS for your anchor element by setting display: block and width: 100%.

Check out this example:

li {
    list-style-type: none;
    width: 100%;
}

li a {
    width: 100%;
    background: #106CC8;
    padding: 5px 10px;
    display: block;
    color: #fff
}

After that, ensure the font and spacing are configured correctly.

Here's a helpful JSFiddle link to kickstart your project: http://jsfiddle.net/u03znojv/2/

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

Accessing a variable from an external JavaScript file using jQuery

Can someone help me out with this issue I'm facing? I am having trouble getting a string returned to a variable in my embedded Javascript code. token.js: function token () { return "mysecretstring"; } HTML Code: <!DOCTYPE html> <h ...

javascriptjqueryhtmlgetscript

Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Is there a way to change the color of spans with the same top position, excluding sibling elements above or below, in a paragraph made up of spans? I've been working on how to change the color of the line of span tags that contain another span with t ...

jqueryhtmlcss

Reading and storing HTML source code in Python line by line

Recently, I embarked on the journey of learning Python 3. As I delved into my Python book, I found myself pondering some questions... One of my challenges is to extract key words from HTML source code. I managed to write code that allows me to open a URL ...

pythonhtmlpython-3.x

Switching back and forth between classes prevents the animation from playing continuously, causing it to jump straight to the end

Currently, I am in the process of animating a hamburger menu with a unique twist. The idea is to have the top and bottom lines smoothly translate to the middle and then elegantly rotate into an X shape when clicked. My approach involves toggling between tw ...

javascripthtmljquerycsscss-animations

What are some key considerations for creating a website that is optimized for printing?

I am working on creating a website filled with content that I want to optimize for printing. My goal is to have the content easily printable without any unnecessary elements like navigation or advertisements. To achieve this, I am considering using two sep ...

htmlcss

Leveraging PHP for parsing an HTML document

I am currently working on a PHP application that involves parsing HTML content. My goal is to extract a particular column from a table and store it in PHP variables. Below is the code I'm using: $dom = new domDocument; @$dom->loadHTML($html); $d ...

phphtmlparsingdom

Removing functionality within an AngularJS application connected to a Ruby on Rails backend

I'm currently developing a task management application called "To-Do List", which is being constructed using AngularJS within the framework of Ruby on Rails. My current endeavor involves setting up a delete button, represented by an "X", to enable th ...

ruby-on-railsangularjs

I'm currently working with Bootstrap 5. Is there a technique available to reposition the elements within a div without relying on padding or margin properties?

Developing a Website: <!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

htmlcssbootstrap-5

Tips on saving this information in a MySQL database

I'm currently developing a php script that collects and saves links in mysql. However, I've encountered an issue where the script sometimes captures multiple links for the same download, as shown below: http://www.fileserve.com/file/XXXXXX http: ...

phpmysqlhtml

AngularJS: Advanced Routing for Dynamic Web Applications

Hello, I am currently exploring the possibility of implementing something similar to this code snippet using AngularJS: $routeProvider .when('/root/:controllerName/blah/:blahId/blah/:blah', { templateUrl: '/tmpl/:controllerName ...

javascriptangularjstemplatescontrollersangularjs-routing

Dynamically loading AngularJs controllers with the help of ui-router and requireJs is a

I have seen various articles online discussing how to dynamically load AngularJS controllers, but I am interested in loading controllers and templates using UI router and RequireJS. How can I achieve this? ...

angularjsrequirejsangular-ui-router

Troubleshooting a 404 error in MEAN Stack CRUD update operation

Hey there, newbie in the house! Currently working on creating a MEAN stack todo list. I've managed to get everything working smoothly except for the update feature. Here's what I have set up: when a user adds an item like 'ddd,' the upd ...

node.jsangularjsexpresscrud

Switch between using the useState hook by toggling it with the MUI Switch

Looking to implement a custom Dark Mode feature for a specific element on my create-react-app website using MUI. I have successfully implemented the Switch to change the state on toggle, but I am having trouble figuring out how to toggle it back and fort ...

javascripthtmlcssreactjsmaterial-ui

Concurrent Icons on Angular-Chart's Piechart

I recently incorporated angular-charts into my project to make the display of charts easier. Initially, setting up and rendering a pie chart was a breeze following the guidelines I found here. Here's a snippet of the code I used: <canvas id="pie" ...

javascriptangularjsangular-chart

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

jquerycssjquery-uistylesheet

Creating responsive D3.js charts for various screen sizes and devices

After creating a chart using d3.js, I noticed that the chart does not resize when zooming in or out on the web browser window. Below is the code snippet of what I have attempted so far: <!DOCTYPE html> <html> < ...

javascripthtmlcssd3.js

The simplest method for integrating SASS within your WordPress website

While I usually work with CSS, I've decided to tackle SASS in order to improve my efficiency. I successfully converted a CSS file from .css to .scss and it still works as expected. However, when I added variables, they didn't function properly. ...

csswordpresssass

Display information using AngularJS within the Ionic framework

I am attempting to display a variable that is within a for loop. Here is my code where I store the value of $scope.datosTuto[i].Nombre in a variable. When I use an alert to print $scope.NombTuto, I can see the data but I want to display it on my HTML page. ...

javascriptangularjsangularjs-directiveionic-frameworkangularjs-ng-repeat

Retrieve information from specific dates by using a datepicker tool

Hey there, I'm trying to implement a datepicker calendar that allows me to select two dates and then click a button to display all the data between those dates. Here is my code snippet... <?php include_once 'header.php'; $con = mysqli_ ...

phpjqueryhtmldatepicker

How can I use AJAX to remove a record from a MySQL table?

I am looking to create a button with an image X that, when clicked, will delete a row from the database at that exact moment. teste-checkbox.php <style> table { font-family: verdana; font-size: 12px; } table th { text-align: left; backgrou ...

phpjqueryhtmlmysqlajax