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.
Related
I've run into some issues with vertical alignment for an image (using bootstrap 5).
In the index.html I've created a number of thick strips that alternate being colour and then white, with each about 800 px each. I've set the height of each strip in css to 800px.
I'm trying to place an image in each strip and the image sizes will differ in width but none will be greater than 800 px in height. The image doesn't seem to be vertically centred when I used the suggestions from the post below:
Bootstrap Center Vertical and Horizontal Alignment
There is this example given https://www.codeply.com/p/0VM5MJ7Had
And the div tag used to center everything is
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
In the tag above if the min-vh-100 is removed then the content just moves up to the top of the screen even though it's still justify-content-center and align-items-center.
I'm still struggling to get my head around how vertical alignment works and the relationship between containers and rows to aligning an image vertically.
<!-- color background -->
<div id="first_strip" >
<img src="../images/" class="img-fluid" alt="" />
</div>
<!-- white background -->
<div id="second_strip">
<img src="../images/" class="img-fluid" alt="" />
</div>
<!-- color background -->
<div id="third_strip" >
<img src="../images/" class="img-fluid" alt="" />
</div>
etc.
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;
}
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'm using a <div data-role='fieldcontain'> to make a "box" where there are two fields "min" and "max" the problem is that I want to have two parts in the same line, but jquery mobile separes in two lines if display width is smaller than size jquery wants. I try to put width of two components, but it still separes in two lines and the label and text box are smaller than half display...
this is my code:
<div data-role='fieldcontain' id='TempLimits'>
<label for='Tmin' style='display-inline;width:100;'>Min
<input type='text' name='Tmin' id='Tmin' value='50' disabled='disabled' style='display:inline;width:50px;'/></div>
Thanks,
This is the solution I found:
<div data-role='fieldcontain' id='TempLimits'>
<label for='Tmin' style='display-inline;width:100;'>Min
<input type='text' name='Tmin' id='Tmin' value='50' disabled='disabled' style='display:inline-block;width:50px;'/></div>
I have a single image (a flattened out image of the world map), I want to be able to plot some coordinates in this image without having to create a map server or whatever per se, Idon't know where to begin, whats the easiest approach
This will absolutely position links within a containing div with a background image:
(inline css used to simplify concept).
<div style="width:500px;height:400px;position:relative;background-image:url('image.png')">
<div style="top:20px;left:35px;position:absolute;">
link
</div>
<div style="top:120px;left:65px;position:absolute;">
link
</div>
</div>
Use OpenLayers.Layer.Image.