I am trying to implement the bootstrap tooltips, instead of the small fitted black area like in the examples, I am experiencing a large outer rectangular box. Just wondering if anyone has encountered this problem?
I am initializing with
$("[rel=tooltip]").tooltip();
My tooltip area is
<a id="button" style="float: left; margin-left:12px; margin-right:2px" rel="tooltip" title="first tooltip" href="#"></a>
I was being terribly dumb, there was another file in the project that was overriding some of the bootstrap css files. I found this by using google chrome devloper tools>going to scripts, pausing while the hover box was up and then going back to elements, inspecting the hover and viewing which css files are being used.
Related
Components like button, toolbar allow for a color input like <button color="primary">, which is handy because it automatically updates the color of the text inside. But when I just wne to color a component with color, I realized that it doesn't allow for a color input.
Browsing briefly through the marterial component docs, it seems to me entirely random whether a component accepts a color input or not. Is there any rhyme or reason to this? I'd be much happier if every component could have a color input.
OK, I had not internalized (but now understand) that, under material design, there are many parts of an interface that you are simply discouraged to color (roughly speaking the 'body' of your content), and that these not-to-be-colored parts are made greyscale (light or dark depending on your theme). To-be-colored items tend to be banners, navigators, buttons, etc.
I found it instructive to go through the list of components and put each one into one of two lists depending on whether they allow for a color directive:
DO HAVE COLOR DIRECTIVE:
mat-checkbox
mat-datepicker
mat-form-field
mat-radio-group
mat-radio-button
mat-slider
mat-slide-toggle
mat-toolbar
mat-list-option
mat-selection-list
mat-tab-nav-bar (<nav mat-tab-nav-bar [backgroundColor]="background">)
mat-tab-group
mat-button (<button mat-button>Basic</button>)
matBadge (<span matBadge="4" matBadgeColor="accent">Text with a badge</span>)
mat-chip
mat-icon
mat-spinner
mat-progress-spinner
mat-progress-bar
matRipple (<div matRipple [matRippleColor]="myColor"></div>)
mat-paginator
DO NOT HAVE COLOR DIRECTIVE:
mat-autocomplete
matInput (<input matInput>)
mat-select
mat-menu
mat-drawer-content
mat-drawer
mat-drawer-container
mat-sidenav-content
mat-sidenav
mat-sidenav-container
mat-toolbar-row
mat-card
mat-divider
mat-accordion
mat-expansion-panel
mat-action-row
mat-expansion-panel-header
mat-grid-list
mat-grid-tile
mat-grid-tile-header
mat-grid-tile-footer
mat-nav-list
mat-list
mat-list-item
mat-horizontal-stepper
mat-step
mat-tab
mat-tree-node
mat-tree
mat-button-toggle-group
mat-button-toggle
mat-chip-list
MatBottomSheet
MatDialog
MatSnackBar
matTooltip
MatSortHeader
MatTable
Note: some of these are not compnents, per say, but are activated by e.g. a directive. In some (not all!) cases, I included in brackets how that 'component' is used.
When defining a palette, what is actually affected by the hues?
hpsapf-primary: mat-palette($mat-light-blue, 400, 50, 900);
The first value (400) is the default hue.
The second value (50) is the lighter hue.
The third value (900) is the darker hue.
The default hue is used when setting color="primary" on a component
// The button gets the color #29B6F6 as can be looked up here: https://material.io/design/color/#tools-for-picking-colors
<button mat-button color="primary">Primary</button>
So how are the lighter (50) and darker (900) hues used by Angular Material or how can I use them? What are they good for?
How they are used can be seen by looking at Angular Material source code. More specifically, look at some of the component theming mixin files. An example from progress bar:
#mixin mat-progress-bar-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.mat-progress-bar-background {
fill: mat-color($primary, lighter);
}
.mat-progress-bar-buffer {
background-color: mat-color($primary, lighter);
}
.mat-progress-bar-fill::after {
background-color: mat-color($primary);
}
...
}
You can use them in the same manner through the theming utility mixins and functions and the default, lighter, darker, default-contrast, lighter-contrast, and darker-contrast palette map keys. It is explained in the theming guide: https://material.angular.io/guide/theming-your-components#note-using-the-code-mat-color-code-function-to-extract-colors-from-a-palette.
UPDATE:
The first answer was somewhat right, the idea was there, I take my answers below back. It is a little vague, for someone new to angular-material, like me. The link below, or here Angular 2 Material use lighter/darker colors on button does answer what I need. The previous answer might work for a progress bar, but right now I do not see how it will work with buttons. If someone do know how, please do help out. Angular's docs are somewhat sparse. However I still prefer if I could use it like this
<button mat-button color="primary darker">Primary darker</button>
And maybe beside it I want the color to be default then I could use it like this
<button mat-button color="primary default">2nd default</button>
<button mat-button color="primary default">3rd default</button>
I guess that is how and what the question was all about.
UPDATE ENDS.
Since none of the answers here are anywhere but actually near. They seem to have missed the point. Some of us are a little picky with colors. So let me try to rephrase what the question is.
He simply wants to use something like this:
<button mat-button color="primary default">Primary default</button>
<button mat-button color="primary lighter">Primary lighter</button>
<button mat-button color="primary darker">Primary darker</button>
I hope that is what he wants to ask because it seems like it.
I think that answer might be found here Angular 2 Material use lighter/darker colors on button
IF that works that is the closest that I can think that might work. I will try it later and will edit this post in a bit.
So I admit this is very close to a question that is to broad, but I think it counts as an acceptable question.
So been playing around with Angular Material, and yes it has a lot and cool stuff, and I like the idea of getting more or less a full styleguide to web layout as part of the package (have a look at http://www.google.com/design/spec/material-design/introduction.html it is worth a read)
My question is though, how do I use the pallette. I defined a palette in my java script (like the one below)
$mdThemingProvider.definePalette('Stackit', {
"50":"#f6f7f9",
"100":"#c9d3d9",
"200":"#a8b8c2",
"300":"#7d95a5",
"400":"#6b8798",
"500":"#5e7787",
"600":"#516775",
"700":"#455763",
"800":"#384751",
"900":"#2c373f",
"A100":"#f6f7f9",
"A200":"#c9d3d9",
"A400":"#6b8798",
"A700":"#455763",
'contrastDefaultColor': 'dark', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
So we have a pallette, and it picks up some of these colors automatically, for example, run this code and your md-toolbar will change colours.
However, there are a lot of colours in a palette, but I haven't figured out how to use them in a useful manner.
Say for example that I want my webpage to have to type of sections, one light grey with black text, one dark grey with white text, all are about half a screen size each, might have some icons or pictures, as well as some text.
So how I would do it normally would be something like
<div class=dark style="height: 350px">
Some welcome text and saying hi
</div>
<div class=light style="height: 350px">
A nice picture and some other bits
</div>
<div class=dark style="height: 350px">
Now lets do something with a big button
</div>
So in Material Design I'll get the divs by setting up a layout=row and a flex, nice layout and scroll down over my zebra.
However, in theory I would like to use color 100 for light and 600 for dark from my palette, but there does not seem to be a way to do so. Yes, I can create a CSS class with those colours, but it means that the whole Palette things seems rather wasteful.
After much faffing about, I manage to figure out part of it.
There is a md-accent option which seems to be create for this very purpose. You do need to set the accent first.
.accentPalette('grey')
In my case, I just needed the grey one, but you could define the whole palette using definePalette. So using our example above, the configuration would look as follows:
$mdThemingProvider.theme('default')
.dark()
.primaryPalette('Stackit')
.backgroundPalette('Stackit')
.accentPalette('grey')
.warnPalette('red');
Then all you need to do to make light (grey) text on black background:
<H1 class="md-accent">Prototypes</H1>
I recently saw a site that had the blog aligned to the right hand side of the screen (so any extra space was on the left of the main column. Unfortunately, it was Wordpress and all I can seem to find when I search for aligning blog templates to the right is stuff about right aligning pictures.
I suppose could add padding (trial and error) on that side to bump it across, but that wouldn't display properly on other computers.
My sidebar is 325 wide and the main column is 625, leaving ~240 on the left.
I'm just using the Simple template as a base. I don't know that it's worth the time that it would take to do it from scratch. Or that I have the skills :. The Blogger help areas are practically abandoned.
Is this possible? Or are there any other ideas that could work across different computers/resolutions?
Whatever element you want to align to the right , enclose it in a div and make it float right ? Wouldn't this work?
...
<div style="float:right">
<div class='sidebar'>...</div>
<div class='main-column'>...</div>
</div>
...
I'd like to use CSS Sprites, but I haven't used it in massive scale before, and seems like when all the images are being displayed using CSS Spirites (image as background), then it must be inside a div or span with display: block so that it can have a width and height?
If so, then isn't it messy that, before, as an <img>, it can flow as an inline element naturally, but now, it has to be floated.
It might be able to be shown as inline-block, but I think it is not well supported by all browsers?
I use this fix for inline-block when spiriting (although I ignore the vendor style for Firefox as modern FF plays nice).
FTA:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
Note that IE is generally fine as long as the element hasLayout.