Please how can I override the default height of md-nav-item in angular material using CSS. I have the following sample code:
<div ng-cloak>
<md-content class="md-padding">
<md-nav-bar
md-selected-nav-item="currentNavItem"
nav-bar-aria-label="navigation links">
<md-nav-item name="Page1" md-nav-click="goto('page2')">
Link1
</md-nav-item>
<md-nav-item name="Page2" md-nav-click="goto('page2')">
Link2
</md-nav-item>
<md-nav-item name="Page3" md-nav-click="goto('page2')">
Link3
</md-nav-item>
</md-nav-bar>
<div class="ext-content">
{{currentNavItem}}
</div>
</md-content>
See also example on plunker
After inspecting the styles, you can do something like this to change the height of the nabvar:
PLUNKER (Work from angular-material version >= 1.1.0)
.md-nav-bar, .md-nav-bar > nav, ._md-nav-bar-list, .md-button._md-nav-button{
height: 50px;
}
.md-button._md-nav-button {
padding: 0;
min-height: 0;
}
**** Be sure of include your styles.css file after the angular-material.css file in your index.html
Explanation: You're asking about change the height of md-nav-item, but in fact, this directive is writing/transcluding a ul._md-nav-bar-list with .md-button._md-nav-button inside each li. So, you have to change the height of .md-button._md-nav-button. But the problem is that buttons doesn't have height, they have padding and min-height.
And even, the main problem is that .md-nav-bar has a default height (48px), so if you change the height of items inside it, it doens't matter, you have to override this default height first.
Related
I recently updated my Ionic 2 project to Ionic 3, and the changes to ion-slides have broken my app.
Specific widths are being set in the style tags on the slides when the app loads, and it's breaking my styles.
This is what I have in my HTML:
<ion-slides pager>
<ion-slide *ngFor="let image of offer.Gallery">
<img [src]="image.Url"/>
</ion-slide>
</ion-slides>
And this is how it renders:
<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager="">
<div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper">
<ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;">
<div class="slide-zoom">
<img src="IMG">
</div>
</ion-slide>
</div>
... Pagination ...
</ion-slides>
You'll notice that somehow the ion-slide tag has a style="width: 171px;" set on it. What is causing this and is there a way to turn it off?
you can address the ion tags directly in Ionic 3!
A more dynamic solution would be using unset value for it.
Just try to write in your yourpage.scss:
ion-slide {
width: unset !important;
}
and it should remove it!
If it is not the width you need then just change it as shown below.
Note: There are No Saas variables for this
your-page.scss
.md,
.ios,
.wp {
.swiper-slide .swiper-slide-active{
width: 100px;//your width here
}
}
Note: If above was not working then you must use width: 100px !important;. No other option where I can think of.
Try this:
ion-slide >:first-child {
width: 100%;
}
The slidesPerView option defaults to 1; to show more slides at a time, increase this in your slider options.
HTML:
<ion-slides pager [options]="slideOpts">...
typescript:
slideOpts:any = {slidesPerView: 7}
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
I have an angular2 application using the Angular2-material library for styling. I'm trying to add a FAB (Floating Action Button) to hover in the right corner of the application, but it's fixing itself to its parent component, and not the window.
The hierarchy of the application is as follows:
app.component
|-detail.component
Within the app.component template, I am using the md-sidenav-layout directive with router-outlet in the body of the layout directive:
<md-sidenav-layout>
<md-sidenav #sideNav (open)="closeStartButton.focus()">
<router-outlet name="navMenu"></router-outlet>
<br>
<button md-button #closeStartButton (click)="sideNav.close()">Close</button>
</md-sidenav>
<md-toolbar color="primary">
<button md-icon-button (click)="sideNav.toggle()">
<md-icon class="md-24">menu</md-icon>
</button>
<span>{{title}}</span>
</md-toolbar>
<div role="main">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>
Inside the detail component template, I have the following at the top of the template:
<button md-mini-fab class="fab" (click)="toggleAdd()">
<i class="material-icons">add</i>
</button>
And the css for that component:
.fab {
display: block;
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 10;
}
However, when I navigate to the detail page, the .fab is positioned relative to the component, not the window. I've tried using encapsulation: ViewEncapsulation.None on the detail component, but that doesn't affect it either. Is there a way to keep the fab defined within the detail component, but have it still be fixed relative to the window?
Look for something applying a CSS transform up the chain. In my case I was applying a transform via Angular animations. Apparently transform breaks position:fixed. Why does `transform` break `position: fixed`?
I hope I can figure out how to make this work, now.
in your app.component.html add this code:
<md-sidenav-container>
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
<div class="my-content">Main content</div>
</md-sidenav-container>
global styles.css:
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
width: 100%;
height: 100%;
}
it works for me! ;)
I answered a very similar question here.
The gist: I solved this with a quite heavy workaround. I removed the FAB from the main content, defined a secondary router outlet in my template (outside md-sidenav-layout), created a standalone component for the FAB, and used an Observable in a service to broadcast the click events to the main components.
The answer in the other thread contains code samples and a working plunker example.
I have an editable body with a div:
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
And a :before style:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?
You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.
See that if you set the property in the child div instead, you can make it work.
div.paragraph:before {
content: "☑";
}
<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>
When this issue is reproduced, (via this fiddle, for instance) the developer tools show that div.paragraph is removed. Only a text node remains.
becomes
To stop the div from being removed, don't give its parent contenteditable. Use this instead:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
You are not editing the :before content.
It just removes the whole .paragraph element once it gets empty, or if you backspace when you are at the beginning of the tag.
The other answers explain the problem. If a div inherits its edit-ability from its parent, it is possible to remove the child div itself and together with the div also the before-content.
In order to prevent this, it is necessary that the editable div must not be placed in an editable parent. This makes it necessary to put every editable div into a non editable parent div to preserve the editable child div.
The following example shows this
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Possible workaround this problem. This seems to working as you want it to be.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
I'm using twitter bootstrap. It has collapse module.
I'm using it like this.
<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>
This is the collpasediv
<div id="collpasediv" class="collapse in">
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>
I would like to move half of the circle of circlecount outside the collapsediv.
By default bootstrap applies overflow:hidden attribute for collapsediv.
I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks
PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.
Thanks
In the stylesheet for the twitter bootstrap there is the following declaration:
.collapse.in { height: auto; }
Add to it like this:
.collapse.in { height: auto; overflow: visible; }
Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):
.collapse.in { overflow: visible; }