Disable the justification of Angular UI Tabs on mobile devices

When using the Angular UI Tabs component with the attribute justified="true", everything works fine on desktop. However, I am facing an issue when the resolution changes for tablets and phones, as I want to change justified to false.

I prefer not to rely on @media-queries to manually adjust the default .nav-justified class for proper rendering.

  <tabset justified="true">
    <tab ng-repeat="tab in vm.tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      {{tab.content}}
    </tab>
  </tabset>

Any suggestions or solutions would be greatly appreciated!

Thank you!

cssangularjstwitter-bootstraptabsangular-ui

Answer №1

If you want to achieve this effect, simply include the following CSS in your stylesheet: 

.nav-tabs.nav-justified>li {
display: table-cell !important;
width: 1% !important;
}

While this may seem like a CSS trick rather than something specific to Angular, it can still be useful in certain situations.

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

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

Incorporating AngularJS 1 into the design of a fresh "foobar" user interface overlay

Currently, I am working with AngularJS 1 along with angular-material and ui-router. Is there a preferred method for implementing a user interface for a new "foobar" feature? For instance, let's say I have a ui.route leading to /app/#/foobars/, which ...

angularjsangular-ui-routerangular-material

Issues with CSS background colors

I am in the process of streamlining my CSS code by consolidating repetitive elements and removing unnecessary lines (I am currently enrolled in a mobile apps course that emphasizes creating web-based hybrid applications using HTML5, CSS, and JavaScript, he ...

javascripthtmlcss

Using a function to send multiple child data in Firebase

I am trying to figure out how to save data to a Firebase multi-child node structure: --Events ----Races -------Participants Below is some dummy data example that represents the type of data I need to store in Firebase: var dummyData = [ { ...

javascriptangularjsfirebaseangularfire

The log out button is unresponsive and does not function properly

I am having trouble positioning the logout button on the left toolbar. I have tried using the position property, but it is not responsive. When I resize the Chrome window, the button disappears. I also attempted to use margin, but that did not work either. ...

css

Creating animated effects in AngularJS using pure JavaScript only, without relying on CSS animations

I am currently working on an AngularJS module that needs to be compatible with Internet Explorer 8 and 9. The existing animation directives in the library rely heavily on CSS transitions, which do not work well in these browsers. As a solution, I am cons ...

angularjsanimationangularjs-directivejquery-animate

Hovering over a td tag and adding a border using CSS can cause the entire table to

While experimenting on a coding platform: <table> <tr> <td class="changeme">something</td> <td>something</td> <td>something</td> <td>something</td> < ...

htmlcsshoverborderhtml-table

Ensuring that the div remains at the top of the page while scrolling

Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things You can find what I have at Below is the code snippet: <div id="myElement"> <div id="nav"> <a href= ...

jqueryhtmlcssscrollblogger

The variable in ng-init within ng-repeat becomes desynchronized

I used the ng-repeat method to list some items and included a nested ng-repeat. To keep track of my outer $index, I utilized ng-init. <div class="row" ng-repeat="product in products" ng-if="$index % 2 == 0" ng-init="current = $index"> <div c ...

angularjsangularjs-ng-repeat

Configuring a Revolution Slider 5+ layer to display as a fixed layer

I wish to keep a consistent shape below my text on all the slides without any flickering. Although Revolution Slider offers static layers, they always appear on top and cannot be layered beneath other slide layers. I attempted to create a layer with no t ...

javascriptjquerycsswordpressrevolution-slider

The impact of CSS on AJAX controls

Struggling to understand why the AJAX control is behaving strangely in relation to this CSS file. Interestingly, removing the CSS file fixes the display issue. CSS File .tdMain { width:452px; font-family:Arial; font:bold,small; } .tdInput { ...

cssasp.netajax

Leveraging HTML classnames for metadata purposes

Is it recommended to use descriptive class names in HTML that fully describe its content, such as navbar-static-8 for a fixed navbar with 8 items? Alternatively, should the metadata be separated into individual attributes like type="static" items="8"? I ...

htmlcssmetadata

CSS: The Ultimate Guide to Fixing Your Footer at the Bottom of Your Page

My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute. html, b ...

htmlcss

Is it possible to include a link at the conclusion of an Angular Material autocomplete input field?

I'm currently working on adding a persistent link at the end of an Angular Material autocomplete. I want the link to always be visible, even after a search is performed. To achieve this, I came up with a workaround involving a directive that manipulat ...

javascriptangularjsautocompleteangular-material

Extract the height of children from the height of their parent

Hey there! I recently discovered a fantastic plugin that helped me achieve equal heights for all the divs on my website. If you're interested, you can check out the plugin here. $('.item-container').responsiveEqualHeightGrid(); However, I& ...

javascriptjqueryhtmlcss

What steps can be taken to ensure that AngularJS does not detach a form input's value from its model if it is invalid?

While working on a form implementation in AngularJS, I encountered a baffling behavior that has left me puzzled. It seems that whenever I set ng-minlength=5 as an input attribute, AngularJS disconnects the value until it meets the length requirement. Thi ...

javascriptangularjsvalidation

What is the best way to align social media icons at the center of the footer section?

I've been working on trying to center the social media icons in the footer, but no matter what changes I make in the code, there's been no visible difference. Can anyone offer some assistance? footer { background-color: #FFF; color: white; ...

htmlcssbootstrap-4

Image container unable to resize to fit within a CSS grid cell

I'm currently working on organizing a CSS grid for my images on a tribute page project from free code camp. I was able to set up the grid as intended, but I am facing some difficulties in making the images fit perfectly within each cell. Some images a ...

htmlcssgrid-layoutcss-grid

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

Issues with Bootstrap 5 Carousel Control Button Functionality

My carousel isn't responding when I try to move it by touching the buttons. How can I fix this issue? Code: <div class="container mt-4"> <div id="carouselExampleIndicators" class="carousel slide" data-ri ...

htmltwitter-bootstrapbootstrap-5