I am using angular material to create a navigation bar. A chart is created using angular-google chart.
The navigation bar and chart looks like this;
Part of the google chart is hidden by the navigation bar.
Here is the relevant html code.
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;">
<h2>Sample navbar</h2>
</md-toolbar>
<div ng-controller="GoogleChartCtrl">
<div google-chart chart="presence_detector_Chart" style="height:300px; width:100%;float: left;"></div>
</div>
I would like to make the chart fall below the navigation bar so that no part of it is hidden by the bar.
What is wrong with the html code?
Simply add the following line in to your GoogleChartCtrl div, like so:
<div ng-controller="GoogleChartCtrl" style="padding-top: 80px;">
This adds some space to the top of your GoogleChartCtrl div. Alternatively, you can change padding to margin.
The position of the navigation bar was fixed. If you made it floating, the chart would automatically be placed below the bar. The solution is to replace the fixed position with float. Here is the html code.
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;float:left;">
<h2>Sample navbar</h2>
</md-toolbar>
<div ng-controller="GoogleChartCtrl">
<div google-chart chart="presence_detector_Chart" style="height:300px; width:100%;float: left;"></div>
</div>
Related
I have two divs within my main fxLayout Container. They look like this:
Where the red box is the fxLayout Container, the blue box is the Information and the black box is the Chart. As may be noted, the charts div is larger than the information box's div. I would like it to stay this way when resized at all times. In order to achieve this, I have done the following:
information.component.html:
This component is simply a box with several mat-card. It is within a fxLayout container as well.
<div id = "dataInformation" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="5%">
<h1>CrowBox Information</h1>
<!-- ...CODE FOR DROPDOWN BUTTON... -->
<!-- ...EXAMPLE MAT-CARD... -->
<mat-card>
<mat-card-title>NICKNAME</mat-card-title>
<mat-card-content>{{ crowboxNickname }}</mat-card-content>
</mat-card>
<!-- ...SAME MAT-CARDS JUST WITH DIFFERENT PROPERTIES... -->
</div>
The only styling applied is width:75% for .mat-card and font related styling.
I then call this component in another component.
data.component.html
In here, I create the charts, call the information.component and place all of this within another fxLayout container. I also specify what should happen if the window is resized. I would like for the size proportions to remain the same when the container goes from a row to a column. However, for some reason, fxFlex.xs does not seem to be working for me and the chart ends up looking really small as can be seen here:
<div class="wrapper" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center" >
<div id = "charts" fxFlex="60" fxFlex.xs="60">
<!-- THE CHART -->
<div *ngIf="showCoinsDeposited === false" >
<canvas baseChart
[datasets]="crowOnPerchChartData"
[labels]="crowOnPerchChartLabels"
[options]="crowOnPerchChartOptions"
[legend]="crowOnPerchChartLegend"
[chartType]="crowOnPerchChartType"
[colors]="crowOnPerchChartColor"
>
</canvas>
</div>
<!-- ...ANOTHER CHART HERE... -->
</div>
<!-- THE INFORMATION BOX -->
<div fxFlex="27" fxFlex.xs="27" style="border: blue; border-style: double;">
<app-information [crowsOnPerch]="crownsOnPerchValues" [coinsDeposited]="coinsDepositedValues"></app-information>
</div>
</div>
I have set fxFlex.xs for the chart to be 60 and fxFlex.xs for the information box to be 27. I do not think this is being accurately reflected and cannot seem to figure out why. I would like the chart to fill the width of the screen and be much larger. How might I achieve this?
Note: The charts and wrapper do not have any positional styling (only fonts and borders).
If I'm not mistaken, you want the two boxes on different rows while using the xs screens.
Note: fxFlex="60" is a shorthand for fxFlex="1 1 60%".
I think it's better to remove the fxLayout.xs="column" and use fxLayout="row wrap" and add fxFlex.xs="100" or whatever for your chart div. Then after adding fxFlex.xs for the next box, if the sum of the sizes is more than 100, the next item would go to the next row.
<div fxLayout="row wrap" fxLayoutAlign="space-evenly center">
<div fxFlex="60" fxFlex.xs="87" style="background: green">
box1
</div>
<div fxFlex="27" fxFlex.xs="40" style="background: yellow;">
box2
</div>
</div>
Also, there are lots of useful information and examples about flex-layout in here and here.
I've read the different posts here asking for footer help; but unfortunately I do not see anything here that have worked in assisting me.
I am building a web app where I am trying to fix the footer to the bottom of the page without overlapping my nav bar (Orange bar) on the left hand side.
Currently my page and code are:
fixed bottom, overlapping nav
<div class="container-fluid">
<div class="HeaderBar row">
<div class="col-md-12">
<img src="images/systemslogo.png" />
</div>
</div>
<div class="FeatureBar row">
<div class="col-md-12">
<p>Welcome</p>
</div>
</div>
<div class="row min-vh-100">
<div class="navbar col-md-1" style="background-color: #f78a00;">
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<AlertSuccess/>
#Body
</div>
</div>
<div class="row fixed-bottom" style="background-color: #CCCCCC;">
<div class="col-md-12">
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
If I remove the "fixd-bottom"; the footers width fixes; but then the footer floats to the top of the page like so:
Floating footer proper width
I have also attached my end goal image; I have blocked out the personal content.
End Goal
I have tried:
Position relative with Bottom 0
margin left (although moves footer over; it screws up when looking at mobile view where there should be no margin. (wasn't sure if I should do a media query and use this option)
Position Absolute with mb-0
Other ideas, but cannot recall
what I have tried.
I am building this app in Blazor with Bootstrap 4.5.2
Thanks everyone for the assistance. I've been googling and trying for past 2 hours with on success.
You're looking for position: fixed;
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
Source # https://www.w3schools.com/css/css_positioning.asp
I have my HTML and it looks as below:
<div class="col-4 icnContainer">
<clr-dropdown>
<button clrDropdownTrigger aria-label="Dropdown demo button">
<clr-icon shape="ellipsis-vertical"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
<div aria-label="Dropdown header Action 1" clrDropdownItem>Action 1</div>
<div aria-label="Dropdown header Action 2" clrDropdownItem>Action 2</div>
<div clrDropdownItem>Link 1</div>
<div clrDropdownItem>Link 2</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
My output that I get with this kind of setup is shown in the image below:
'
As you can see in the circle, there is an caret added after the Ellipsis. I dont want the caret, I just want the ellipsis like below:
Can anyone tell me how I can achieve that.
Furthermore, the dropdown is opening inside the containing div as shown below
How can I get the menu to open outside the containing div.
For positioning the menu you can use one of the following positions:
top-right
top-left
bottom-right
bottom-left
right-top
right-bottom
left-top
left-bottom
Here is a demo with the bottom-right position: https://stackblitz.com/edit/so-58030404-dropdown-menu-positioning
I'm not sure where the carot icon is coming from, can you fork and modify the stackblitz to create a reproduction that I can look at?
I'm moddifiyng a webpage through css styles and I got stuck trying to join two divs.
<div class="grid_0">
<div class="grid_0">
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
</div>
<div class="clear"></div>
<div class="grid_0"></div>
<div class="clear"></div>
<div class="grid_0">
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
</div>
The main container has a flex property (because I want the width of the page to flex with different display resolutions “out there”) and 100% width.
I want to merge the contents of FIRST and LAST grid_0 divs, but between them lay three other divs: two spacers and an add box (the one in the middle).
Notice that the div in the middle (the add box) shares the same ID with the ones I want to merge.
Hiding the two spacers and the add box (using the :nth-child property) didn't do the trick..
Here's a “diagram” that shows the layout.
How can I move the three thumbs in the last grid_0 into the first grid_0 through CSS?
EDIT:
I suspect this isn't doable through CSS..
I might need to use a java script.
you can not manipulate the DOM with CSS, you need JS or something similar.
You will need to try something like this:
$("#id-of-first-element").append( $("#id-of-last-element") );
$("#id-of-last-element").html('');
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/