Ionic - Landscape Mode Causing Alignment Distortion

I'm currently working on designing a grid-based image display for an Ionic Mobile App. One of the main challenges I'm facing is adjusting the heights of the images based on the screen size. I want to set a maximum height for both portrait and landscape modes. How can I accomplish this?

Here are some specifics: The grid looks correct in Portrait Mode (see Image Below) https://i.stack.imgur.com/8hux4.png

However, when switching to Landscape Mode, the height gets distorted with one card overlapping another (refer to Picture Below) https://i.stack.imgur.com/RaVfk.png

To address this issue, I increased the original height of the cards from 107px to 157px, which helped improve the appearance in Landscape mode (see Image Below) https://i.stack.imgur.com/Zb3NC.png

Unfortunately, increasing the height also affected the layout in portrait mode as it introduced spaces between rows due to the fixed size of each image (see Image Below)

https://i.stack.imgur.com/qoIzF.png

HTML
 <ion-nav-view>
    <ion-content>
      <div style="margin-top: 5px;">
        <div class="col col-50 cards" ng-repeat="list in lists" ng-style="{ 'background-image': 'url({{list.imageURL}})'} ">
        </div>
      </div>
    </ion-content>
  </ion-nav-view>


CSS
.cards{
      position: relative;
      width: 96%;
      background-size: 100%;
      background-repeat: no-repeat;
      padding: 0 px;
      float: left;
      height: 107px; // This works in Portrait Mode          
       }
htmlcssangularjsgridviewionic-framework

Answer №1

My solution involved utilizing a media query to address the issue:

@media only screen
 and (min-device-width: 401px)
 and (max-device-width: 736px){

 .cards{
  height: 157px;
 }
}
}
.cards{
  position: relative;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 0 px;
  float: left;
  min-height: 107px;        
   }

Answer №2

Consider implementing this solution for handling orientation changes.

function adjustHeightOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        // landscape view
        // add class plus_height to increase height by +157px of the card element
        angular.element(document.getElementById('card')).addClass('plus_height');
        break; 
      default:
        // portrait view
        // add class remove_height to decrease height by -157px of the card element
        angular.element(document.getElementById('card')).removeClass('remove_height');
        break; 
    }
  }

  window.addEventListener('orientationchange', adjustHeightOnOrientationChange);

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

What is the best way to initiate a new animation from the current position?

Here is my custom box: <div class="customBox"></div> It features a unique animation: .customBox{ animation:right 5s; animation-fill-mode:forwards; padding:50px; width:0px; height:0px; display:block; background-color:bla ...

javascripthtmlcssanimation

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

javascriptjqueryhtmlcss

Use JQuery to reverse the most recent button click

Here is the code snippet I am working with: <button class="btn">New York</button> <button class="btn">Amsterdam</button> <button class="btn">New Jersey</button> <button class="btn&qu ...

javascripthtmljquerycssjquery-plugins

Elements inside the Bootstrap 3 navbar are actually external

I am having trouble with the collapsible navbar, specifically the alignment of the right side. Here is the code snippet related to it: <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Currently facing a challenge with responsive design - I have implemented a sticky navbar effect that works seamlessly on desktop, but causes usability issues on mobile. When scrolling down on the mobile version, the sticky navbar obscures the text on the s ...

jqueryhtmlcss

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

cssfirefoxfontsiconsfont-smoothing

Challenges with implementing CSS transitions

I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues. Initially, I believed Opera had transition support starting from ...

cssoperacss-transitions

Questions about setting up a local development environment for Angular.js

After completing a few tutorials on Angular.js, I was eager to start building projects from scratch locally. However, despite my efforts, I have not been able to successfully set up my local development environment. I tried copying the package.json from A ...

javascriptangularjsnode.js

Utilize page variables to activate audio clips upon clicking

Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below: https://i.stack.imgur.com/mBC6o.png Here is the HTML code: <div class="slide overlay-container" id="int ...

jquerycsshtml5-audio

Implementing pagination to streamline search result presentation

I am struggling to implement pagination for the following query that retrieves a lengthy list of items from the database. I want to limit the display to 10 items per page but unsure how to integrate pagination into the existing function. // fetching items ...

phphtmlmysqlmysqlipagination

Align the headers of columns to the right in the AgGrid widget

Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...

javascriptcssangularag-gridag-grid-angular

Activate the preview mode by transmitting information between two controllers

I'm trying to set up a preview mode in one controller to show an image in another controller using an angular service. However, I'm struggling with the final step of getting the URL from the passed parameter into the ng-src in SideMenuCtrl dynami ...

htmlangularjs

Execute AJAX function when loading a form populated from a MySQL/PHP database

I am currently working on a drop-down menu that is being populated from a MySQL table using PHP. The goal is to have a second drop-down menu triggered based on the selection made in the first form. This functionality works perfectly when a selection is mad ...

phphtmlmysqlajax

Is it possible for me to identify the original state of a checkbox when the page first loaded, or the value it was reset to when `reset()` was

When a webpage is loaded, various input elements can be initialized as they are declared in the HTML. If the user modifies some of the input values and then resets the form using reset(), the form goes back to its initially loaded state. I'm curious, ...

javascripthtmldom

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

Sending a C# variable to an HTML file

I’m struggling to understand how I can use jQuery to access a variable from C# named sqlReq. My main objective is to be able to input my own SQL data into a PieChart. However, I’m unsure about how to call and define C# SQL requests in HTML or jQuery. ...

javascriptc#jqueryhtml

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

Learn how to implement data-binding in AngularJS using the ui-router and ControllerAs syntax, all without the

I have been following the guidelines laid out by John Papa, but I am facing difficulty in binding values from child controllers to parent controllers using ui-router, ControllerAs, and vm variables instead of $scope. In my attempts, I created two example ...

angularjsangularjs-scopeangular-ui-router

Tips on invoking a factory method from a different service method in AngularJS

I have a factory method that goes like this.. (function (angular) { "use strict"; angular .module('app') .factory('UserService', ['$rootScope', '$q', function ($rootScope, $q) { ...

javascripthtmlangularjsinterceptorfactory-method

AngularJS synchronous function call

METHOD 1 { let myform = retrieveForm(); let myData = $sce.trustAsHtml(myForm); } METHOD 2 let retrieveForm = function () { let form = ""; //Custom service for API call .then( function (response) { form = //processing lo ...

angularjssynchronous