I have the width: clamp(0.6rem, 7vw + 0.2rem, 2.4rem); in a styled-component and when I postbuild with the react-snap the width disappears from the pre-render html style css, but if I put width: 2rem it is ok.
Why and how to make the clamp work?
Related
I have a component in angular which opens up modal dialog on click of the button. I have many such different buttons which open modal dialogs of different types of different width. I am using Ng bootstrap modal dialog and modal dialog all are same width but I want it to be different widths. I try overriding the css in the modal-dialog component ::ng-deep works but :host does not work. What am I doing wrong here, Please suggest.
My css for one of the modal-dialog is as below which works
::ng-deep .modal-dialog {
min-width: 700px !important;
max-width: 900px !important;
width: 95% !important;
background-color: red !important;
}
The below css does not get applied
:host::ng-deep .modal-dialog {
min-width: 700px !important;
max-width: 900px !important;
width: 95% !important;
background-color: red !important;
}
I know this answer is long overdue, but I just happened to face the same problem and found out the reason.
The ":host" pseudo-selector has the CSS rule applied to the <app-root> component.
However, your Dialog is created in a <div> at the same level with <app-root>, instead of inside the <app-root> component, thus the CSS rule is not applied to it.
Sorry for being so rough, I'm on the clock right now. If you need a more expansive answer, please just leave a comment.
Hope this answer can help someone in the future.
Could someone help me with the layout of those PrimeNG components?
I would like to have a tree taking the whole vertical space (minus buttonset at the bottom), scrolling if needed. Tree is being places inside a tab panel.
Thanks in advance
https://stackblitz.com/edit/angular-np8of7?file=src/app/app.component.html
Either you can add this kind of CSS
.p-tree {
height: calc(100vh - 300px);
overflow: auto;
}
but in order to apply it, you have to declare encapsulation: ViewEncapsulation.None in your component definition. See StackBlitz.
Either you just add in your CSS:
:host ::ng-deep .p-tree {
height: calc(100vh - 300px);
overflow: auto;
}
I'm using antD modal to show an editor, the popup window should be fixed size to prevent size changing when collapsing/expanding sections inside.
So I customized:
.ant-modal-content {
max-height: 700px;
height: 700px;
width: 1000px;
/*overflow-y: auto;*/
/*overflow-x: auto;*/
}
but it's affecting other popups!
I tried using style={{height: '700px', width: '1000px'}} of that specific modal but it didn't take affect.
How can I control the size of only one modal?
Sandbox:
https://codesandbox.io/s/antd-reproduction-template-ci559?file=/index.css
(try to change the size o the syntax textarea as example for changing the size)
CSS styles defined in index.css file are global styles, meaning they affect every element/component in each file.
If you want to apply some styles on a specific element/component, you have 2 options:
use CSS Modules. They allow you to restrict styles to specific component and reuse class names without worrying about name clashes or css styles affecting other components or element.
As your popup window is a div element with a class named wrapper, apply the styles on wrapper class in RuleEditor.css file
.wrapper {
max-height: 400px;
}
but keep in mind that if you use wrapper class somewhere else, these styles will affect those components/elements as well.
you also have to prevent textarea from resizing as well otherwise it will overflow. To do this, inside RuleEditor.js file, change the styles applied on TextArea component from
style={{ width: "100%", resize: "auto" }}
to
style={{ width: "100%", resize: "none" }}
I am trying to create a MapView component using React Native and have given it the following styling:
map: {
flex: 1,
width: vw,
height: vh,
}
The component is to render completely between a navbar and a footer.
How do I get the Map to render with 100% height between the navbar and footer?
Use calc() in the css.
for exapmle, if your header is 50px high you would set the map height: calc(100% - 50px;)
fiddle: https://jsfiddle.net/DIRTY_SMITH/3oo2jmko/2/
Is there way to set the size of polymer paper-menu-button element. I think it is the icon size is set to 24px. I wish to have it as 20px but I cannot find a way to do it.
Thanks
Dennis
I tried it and it worked.
Add this style to the Polymer element containing your <paper-menu-button> element.
paper-menu-button /deep/ core-icon[role=img] {
height: 20px;
width: 20px;
}
I added [role=img] to increase the selectivity.