Display only the md-tab that is currently active

Is it possible to display only the active tab in md-tabs on a mobile view, centering the tab and allowing the user to swipe left or right to change the tab title with full width?

The tabs are currently structured like this:

<md-toolbar>
    <md-tabs md-swipe-content="true" md-selected="selectedDayIndex">
        <md-tab ng-repeat="day in days | orderBy:predicate:reversed" md-on-select="openDay(day)"><p class="currentDay">{{day.day}}</p></md-tab>
    </md-tabs>
</md-toolbar>

<md-content layout-padding>
    <ng-switch on="selectedDay" class="tabpanel-container">
        <div>
            <p>{{selectedDayInfo.day}}</p>
        </div>
    </ng-switch>
</md-content>

You can view the Plunkr example here: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview

Answer №1

Have you considered experimenting with 'hide' attributes? Check out this resource for more information: https://material.angularjs.org/latest/layout/options.

Furthermore, it may be simple to implement logic that detects the screen size and dynamically generates different DOM elements based on that (using ng-show, etc). Without seeing your code, this approach could be worth exploring.

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

Issue with ui-sref not initiating state change in URL when using parameterized ID

I have defined two states for the menu in my app.js file. The parent state functions as a list, while the child state is a detailed view with an ID parameter included in the URL string. .state('menu', { url: '/menu', views: { ...

Tips for building a homepage button with an image and text using HTML and CSS

My ultimate goal is to create a button for the main page. I am looking to place an image and text side by side within this button, with a click on it directing me to the main page. Unfortunately, I have been facing challenges in resizing or stretching the ...

Accessing a global variable in AngularJS while using ng-data-repeat functionality

Currently in my Angular project, I am displaying block information using the ng-data-repeat directive and accessing various values. Below is a snippet of a table utilizing this repeat feature: <tr class="fader" ng-repeat='b in blocks'> ...

Which shortcuts or techniques in jQuery/JavaScript can I implement to simplify this code further?

I've written a script to handle responsive design for smaller devices and display a toggle menu instead of a full-width menu. The current script works, but I find it messy. How can I make this code more minimalistic and efficient? Is it good practice ...

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

Combining a left vertical navigation bar with a top navigation bar in Bootstrap 4

I am currently working on creating an admin UI using bootstrap 4 that includes two menus, one vertical and the other at the top bar. My goal is to have a navigation layout similar to this: https://i.sstatic.net/q2NbY.png Here is the snippet of my HTML co ...

What is the best way to conduct automated tests on CSS rendering across various browsers, including Safari Mobile and the Android Browser?

Is there a way to programmatically and automatically test how CSS is rendered in various browsers, similar to how Selenium tests HTML and Javascript across different browsers? It would be great to integrate this with a BDD framework. ...

AngularJS $resource causing the creation of a new object instead of updating the existing one

// Defining the $resource for user data $scope.Users = $resource("http://localhost/users/:id"); // Retrieving user with id=1 $scope.user = $scope.Users.get({ id : 1 }); // returns user with ID 1 // User object details {"created_at":"2013-03-03T06:32:30Z" ...

:after functionality not operating properly in Internet Explorer

The titles on this page have arrows displayed before them using a special styling. However, there seems to be an issue with how it displays on Internet Explorer. // edit : I made a mistake, my styling is actually on paragraph tags 'p'. Maybe tha ...

Confirm the Form and Transmit Unverified Inputs Using AngularJS

Does anyone have experience with angularJS? I am facing a challenge in validating a form. If an error occurs, I need to take action to continue processing the data. For example, if not all fields are filled out by the user, I still want to submit the inpu ...

Want to know more about the font-face onload method?

I'm currently working on a loading screen which not only performs an animation, but also generates multiple img objects in JavaScript. These images are linked to an onload method that counts their progress. The loading process is completed once the co ...

Transforming bootstrap 4 rows into cards or a card deck

Having some difficulty configuring Bootstrap cards to display correctly. The original template had one item per row in columns, but I want to transform it into polaroid-style cards while still using Bootstrap 4 for a clean look. Original template (excerpt ...

Instead of shifting the floated div, opt to have the window cut off instead

Currently, I am facing an issue with a section on my website that has absolute text overlaying an image. While it looks good on larger screens, I want to implement a media query to adjust it at a specific window size. Here is what's currently happeni ...

Create concise information in a single line with Twig

So, I basically need to display the following information inline on my website: Just like this: Family: Open Sans - Variant: Regular Italic Size: 15px - Line Height: 25px - Paragraph: 15px Color: grey_3 This is the code snippet: {% include "../compone ...

Utilizing ngClassEven and ngClassOdd in Angular 2 for Improved Styling

I attempted to replicate the behavior of ng-class-even and ng-class-odd (originally from Angular 1) in my Angular 2 application. Below is the code I wrote and it's functioning correctly, but I'm curious if there are alternative methods to achiev ...

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

Manually setting focus to input text in AngularJS: How it's done

I am having difficulty manually setting the focus on an input element using $event.currentTarget.focus();. Despite following the correct syntax, it seems to not be functioning as intended. Below is a snippet of what I am trying to accomplish: HTML: <d ...

Trouble with CSS: Auto Margin not aligning content centrally

Despite my efforts to simplify the code, I am still struggling to center it. It seems that my lack of experience with CSS is hindering me from grasping a simple solution. If anyone has any valuable resources for learning CSS, I would greatly appreciate it ...

What is the best way to adjust the square size using CSS on multiple divs with the same class?

Is it possible to adjust the image size of the second div in CSS while keeping only the square shape intact and using the same class for different divs? <div class="square"> <img class="square__img" src="square.png" ...