I am using mat-toolbar and I would like to create bottom navigation. Similar to this enter image description here
I am not able to get a curve at top border
My result:
enter image description here
Here is my code:
HTML
<div class="footer">
<mat-toolbar class="toolbarNav">
<mat-icon class="material-icons color_blue" >home</mat-icon>
<mat-icon class="material-icons color_blue">question_answer</mat-icon>
<div class="create"> <button type="button" class="btn btn_create"
(click)="openDialog()"><img src="../../../assets/icons/Group 2090.svg"></button></div>
<mat-icon class="material-icons color_blue" >notifications</mat-icon>
<mat-icon class="material-icons color_blue" >person</mat-icon>
</mat-toolbar>
</div>
I suppose one good solution is using background svg's in your proposed forms, have you tried it out? There is one example https://stackblitz.com/edit/angular-8uxnb4?file=src/app/toolbar-overview-example.css showing to add an image as background, if you utilize SVG, it will allow you all shapes you like, if you need an simple svg for test purpose let me know and I create you one for test purpose.
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>
How can I make one div to take certain percent of parent space verically?See the code below:
<div layout="column">
<div id="div1" flex="70%"></div>
<div id="div2" flex="30%"></div>
</div>
I want to make div1 70% height and div2 30% height of parent div. But it does not work. Div 1 and div 2 collapsed. But if the parent layout is row, it works fine---div1 takes 70% percent space horizontally.
I think you need to make the following modifications:
Specify a "height" to your outside div. This could be a percentage or pixels.
Do not use the % sign with the flex attribute
See this codepen: http://codepen.io/sebastiengiroux/pen/jPovxG
<div layout="column" style="height: 100%;">
<div id="div1" flex="70" style="background-color:red;"></div>
<div id="div2" flex="30" style="background-color:blue;"></div>
</div>
If you look into Layout docs https://material.angularjs.org/latest/layout/introduction
there is this statement that I think is relevant to your problem.
The flex attribute value is restricted to 33, 66, and multiples of five.
For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ....
So I guess if you use allowed values, you can achieve results that you need. For example using 66 and 33.
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>
...
So i have this div containing a contact script:
<div id="contactbox" style="">
<form enctype="multipart/form-data" method="post" action="http://www.response-o-
matic.com/mail.php" accept-charset="UTF-8">here's the script</form>
</div>
</div>
I'm wondering if there is any way to align a script after the wrapper size for every resolution.Because i set the position of the script in percentage and on my resolution it looks centered in wrapper.But on a bigger resolution for example it's not working,it's a little bit in left side,that means the script goes after the html size because it focuses after it and it goes in the middle.
I know that if i set the wrapper with:
.wrapper
{
text-align:center;
}
then every texts from the wrapper will be centered after his size,but with scripts isnt working.So is there any way?