i would like to resize my button and i understand i will need to use classname for this.
Here's my component
<Tour
steps={steps}
isOpen={this.state.isTourOpen}
onRequestClose={this.closeTour}
rounded={5}
className="reactour_helper_large"
/>
Here's my CSS code
.reactour_helper_large{
max-width: 80%
}
.reactour_close{
width: 15px;
}
Here's the HTML code
I am able to resize my tab using reactour_helper_large. However when i put something like className="reactour_helper_large reactour_close", the css for reactour_close gets applied on the main tab as well. How do i edit it such that it only applies for the button class highlighted below? Thank you.
Related
I have a react numpad component in my code and I need to change its size, but I cannot modify its CSS, theme or something like that properly.
I've already realized that some style like colors or fonts may be changed in node_modules\react-numpad\build, but omething like size or align I cannot change. Somebody help me, please , after looking to the following template code.
import NumPad from 'react-numpad';
<NumPad.Number
onChange={(value) => { console.log('value', value)}}
label={'Total'}
placeholder={'my placeholder'}
value={100}
decimal={2}
/>
When we click on the component, we get the numpad open. I need this numpad to be something much bigger than the standard one.
Your Numpad is dynamically added to the document.
You can change it's CSS. If you inspect it, you will get a element with MuiPaper-root class, using this class name you can change it's CSS.
.MuiPaper-root{
width: 500px;
height: 500px;
font-size: 25px;
}
If you want to change color of number being displayed you can do this,
.MuiPaper-root .MuiButtonBase-root{
color:blue;
}
Like this you can change CSS for whatever you want.
Note: Don't change any CSS directly in node_modules folder, instead you can override the CSS in your custom CSS file.
Angular4
Hi All. I'm have a single page within a large Angular4 app that needs to have body css that's different to the rest of the app.
I don't want to set ViewEncapsulation.None because it's just the one component that needs to be affected.
Can I use :host(), :host-context() or ::ng-deep in some way to select the body and apply the css rules? If so then how please? If not, is there another way to achieve this?
Thanks!
Thank you both very much. #Palpatine1991, you asked why I would want to access the <body> DOM element. This is because I have one page in the app which is a full screen game that is played on mobile devices and has drag and drop functionality within it. On iOS the "bounce" effect present in Safari makes drag and drop a very poor experience. So I wanted to add the following css to the body and html DOM elements of that single page, which suppresses that bounce effect.:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
I had a look into the solutions you gave (thank you!) and went with the following solution:
ngOnInit() {
this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
}
ngOnDestroy() {
this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
}
This seems to work.
Thank you :)
Why do you need to add your CSS to <body> if it affects only one component?
Using :host() it will apply the styles to the element which is selected by component's selector.
Using ::ng-deep you can select only elements which are somewhere under the host element (but <body> is not under your host!)
The only way how to change the styles of the body from the component which has ViewEncapsulation.Emulated is using the Renderer2 API but it seems to me like a very bad practice
If you need to override some global <body> styling of your component, you can do it using :host-context. Example here: https://stackblitz.com/edit/angular-material2-issue-oodjmm
I use agm-snazzy-window from amg-snazzy-window
There is explanation that I can override css class but when I do it it won't work.
This is my example:
map-component.html
<agm-snazzy-info-window [closeWhenOthersOpen]="true">
<ng-template>
My snazzy window
</ng-template>
</agm-snazzy-info-window>
I want to have wider content so I made this:
map-component.scss:
.si-content {
width: 500px !important;
}
What am I doing wrong?
::ng-deep .si-content {
width: 500px !important;
}
This will tell angular to attach correct ViewEncapsulation.Emulated classes to your styles. It doesn't do this by default because it cannot find them in your template.
Without ::ng-deep, your style will be .si-content[_ngcontent-1], or something similar. In such case [_ngcontent-1] comes from the map-component. Using ::ng-deep you instruct angular to look for "deeper" to find correct component agm-snazzy-info-window.
I have a web app using angular 2 and angular materials. I am using a simple modal:
<h1 md-dialog-title *ngIf="data">{{data.title}}</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions></div>
But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:
Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.
Have you tried opening your dialog with specific height that you need? like:
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
Another way to force custom styles is to customize the theme itself. you can have a look at the guide here.
You can override material styling from your scss/css.
But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:
/deep/ .mat-tab-group.mat-primary .mat-ink-bar{
background-color: red;
}
The jQuery UI dialog has a dialogClass option, which is nice, since the dialog is nested directly within the document <body>. However when setting the modal option to true, a ui-widget-overlay div is also rendered directly within the body (as a sibling of the dialog div).
Is there a way to, in effect, apply an overlayClass when opening a jQuery UI dialog with modal: true?
I know we could apply custom css to the overlay by giving the <body> a class attribute, or by overriding the .ui-widget-overlay class directly. I'm looking for a solution that would make a css definition like the following work:
.my-custom-class.ui-widget-overlay {
opacity: .5;
}
Actually there is a really simple way to do this using the CSS.(So long as you downloaded the jQuery UI library). There should be a jquery style sheet entitled: "jqGrid-custom.css"
Simply go into the overlays section and adjust this line:
.ui-widget-overlay { background: #aaaaaa url(/img/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity:.9;filter:Alpha(Opacity=90); }
There is no option for this. Looking at the source, there's not an easy way to jocky it in there either. For reference, here's the bit that adds the class:
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
You likely would be best to just customize / update your css to override / extend the default stylings.