Ensuring Angular Material's Mat-Button-Toggle-Group is fully responsive

I have implemented a mat-button-toggle-group with 6 button-toggles. The challenge is to ensure that all buttons are displayed in a single line on desktop, while on smaller screens, the group should break and show 2 lines of buttons as shown below: https://i.sstatic.net/77gqm.png

Below is the code I am currently using (leveraging flexbox-grid):

<mat-button-toggle-group class="col-xs-12">
      <mat-button-toggle class="col-xs-4 col-lg-2" value="1">1 Monat</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="3">3 Monate</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="6">6 Monate</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="12">1 Jahr</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="60">5 Jahre</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="120">10 Jahre</mat-button-toggle>
  </mat-button-toggle-group>

While this setup works perfectly on larger screens, the issue arises on mobile devices where only 3 buttons are visible and the rest are hidden from view, like in this image: https://i.sstatic.net/YkIl5.png

Can you suggest a solution to make my mat-button-toggle-group break into two lines on smaller screen sizes?

cssangularangular-materialflexboxgrid

Answer №1

To make the toggle-group element wrap properly, you need to set the flex-wrap property to wrap:

mat-button-toggle-group {
  flex-wrap: wrap;
}

After that, you can adjust the borders to your liking.

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

Testing the angular unit for a partially functioning ternary condition

Can you help me troubleshoot an issue with my test case for a ternary function? It works fine for true conditions, but not for false ones. I'm not sure what's wrong with my logic. What changes should I make to fix it? public getData(ball: any) ...

angulartestingkarma-jasmine

Combining Angular 1.3.4 and Angular 2 - A comprehensive guide

Currently, I have an application built on Angular 1.3.4 and my goal is to gradually transition it to Angular 2, module by module. For instance, if there are 5 modules on my webpage, I want to move one module to Angular 2 while keeping the other modules ru ...

angularjsangularng-upgrade

What methods can I use to create an RXJS stream that only updates the state once all sequential calls have been successful?

Currently, I am delving into rxjs within the realm of Angular. However, I am facing difficulties in merging these concepts to accurately portray the following scenario: I initiate an HTTP request to an endpoint, which returns some data This data is then u ...

angularrxjs

Elevating the Sidebar: Transforming Bootstrap 4 Sidebar into a Top

Recently, I delved into the topic of creating a responsive sidebar menu in Bootstrap 4. After exploring various solutions, I opted for an alternate version. Here's the HTML code snippet that I implemented: <div class="container-fluid"> < ...

htmlcsstwitter-bootstrapsidebar

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

javascripthtmlcssangularjsangular-ui-router

When the direction is set to rtl, special characters that are supposed to be at the

When using the direction property for a label with windows style directory paths containing backslashes, I encountered an issue. The purpose of using direction:rtl; was to display the end part (file names) of the path. However, I found that I am getting th ...

csshtml

Is it possible to dynamically adjust the width of table columns using CSS/LESS on a per-column basis?

In this scenario, the table's column width is determined by the number of columns present. For example, if there are 4 columns in the table, each column's width would be set to a maximum of 25% of the table's overall width. With 3 columns, t ...

cssless

Methods for centering multiple position absolute child divs vertically:How to align the middles

Struggling to vertically align multiple position:absolute divs in the middle? Even with width and height set at 100%, they still overflow. Any solutions or suggestions would be greatly appreciated. Thank you! <div class="wrapper"> <div class="w ...

jqueryhtmlcsscenter

Separate the label and content sections in an Angular Material vertical stepper

https://i.sstatic.net/S1gIH.jpg After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepp ...

cssangularangular-material

Refreshing the page is the only way to trigger the loading of the Angular subscription. It does not initialize

I am facing an issue with my Angular app featuring a dashboard and several components accessible through router links. For example: Dashboard Devices The routing is functioning correctly, but the problem lies in my subscription not loading in ngOninit w ...

javascriptangularangular-servicesangular-router

Preserving spacing using minimum widths

Looking for some help with a page layout issue. I have a header on my page with a title and menu. Currently, the header has a margin and a minimum width set to the width of the menu. However, when the user resizes the window and reaches the minimum width, ...

jqueryhtmlcss

merging JavaScript objects with complex conditions

I am attempting to combine data from two http requests into a single object based on specific conditions. Take a look at the following objects: vehicles: [ { vId: 1, color: 'green', passengers: [ { name: 'Joe', ag ...

javascriptangulartypescriptecmascript-6lodash

The animation does not reoccur in Firefox when using Modal

I have a unique issue with my modal that displays images, where the animation only works the first time on Firefox. When I open the modal for the first time, everything works perfectly, but if I close it and then reopen it, the animation no longer plays. I ...

javascriptjqueryhtmlcssmodal-dialog

What could be causing my CSS to behave unexpectedly?

Here is my css code that makes a dropdown menu visible: a.menu:hover { opacity: 1; text-shadow: 0 0 10px white; } a.menu:hover ~ .dropdown { display: block; } .dropdown { display: none; width: 50px; height: 50px; position: absolute; top: 120px; left: 120 ...

htmlcsshover

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

csswordpresswoocommerce

Is it possible to intercept Angular core methods in order to implement some Aspect-Oriented Programming strategies?

Currently working on a project using Angular 12, I'm wondering if there's a way to intercept calls to core methods like createComponent() from ViewContainerRef in the @angular/core library. This would allow me to implement some aspect-oriented pr ...

javascriptangulartypescriptaop

Can you please explain the functionality of this CSS code?

*:first-child+html .clearfix{zoom:1px;} Can anyone explain the purpose of this code snippet? I noticed it was causing elements to render at 1px in Internet Explorer 7. This code is present in the style.css file of my WordPress theme (created by ElegantThe ...

cssinternet-explorer-7

jQuery selector unable to locate the specified class in the table row

After receiving an array of strings as a response from an SQL query, I am using JavaScript to dynamically add this data as rows to an HTML table: loadUsers: function() { . . . function displayUsersOnTable(response) { for(var i = ...

javascriptjqueryhtmlcss

I'm stuck trying to figure out all the parameters for the MapsPage component in Angular 2

Currently, I am utilizing Angular2 with Ionic2 for my mobile app development. Everything was working flawlessly until I decided to incorporate a new module for Google Maps navigation. Specifically, I am using phonegap-launch-navigator for this purpose. The ...

javascriptcordovaangulartypescriptionic2

Retry the original observable on error after waiting for the second observable in RxJS - TypeScript/Angular 2

Exploring the realms of Angular 2, TypeScript and RxJS is a thrilling journey for me as I delve into creating a basic application that makes use of the Salesforce Ajax Toolkit connections library. In my quest, I am faced with the challenge of tackling tok ...

asynchronoustypescriptangularrxjsobservable