The problem of Angular material toolbar's erratic height issue

Currently, I am using angular material version 1.1.0-RC.5 which involves a simple toolbar creation.

<md-toolbar> </md-toolbar>

However, there seems to be an issue when the browser width is less than 960px - the toolbar's height changes to 48px. While this change seems logical, I prefer my toolbar to maintain a consistent height at all times.
What baffles me is that when the browser width decreases further to less than 500px, the toolbar actually increases in size (56px) rather than reducing it!

Upon observation, I have found that the browser height needs to exceed 274px for this behavior to occur.

Could this be considered as an issue?
Is there any way to prevent the toolbar from resizing?

You can view a live example here (ensure that the content area height is greater than 274px).

Attached images: https://i.sstatic.net/Z7spR.png, https://i.sstatic.net/JANeM.png, https://i.sstatic.net/hZsHr.png

htmlcssangularjsangular-material

Answer №1

To resolve this issue, you can define the height using CSS.

md-toolbar{
 min-height:64px;
 max-height:64px
}

Ensure that the height is set in multiples of 8 since material-design utilizes sizes in increments of 8.

See a demonstration here: http://codepen.io/next1/pen/pbwjKV

Answer №2

The reason for the behavior you are seeing is due to the activation of the orientation media query. The relevant code snippet can be found in angular-material.css:

    @media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
  md-toolbar {
    min-height: 56px; }
  .md-toolbar-tools {
    height: 56px;
    max-height: 56px; } }

@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
  md-toolbar {
    min-height: 48px; }
  .md-toolbar-tools {
    height: 48px;
    max-height: 48px; } }

Further details on how this media query functions can be accessed from this documentation:

This statement indicates whether the viewport is in landscape mode (wider than tall) or portrait mode (taller than wide).

Your specific scenario is also addressed in a note within the documentation:

Note: This value does not necessarily reflect the actual device orientation. For instance, when opening the virtual keyboard in portrait mode on most devices, the viewport becomes wider than taller, causing the browser to apply landscape styles instead of portrait styles.

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

AngularJS File Upload Reset: A Fresh Start

Currently, I am working on implementing an image upload feature in Angular 1. The requirement is to allow users to upload, remove, and change images. While I have successfully achieved this functionality, I encountered a problem. When a user removes an upl ...

javascriptjqueryangularjsimage

CSS/HTML code for creating a dynamic border on specific pages

Currently, I am working on creating a border button that becomes active when you are on the corresponding page. The challenge is that when you click on a different border button, the first one's border disappears and the second one becomes visible ins ...

htmlcss

Leveraging AngularJS - incorporating personalized service into a controller

Can you help me with the correct way to inject a service into a controller in Angular? I have created a service and want to include it in my controllers. However, I am facing an error that I cannot seem to resolve. Perhaps someone can point out where I am ...

angularjsservicecontroller

What is the process for downloading a file from a webapi on Internet Explorer with an angular post request?

I have encountered an issue with my code while using angularjs http post to download a file from the Web Api. The code works perfectly fine in Google Chrome and Firefox, however it fails in Internet Explorer. Here is the code snippet: $scope.CallApi = fun ...

javascriptangularjs

Personalize the color of tags in streamlit

As a newcomer to streamlit, I am experimenting with creating an application that incorporates multiple tag objects. By default, the tags are displayed in red, but I would like to customize the colors for each tag based on its category. For example, I want ...

htmlcssstreamlit

Images overlaying text and each other in a cascading arrangement

I need help arranging an icon with a number on top in the left corner of a div container, alongside an image to the right. While it displays correctly on desktop, the mobile view overlaps the image on the right and the text on the left. Here is a snippet ...

htmlcssimagebootstrap-4

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

Tips for properly utilizing the collapse feature

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popp ...

javascriptjqueryhtmlbootstrap-4

Prevent repetitive input in AngularJS ngList

What is the best way to avoid duplicate entries in AngularJS ng-list? <textarea ng-model="list" ng-list="&#10;" ng-trim="false"></textarea> {{ list | json }} ...

angularjs

Customizing Checkbox Properties in Google Web Toolkit

When working with a UiBinder, I have created a checkbox element using the following code: <g:CheckBox ui:field="ignoreCase"/> To set the text in the java code, I am using this method: ignoreCase.setText(UIConverter.getUILocalization().get(UINames. ...

javahtmlcssgwtuibinder

Trigger an immediate Primefaces update using a JavaScript function

Having an issue where: upon page load, I attach a 'keypress' event listener to every input field on the page. The goal is to check for special characters in the input and remove them. Below is the function that executes on page load: function ...

javascripthtmlajaxprimefaces

The art of adjusting list padding and margin to fit varying screen sizes

When dealing with Roman numerals in lists, the width of the numeral can vary significantly from one <li> to another. For example, you may have II next to XVII. I am struggling to find the perfect padding for lists to ensure that wide "bullets" do n ...

htmlcss

The method for retrieving values and $id from a $firebaseArray using angularJS

Hey there, I'm fairly new to working with Firebase and I seem to be stuck on a problem that I can't find a solution for despite looking in many different places. Here is the structure of my Firebase database: I am trying to retrieve data from a s ...

javascriptangularjsfirebasefirebase-realtime-database

Command unitTest controller yields an empty result

I am facing an issue while testing an angular directive. Despite having successfully done it in the past, I seem to have hit a roadblock today. It's probably just a silly mistake. var element, scope, controller; beforeEach(function() { angular.m ...

angularjsjasmine

The float right attribute doesn't stay contained within the box; instead, it drifts outside the box

I've been struggling to keep this box fixed at the top of the browser, but I'm facing an issue with the positioning on the right side. I can't seem to figure out how to solve it, so I'm reaching out for some help. #StickyBar #RightSide ...

csshtml

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

cssgridmaterial-uiresponsive

The method is unable to assign a value to the undefined property 'var'

I am encountering a simple issue that is giving me an error message TypeError: Cannot set property 'question' of undefined at setQuestion I am struggling to identify the root cause of this problem. As I am new to AngularJS, I wonder if ...

javascripthtmlangularjsangularjs-scope

Discovering additional element information while utilizing the 'Sortable' feature

My Current Objective: In my setup, I have a 'calendar' comprising 5 columns, each column containing 5 separate divs known as timeslots. The main purpose here is to show appointments in these specific timeslots and utilize JQuery's Sortable ...

javascripthtmlajaxjquery-uijquery-ui-sortable

Having Trouble Receiving Desired Results with Ajax and JSONP

Testing jsonp for a new project. The html page features ajax, displaying a drop-down form and an empty table. The table cells will be populated based on the jsonp response fetched by ajax. The php response is hosted separately but doesn't seem to wo ...

phpjqueryhtmlajaxjson

Why is only jQuery 3.2.1 or jQuery Mobile 1.4.5 being loaded?

When I load my html file, only jquery or jquery mobile is loading from the head. Changing the order in which they appear in the head causes a switch in which one is loaded. Is this possibly due to a compatibility issue? <head> <title& ...

jqueryhtmljquery-mobile