I need to create a footer with 2 simple rows the company name and the year. Here is my html snippet,
<mat-toolbar color="primary" style="height: 176px">
<span>Company name</span>
<span>Copyright ©2019</span>
</mat-toolbar>
So that company name has to be at the center (vertically and horizontally) and the copyright should be below of the company name.
Just place the spans into a mat-toolbar-row. They are basically made for structuring content in lines.
<mat-toolbar>
<mat-toolbar-row>
<span class="span">First Line</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span class="span">Second Line</span>
</mat-toolbar-row>
</mat-toolbar>
Then you just have to center the spans.
.span {
margin: auto;
}
Related
I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes.
A similar concept to colored links.
I couldn't find this topic on Bootstrap's website.
I found a few working solutions referring to Bootstrap v4.
In my case:
<div class="divider py-1 bg-success"></div>
It works, but I guess it's not the best practice...
Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:
<hr class="bg-danger border-2 border-top border-danger">
Have a look at the Utility classes in their docs.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>
This should work
Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:
<hr class="mt-1 mb-1"/>
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.
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.
EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.
I am trying to align a ui-icon from a jquery theme to the right of a textbox element with no luck.
I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.
Shouldn't a span just render the html inline anyway, right where I put it on the page?
<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>
You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?
<head>
<style type="text/css">
.tdd{
width: 50px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
</table>