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?
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.
Is there a possibility to give a bootstrap 4 col the width of its child, which is a container class?
<div class="container-fluid">
<div class="row">
<div class="col bg-secondary m-0 p-0">
text left
</div>
<div class="col-auto bg-primary">
<div class="container bg-primary m-0 p-0">
text mid
</div>
</div>
<div class="col bg-secondary m-0 p-0">
text right
</div>
</div>
</div>
I basically want to be able to put content on the left and right of a container, but I don't want my container to change in size because of this, because this left and right content won't be present on every page, and I want a consistent container width cross pages.
https://jsfiddle.net/5gt9uoqb/
Update:
Here's an image of what I would like to achieve: ibb.co/tcKM6S0 . At the bottom is a 'normal' page, with a centered container. This is a div with the standard container class that ships with bootstrap. At the top is a new page type I would like to create. It should have the exact same container like the other page, but I want to be able to put content in the grey zones, like, for example, some social icons (blue in the img). Wrapping the normal pages in a column too is not an option in my set up because of other stuff.
if you know about position property, then you can handle this issue without touching the container class.
For that, you need to a parent class of all child element. I mean after the body tag you take a class and give it position relative the which content you want to be left give it position absolute and left:0px;(you can space from left according to your), and if you want content right then you give it right:0px;
Please take a look at https://jsfiddle.net/797311vt/.
The following menu looks fine in broader views but the last item (fourth) dissapears in mobile view. It also dissapears with <div class="right stackable menu">.
<div class="ui stackable menu">
Home
Second
<div class="right menu">
Third
Fourth
</div>
</div>
How can I make a stackable menu where all four items show in mobile view?
This is an open bug as of 22-Sep,2016 (link: https://github.com/Semantic-Org/Semantic-UI/issues/3604 )
To move around the bug, you can do the following: https://jsfiddle.net/batrasoe/udpzkj7p/
<div class="ui stackable menu">
Home
Second
Third
Fourth
</div>
It does not use a right menu, but assigns the right class to the second-last element in the menu, which pushes the right of the elements to the right.
You would also have to add a border-left property to the last element. See fiddle for details.
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>
I have a link that looks like a button that needs to be at the center of the page horizontally.
This is the link:
Return to Top
I have tried:
style = "margin: 0 auto"
style = "text-align: center"
class="btn btn-info btn-xs center-block"
Nothing works. Is it because my ui-view is set like so this?
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
What should I do?
You can just wrap your button inside a div and add the text-center class to the div as follows:
<div class="text-center">
Return to Top
</div>
axc, Hi there. Along the line of what Imgonzalves has said.
You need to give some width to center something within.
Have a look at this Fiddle.
The top block you will see the button is centered.
Using the Bootstrap class text-center which is placed in the parent and then it will center all text within that div and ones within.
The parent has width because it uses the class col-md-10.
The second orange block in this demo shows you what you were trying to do.
Hope this shows you that you need to give a div some width to center the button within.