I'm using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px.
<img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/>
<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
<button md-menu-item >
<div class="row notification-row">
<div>
<span class="image-container"> Option 1 </span>
</div>
</div>
</button>
</md-menu>
In CSS file, I do this:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
In console, I can identify the class where the default value is set: max-width:280px; , and when I edit it in my console, it works perfectly, but even though I try to override it in my CSS code, I am not able to do that. I tried this, also:
.mat-menu-panel{
max-width: 600px;
}
And this:
.cdk-overlay-container .mat-menu-panel{
max-width:600px;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
}
How can I override this default value?
Set the View Encapsulation to None on your component:
#Component({
templateUrl: './my.component.html' ,
styleUrls: ['./my.component.css'],
encapsulation: ViewEncapsulation.None,
})
Then in your component css you can do exactly what you tried:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
View Encapsulation = None means that Angular does no view
encapsulation. Angular adds the CSS to the global styles. The scoping
rules, isolations, and protections discussed earlier don't apply. This
is essentially the same as pasting the component's styles into the
HTML.
In some cases the wrapper over .mat-menu-panel can be .cdk-overlay-pane, in that case css should be something like this.
.cdk-overlay-pane.mat-menu-panel {
max-width: your_custom_value
}
Due to the css specificity rules, 2 classes of specificity are required in order to override the defaults.
The same crazy problem for me... how I solved:
::ng-deep .cdk-overlay-pane .mat-menu-panel {
max-width: 436px;
}
At component SASS file
See: Angular Component Styles - View Encapsulation
and issue comment by #gaiki https://github.com/angular/material2/issues/4462
Related
I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.
The template code calling the dialog:
<div class="-nav">
<q-select
outlined
dense
v-model="select"
:options="options()"
behavior="dialog"
style="width: 100px"
/>
The CSS element is:
<style scoped>
.q-dialog__inner {
width: 400px;
background-color: red;
}
</style>
This does not work:
:deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I noticed that the global quasar style is marked with !important
codepen: https://codepen.io/kiggs1881/pen/oNoOzEj
.q-dialog__inner > div {
width: 400px !important;
background-color: red !important;
}
hope it helps
Have you tried to put the parents class in front of the selector like this?:
(If have seen this here) and it worked for me inside an expansion item.
.q-dialog :deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component
there are many ways to counter this problem using scoped is not the only one
Hi I just started using Material UI and am having a hard time styling the components. I am building a sign in page and would like my Submit button to be all the way to the bottom right. If someone can help me out that would be greatly appreciated because it seems to be inheriting styles from everywhere else but where I would like to!
I have tried adding
textAlign: 'right'
to buttonStyle and that does not work. I have also tried adding
text-align: right;
to my .form-button CSS.
The only thing that affects anything is removing the .App
Login.js
<div className='form-container'>
...
<Button
style={buttonStyle}
className='form-button'
variant='contained'>
Log-In
</Button>
</div>
...
const buttonStyle = {
backgroundColor: '#527354'
};
App.css
.App {
text-align: center;
}
.form-button {
width: 83px;
height: 36px;
box-shadow: 0px 1px 3px #00000033;
}
.MuiButton-label {
color: var(--primary-white);
font-family: 'Open Sans', sans-serif;
}
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
Another main goal would be to avoid inline styling because I do prefer keeping it within my style sheet. But if not possible or too overly difficult, I will inline style (as I did with the background-color).
As keikai has mentioned in the comment, you may check the Documentation in this link material-ui.com/styles/basics for overriding style.
For 'it seems to be inheriting styles from everywhere else'
I will suggest you to use styled-components instead of global css import, which mess up everywhere. Try this,
npm install --save styled-components
It creates a css class that only apply to the component.
Sample code:
import styled from 'styled-components'
const MyDiv = styled.div`// can be span, section, etc
// add your style here for the div
your div style(optional)
// your class css inside the div
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
// add more class if you have any
`
Then wrap your component with
// your newly created styled div
<MyDiv>
// component that needs your style
<MyComponent />
</MyDiv>
Your style will only be applied to MyDiv and MyComponent, and nothing else.
It may took awhile to get used to it, but it is extremely useful.
I have a css module which apply styling to an existing component. The css module works fine but the styling was always overwritten by the default style of component.
Supposed I have this markup.
<Header className={styles.header}>
<Row type="flex" justify="space-between">
<Col>
<Link to="/">
<Title className={styles.brand}>Shiritori</Title>
</Link>
</Col>
</Row>
</Header>
Then uses the styles declare in the css module:
.header {
background: rgb(75, 191, 107);
margin-bottom: 1rem;
> div {
align-items: center;
}
}
I expect that the background css property of the default style will be overwritten but instead the styles in my css module was canceled out.
Actual result:
.ant-layout-header {
height: 64px;
padding: 0 50px;
line-height: 64px;
background: #001529;
}
.ant-layout-header, .ant-layout-footer {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.ant-layout, .ant-layout * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.App_header__37gyT {
background: #4bbf6b; <- this property was overwritten by the .ant-layout-header background property
margin-bottom: 1rem;
}
I also consider the order of css/scss import but same result.
import "../../../node_modules/antd/dist/antd.css";
import styles from "./App.module.scss";
Is there a way to overwrite existing style of a component. I use antd for the UI toolkit and components.
Unable to replicate your issue. Seems to be working fine:
That said, when dealing with CSS specificity, you can do one of several things:
Overwrite a child class style from a parent class style.
Use the id property: <Header id="header-id">Header</Header> (then use the # to refer to header: #header-id { ... })
Overwrite the .ant-layout class name within a separate CSS/SCSS file.
Add an !important declaration after the style property, for example: background: pink !important;
That said, I'd avoid importing the entire CSS library and instead use the babel plugin to import only what's needed.
I am having a bizarre issue whilst creating my first Angular2 app.
I am applying some CSS to a component host (example-component) yet it doesn't appear in the browser?
This is my first time posting for Angular in SO, so hopefully I include everything needed to attain some help.
example.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'crate',
templateUrl: './app/folderA/folderAB/crate.html',
styleUrls: ['./app/folderA/folderAB/crate.css']
})
export class MyComponent {}
index.html
crate.html
<div class="background">
<div class="content">
<p>Content</p>
</div>
</div>
crate.css
:host-context(.lg){
width: 100%;
background-color: #000;
border-radius: 25px;
}
What I don't understand, is that I open this in chrome & firefox, and I see the following CSS stated under rules for example.component.
.lg[_nghost-ims-2], .lg [_nghost-ims-2] {
width: 100%;
background-color: #000;
border-radius: 25px;
}
It is correctly applying the CSS to example-component, but it is not being displayed / rendered in browser. What am I doing wrong / missing?
EDIT
The exact same issue applies even if I change crate.css to:
crate{
width: 100%;
background-color: #000;
border-radius: 25px;
}
Any component with an unrecognized tagName like <crate></crate> is created as a HTMLUnknownElement and has empty values for all the style properties, if you want it to behave like a div then add display: block; to your stylesheet.
See Browsers' default CSS for HTML elements for additional resources on the default css for different browsers.
First of all, sorry for yet another post about this topic but I couldn't see anything that makes sense to me in polymer documentation and on stackoverflow.
I just want to attach style to my element.
From the documentation (https://www.polymer-project.org/0.5/articles/styling-elements.html and https://www.polymer-project.org/0.5/docs/polymer/styling.html#including-stylesheets-in-an-element)it should be straight forward.
<polymer-element name="x-foo">
<template>
<style>
x-foo div { ... }
</style>
...
But it doesn't work as expected. If we define the style for an element, inside the element, it is not applied.
Here is the code:
<polymer-element name="x-button" noscript>
<template>
<style>
/* not working */
x-button {
background-color: green;
}
/* not working */
x-button .hithere{
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
/* not working */
x-button .hitheretoo{
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
<div class="hithere"></div>
<template>
<div class="hitheretoo"></div>
</template>
</template>
</polymer-element>
And a live demo:
http://codepen.io/anon/pen/yyZqMN
Thanks
ssorallen explained the css issue very well and there is more. I couldn't get :host to work on it's own and depending on the browsers you will need to shim the Shadow DOM & add polyfill-next-selector styles.
Additionally, The element never gets registered because you have not used the Polymer() function inside the custom element (unless you chose not to add it in your code example). Here is a codepen of what I found to be one possible solution.
The one thing I am still trying to figure out is the nested <template> issue. I can't pierce the shadow boundary with ::shadow or /deep/. Might be a bug. I'll take a look when I get a few minutes.
Use the :host selector when styling an element from inside itself
<style>
:host {
background-color: green;
}
.hithere {
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
.hitheretoo {
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
When you're styling from inside a custom element all selectors are already scoped to the element. By selecting x-button you are selecting any x-buttons that are descendants of this element, not the element itself. That also means you don't need to prefix selectors with the tag name to scope them; the shadow DOM provides scoping.