Is there an 'angular material way' to hide elements on small/mobile displays using a directive of some kind? Having used Angular and Angular Material for a while now, I thought this should be simple, but I'm just not finding it. I know about the ng-show / ng-hide directives, but I don't know if I can write an expression that inspects the current display size somehow.
Do I just need to fall back to good old media queries in CSS?
EDIT - forgot to include reference to Angular Material in my original post... oops!
You could create a matchMedia filter.
app.filter("matchMedia", function($window) {
return function matchMedia (mediaQueryString) {
return $window.matchMedia(mediaQueryString).matches;
}
});
Then use it in directives:
<div ng-if="'(min-width: 400px)' | matchMedia">
<h1>The viewport is at least 400 pixels wide</h1>
</div>
https://material.angularjs.org/latest/layout/introduction
use hide and show options depends on Breakpoint e.g hide-md, hide-lg
Angular Material Design - Change flex value with screen size
Use hide-sm css class. This class is provided by angular material
Modern browsers support the matchMedia function that lets you do media queries from JavaScript. You could make a custom directive that uses that.
I suggest doing this only if hiding things via JavaScript (probably more ng-if style rather than ng-show style) allows you to skip processing something unneeded and heavy in JavaScript on mobile browsers. If it's just a visual thing, use CSS. It's the correct tool for the job.
I think the best way is to use a component approach and keep directive's js + html + scss in one folder. Use scss (or less or sass) to declare your css styles. Doing that you can create media query in directive's scss and then use it in directive's html. And then you collect every directive's scss partials in one file. So you separate your concerns. Logic and presentation in js and html. And leave browser decide whether to display your directive depending on screen size.
For Mobile Device (max-widht:599px) use fxHide.xs in this
element.
For Tab Device (max-widht:959px) use "fxHide.sm"
Example :
<h2 fxHide.xs> Hide this h2 element in mobile device </h2>
Related
I've been working with React for a little while but animations is one thing that is confusing me.
Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.
My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?
Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?
You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.
The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.
CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.
So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.
So I have a few different templates which get put into ng-view, and each template is animated into being using the slick new ng-animate directive. Each template has its own CSS, and I need to figure out a way to prevent the CSS from colliding, so that an h1 declaration in template1 only applies to template1, and not template2.
The options for which I'm currently aware are either to rewrite the CSS as it's about to be served to the page to target a parent element, which I could define as an ID which matches the template. The other, less desirable option is to use iframes, which means i'd have several instances of the app running at once, each in their own iframe.
Are there any other options out there? Which way is best to solve the goal of isolating each CSS declaration?
You could have your controller assign a body className and use that to scope out the CSS styles per template.
When a JavaScript library creates a <div>, it typically sets a class on the div so that the user of the library can style it him/herself. It's also common, however, for the JS library to want to set some default styles for the <div>.
The most obvious way for the library to do this would be with inline styles:
<div style="application's default styles" class="please-style-me">
...
</div>
However, this will make the application's default styles trump the user's styles. A workaround is to use nested divs:
<div style="application's default styles">
<div class="please-style-me">
...
</div>
</div>
This works great for many styles like 'font' but fails for others like 'position', where the inner div's style will not override the outer div's.
What is the best practice for creating user-stylable elements with defaults in a JavaScript library? I'd prefer not to require users to include a CSS file of defaults (it's nice to keep your library self-contained).
When a JS library has a default set of styles that should be used, but should also be overridden, the JS library should include a separate stylesheet.
JavaScript should avoid adding styles directly as much as possible, and defer all styling to CSS where it's reasonable.
It's common for sets of styles to be toggled on and off. The way to elegantly handle these situations are with CSS classes.
A case where it may not be reasonable to simply use external stylesheets is animation. CSS animations could certainly be used, but for cross-browser support, asynchronous interpolation is used to animate styles from one value to another.
There isn't !notimportant or !unimportant in CSS. And I haven't run into an accepted best practice. It seems like a CSS file is the defacto standard for styles that should be user modifiable.
But if you want to keep things all in one library, I would take your second example, with your application default styles, then append a CSS class to it and prepend something unique to the class name. Then if the implementor wants to override your styles, the implementor could just use !important to override your user styles.
Adding !important to one or two styles in a CSS file shouldn't be a huge deal, but if you're creating a bunch of inline styles, this may not be the best solution.
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.
I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.
Is it possible to only apply Bootstrap to a region (say a parent div or something?)
Thanks
The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).
HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.
If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.
Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.
I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less
Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.