Weird looking modal

[teknologist]

Hi,

Since a few months your modals are displaying weirdly on my app. I think it may be css conflicts with another package maybe.

I was wondering if you had already seen this:

I am using latest version.

I hope you can help! I love your modals packages! :-)

Many thanks!

Here is my meteor package list:

255kb:meteor-status 1.4.2 Meteor Status automatically alerts users when the connection to the server has been lost. accounts-base 1.2.2 A user account system accounts-google 1.0.6 Login service for Google accounts accounts-password 1.1.4 Password support for accounts accounts-twitter 1.0.6 Login service for Twitter accounts accounts-ui 1.1.6 Simple templates to add login widgets to an app accounts-ui-unstyled 1.1.8 Unstyled version of login widgets alanning:roles 1.2.14 Authorization package for Meteor aldeed:autoform 5.7.1 Easily create forms with automatic insert and update, and automatic reactive validation. aldeed:collection2 2.5.0 Automatic validation of insert and update operations on the client and server. aldeed:geocoder 0.3.8 Easy geocoding by way of the node-geocoder package arsnebula:darwin 1.0.0 Detect and adapt to device platform, mobile OS, form factor and screen orientation. audit-argument-checks 1.0.4 Try to detect inadequate input sanitization bigdata:elasticsearch 1.0.0+ Meteor interface for ES, provides easy methods to river meteor collections aswell. ES: Open Source, Distributed, RESTful Search Engine blaze-html-templates 1.0.1 Compile HTML templates into reactive UI with Meteor Blaze cfs:autoform 2.2.1 Upload files as part of autoform submission cfs:filesystem 0.1.2 Filesystem storage adapter for CollectionFS cfs:graphicsmagick 0.0.18 Adds gm to scope with the ability to perform GraphicsMagick or ImageMagick manipulation cfs:gridfs 0.0.33 GridFS storage adapter for CollectionFS cfs:s3 0.1.3 Amazon Web Services S3 storage adapter for CollectionFS cfs:standard-packages 0.5.9 Filesystem for Meteor, collectionFS check 1.1.0 Check whether a value matches a pattern chriswessels:hammer 4.0.2 A smart-package for integrating with Hammer.js for multi-touch gesture support in your Templates. coffeescript 1.0.11 Javascript dialect with fewer braces and semicolons cordova:cordova-plugin-dialogs 1.1.1 cordova:cordova-plugin-geolocation 1.0.1 cordova:cordova-plugin-statusbar 1.0.1 cordova:phonegap-facebook-plugin https://github.com/teknologist/phonegap-facebook-plugin.git#be9c7c81b879ce66a46adf5ca8c197db99997d34 dburles:collection-helpers 1.0.4 Transform your collections with helpers that you define dburles:google-maps 1.1.5 Google Maps Javascript API v3 ecmascript 0.1.6 Compiler plugin that supports ES2015+ in all .js files ejson 1.0.7 Extended and Extensible JSON library email 1.0.8 Send email messages es5-shim 4.1.14 Shims and polyfills to improve ECMAScript 5 support facts 1.0.5 Publish internal app statistics fastclick 1.0.7 Faster touch events on mobile fourseven:scss 3.4.1 Style with attitude. Sass and SCSS support for Meteor.js (with autoprefixer and sourcemaps). gildaspk:autoform-materialize 0.0.25 Materialize theme for Autoform hedcet:cordova-google-plus-native-sign-in 0.1.0 native SignIn with Google Plus in Meteor-Cordova Android/IOS Apps http 1.1.1 Make HTTP calls to remote servers infinitedg:gsap 1.16.0 GreenSock Animation Platform : Professional-Grade HTML5 Animation. iron:core 1.0.11 Iron namespace and utilities. iron:dynamic-template 1.0.12 Dynamically create and update templates and their data contexts. iron:layout 1.0.12 Dynamic layouts which enable rendering dynamic templates into regions on a page. iron:router 1.0.12 Routing specifically designed for Meteor jeremy:geocomplete 1.6.5_9 Geocoding and Google Places Autocomplete Plugin jonblum:jquery-cropper 1.0.0 Fengyuan Chen's terrific jQuery plugin for cropping/zooming/rotating images, packaged for Meteor jparker:gravatar 0.4.1 Simple package to use gravatar images jquery 1.11.4 Manipulate the DOM using CSS selectors kevohagan:sweetalert 1.0.0 a beautiful replacement for javascript's alert() matb33:collection-hooks 0.8.1 Extends Mongo.Collection with before/after hooks for insert/update/remove/find/findOne materialize:materialize 0.97.0* Materialize (official): A modern responsive front-end framework based on Material Design mdg:geolocation 1.1.0 Provides reactive geolocation on desktop and mobile. mdg:reload-on-resume 1.0.4 On Cordova, only allow the app to reload when the app is resumed. meteor-base 1.0.1 Packages that every Meteor app needs meteorhacks:aggregate 1.3.0 Proper MongoDB aggregations support for Meteor meteorhacks:fast-render 2.10.0 Render your app before the DDP connection even comes alive - magic? meteorhacks:kadira 2.26.3 Performance Monitoring for Meteor meteorhacks:kadira-debug 1.3.3 Full Stack Debugging Solution for Meteor meteorhacks:kadira-profiler 1.2.1 CPU Profiler for Meteor (used with Kadira) meteorhacks:npm 1.5.0 Use npm modules with your Meteor App meteorhacks:search-source 1.4.1 Reactive Data Source for Search meteorhacks:sikka 1.0.1 Sikka - A Firewall for Meteor Apps meteorhacks:ssr 2.2.0 Server Side Rendering for Meteor with Blaze meteorhacks:subs-manager 1.6.2 Subscriptions Manager for Meteor meteorhacks:zones 1.6.0 Zone.Js integration for meteor meteorstuff:materialize-modal 1.0.4 Display a modal via Materialize written in coffeescript meteortoys:allthings 2.2.0 Insanely Handy Development Tools mizzao:user-status 0.6.6 User connection and idle state tracking for Meteor mobile-experience 1.0.1 Packages for a great mobile user experience mobile-status-bar 1.0.6 Good defaults for the mobile status bar momentjs:moment 2.10.6 Moment.js (official): parse, validate, manipulate, and display dates - official Meteor packaging mongo 1.1.3 Adaptor for using MongoDB and Minimongo over DDP mystor:device-detection 0.2.0 Client-Side Device Type Detection & Template Switching with Optional Meteor-Router Support natestrauser:font-awesome 4.4.0 Latest version Font-Awesome loaded via CDN npm-container 1.2.0+ Contains all your npm dependencies outatime:geolib 2.0.15 Geolib - Library to perform geo specific tasks particle4dev:cordova-fb 1.1.3 Login service for Facebook accounts (works with cordova) rcy:nouislider 7.0.72 noUiSlider is a lightweight jQuery range slider plugin reactive-var 1.0.6 Reactive variable reywood:iron-router-ga 0.7.1 Google analytics (universal edition) with some Iron Router sugar for tracking page views. sacha:spin 2.3.1 Simple spinner package for Meteor service-configuration 1.0.5 Manage the configuration for third-party services session 1.1.1 Session variable softwarerero:accounts-t9n 1.1.4 Almost i18n, with standard translations for basic meteor packages. standard-app-packages 1.0.6 Moved to meteor-platform standard-minifiers 1.0.2 Standard minifiers used with Meteor apps by default. teknologist:autoform-file 0.2.10+ File upload for AutoForm themeteorchef:jquery-validation 1.14.0 jQuery Validation by jzaefferer, repackaged for Meteor. tmeasday:publish-counts 0.7.2 Publish the count of a cursor, in real time tomi:upload-jquery 2.2.0 Client template for uploads using "jquery-file-upload" from blueimp tomi:upload-server 1.3.2 Upload server for Meteor. Allows to save and serve files from arbitrary directory tracker 1.0.9 Dependency tracker to allow reactive callbacks underscore 1.0.4 Collection of small helpers: .map, _.each, ... utilities:avatar 0.9.2 Consolidated user avatar template (twitter, facebook, gravatar, etc.) velocityjs:velocityjs 1.2.1 Velocity.js (official) - accelerated JavaScript animation. yogiben:autoform-tags 0.2.0 Tags input for aldeed:autoform zimme:active-route 2.3.2 Active route helpers

[msolters]

Hi @teknologist, can you show us the function call (including all its parameters) that creates the modal you have in that screen shot? A few months ago the node hierarchy was reworked in this package to allow for things like reactive modals etc. That could change the CSS inheritance pattern.

It very well could be some CSS override from another package.

But if you take a look at the demo site (http://materializemodal.meteor.com/) this problem is not present on any of the modal examples. So we really need to see precisely what you're invoking.

Even better, if you have a live example I could view I can very quickly get to the bottom of what CSS is being called and from what package by using the element inspector from the developer's console in the browser.

[teknologist]

Hi @msolters ,

That particular modal is displayed via this:

MaterializeModal.confirm({ title: 'Delete confirmation', bottomSheet: true, message: 'Are you sure you want to delete ' + t.data.restaurant.name + ' and all its reviews?', callback: function(error, rtn) { if (rtn.submit) { deleteRestaurant(t.data.restaurant._id); return Router.go('dashboard'); } } });

Note: On the screenshot above it was not bottomSheet. With the code above it does this (similar but bottomed):

Let me know if you need anything else.

Thanks!

Eric

PS: I have tried looking for css conflicts in inspector but didn't succeed. But I am not familiar with how all packages I use, are coded.

[msolters]

Hey @teknologist, I've identified what's going on. Here's the CSS (according to inspector) for the .modal-content element in your site:

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

Those borders and box-shadows are creating the problem. By contrast, on the demo site, that CSS does not exist. There are multiple ways to fix this, but I think the safest is to just replace the class-name our package uses to something that isn't overriden by another package (my guess is an update to Materialize) -- if I try to force it by using the following for instance:

.modal-content {
  box-shadow: none !important;
}

it would prevent anyone from using that class definition! Since on the demo site .modal-content isn't relying on any dependencies it should not be an issue to fix it.

[teknologist]

Hi @msolters ,

Indeed, but If I wanted the exact same as the demo site I had to push the css override a bit further with something like this (added to my application.scss):

.modal-content { position: relative; background-color: #FFF; background-clip: padding-box; border: none !important; border-radius: none !important; outline: 0px none; box-shadow: none !important; }

Now, I am pretty sure all this comes from materialize:materialize. It's been a hell of a mess recently. I had to rollback and stick to 0.97.0 as 0.97.1 & 0.97.2 are a no go. App doesn't even work.

Many thanks again for your help!

[msolters]

Yeah precisely, but as you see that is a hacky way of doing it. I was thinking that we could simply update this package to not use the .modal-content class. We could use, for instance, .modal-body-content or something, and those properties wouldn't be applied to it in the first place.

What I really want to know is why the version of Materialize on our demo site doesn't cause this problem! I think it is currently 0.97.0.

[teknologist]

It may be another bootstrap based package.

Don't know, honestly that is why I created a ticked. I was puzzled.

I think you should use a CSS name which is more "custom". Nowadays many packages use the word modal in their stylesheet... ;-)

[teknologist]

Also, the hack fixed the weird round and shadowed border but the modal is till ~70% height like the first screenshot when using it with bottomSheet....

[pfafman]

.modal-content is a base class from materializecss. It is also a base class defined in bootstrap for their modals. If you are mixing two UI frameworks you are asking for issues and this is not something to be handled in this package.

[teknologist]

@pfafman I only use materialize:materialize. I don't see bootstrap in my meteor list...

[teknologist]

@msolters

See the height problem for the normal modal (as opposed to bottomSheet which is now fine):

[msolters]

Regarding your above sizing issue, your problem is found in the following CSS:

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;  /* <--- here's your problem  */
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

Note that it specifies bottom: 0. This is what is causing the unnatural height. Removing this property will make the modal behave as this package intends.

In your site you have three separate CSS definitions for .modal; the demo site has only one. I would point out that, again, this problem is not present in our demo site. Therefore this is a conflict specific to your site's configuration and dependencies.

I agree with @pfafman that this is not something we can fix in this package; it is a usage problem beyond the scope of what this package can cover. We are using these .modal and .modal-content classes to be consistent with Materialize and refactoring our package would break that consistency for the vast majority of users out there that do not have conflicts.

TL;DR I suggest you just add a bottom: auto !important; to your .modal class. Or figure out where all these CSS redundancies are coming from and prune away that code which is not essential. Hint: It's tough to tell on a deployed site (due to minimization and concatenation of resources), but it would be very easy using inspector on a local instance.

[teknologist]

@msolters @pfafman I have found the culprit: Bootstrap 3.5 (package twbs:bootstrap) was being included as a dependency of yogiben:autoform-tags.

I have removed that package and used alternative one (benan789:autoform-materialize-tagsinput) that does not include bootstrap.

Everything is fine!

Many thanks for your help!

[msolters]

:+1:

[teknologist]

@msolters One of these days, MDG should build something of a real package managers that handles conflicts etc. (ala apt or rpm/yum) ;-)