I'm working in ReactJs and unable to find out how can I customize scroll for a specific section.
<div>
<div>
Some header
</div>
<div style={{ height: "210px", overflow: "auto", }}>
// this section is only scrollable and I want to customize this scroll bar.
</div>
</div>
It was easy in html because I was able to use webkit. However, I don't know how to do this thing in react any help will be really appreciated. Thanks well in advance!
If I use the webkit then I'm getting this sort of error:
Styling scrollbars is somewhat possible, depending on the browser. if you want to completely restyle it, you will have to hide the real scrollbar, create a new one, and add functionality to it with code.
It is probably easier to use a tool like simplebar, which works with react:
import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';
const App = () => (
<div>
<div>
Some header
</div>
<SimpleBar style={{ maxHeight: 210}}>
// this section is only scrollable and I want to customize this scroll bar.
</SimpleBar>
</div>
);
https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react
Use this package react-custom-scrollbar for custom behaviour and styling.
Also it is compatible with all browsers(Chrome/Firefox/Safari) etc.
Related
Hi I'm having Datepicker (based on the react-date-picker package) inside Material ui Dialog.Dialog works perfectly but When i click on datepicker it scrolling down and cuts off and scroll showing.
this is my Example
how do i overcome this with css
overflow scroll couldn't solved the issue because i'm having a list item
You are using the react-date-picker combined with the material-ui's <Dialog> component, and the problem is that the date-picker is rendered inside the Dialog's DOM, so it's blocked to the visible part of the dialog.
Based on the API of react-date-picker there is no way to change the element to render date-picker box, so one option is to use another date picker.
You can use the material-pickers component:
import DateFnsUtils from "#date-io/date-fns";
import { MuiPickersUtilsProvider } from "#material-ui/pickers";
import { DatePicker } from "#material-ui/pickers";
<Dialog open={true} aria-labelledby="form-dialog-title">
<DialogContent>
<DialogContentText>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used
in laying out print, graphic or web designs. The passage is
attributed to an unknown typesetter in the 15th century
</DialogContentText>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker />
</MuiPickersUtilsProvider>
</DialogContent>
<DialogActions>
<Button>ok</Button>
</DialogActions>
</Dialog>
Check it here: https://codesandbox.io/s/material-datepicker-inside-dialog-i6wts
You can find all the options for the material datepicker in the API docs.
I have fixed the issue. Note this only work for some cases. Because the cut off issue has only happened to the first row in my case. You can fix with first child in CSS
I have applied the position to the calendar only when it at first child
.react-calendar {
position: fixed !important;
top: calc(100% - 479px) !important;
}
if you are having an issue, please Modify your modal first . This only happens using on modal.
I'm just a beginner to CSS so this one came first and it worked for me . Thanks #Dekel
I'm working on a project, but am fairly new to aspects of Angular and I just can't seem to get this positioning figured out. Currently I have an app with a header (toolbar), a sidenav, and a main content area. There is a "toggle" button on the header that uses a service to toggle open and close the sidebar. This is working as expected so far.
However, the issue I am running into pertains to the main content area that is supposed to be to the right of the sidenav. So when the sidenav is open, it stays to the right, and when it is closed, it stays to the right. From what I have seen so far is that I need to be using the <mat-sidenav-content> to keep this content positioning.
Currently in my app.component.html I am using a router outlet so I can display different content in the main content area. Here is what that looks like:
AppComponent
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
App-Sidenav
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
...
</mat-sidenav>
And this is working great with my header
Header
<mat-toolbar class="header">
<a routerLink="/workouts" href="#" class="logo--link">Logo Goes Here</a>
<button (click)="toggleSidenav()">toggle sidenav</button>
</mat-toolbar>
The main content area I am trying to keep always to the right of the sidenav.. Currently I am trying to get the workouts.component to work properly so I can use the method for the other components:
WorkoutsComponent
<mat-sidenav-content>
<h1>Workout list will go here</h1>
</mat-sidenav-content>
How can I get this content to stay over to the right of the sidebar whether it is opened or closed?
I have tried a few methods such as wrapping the elements in the appcomponent with <mat-sidenav>... and <mat-sidenav-content>... but doing so ends up breaking my app altogether.
Here is a stackblitz of my app so far.
There is some routing set up, and I have a couple of components ready to go, but if even one can work I am certain the rest can be implemented without much problem
Thank you, and let me know if I can answer any questions that will help solve this.
I got this fixed. The issue was that I couldn't just wrap my appcomponent in a sidenav, but rather I needed to use all the same properties from the app-sidenav.component. So in the AppComponent, I changed it to the following:
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
<app-sidenav></app-sidenav>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
Then, I moved the sidenav service to be part of the app component as well. By completely removing the <mat-sidenav>... and <mat-sidenav-content>... from the individual components, and instead putting them on the app module with exact specifications as before, this was able to work.
If you don't wrap the app component with the correct properties, Angular will attempt to change your margin properties and it will throw off the layout.
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
I have a component that uses MatExpansionPanel to display a list of products.
I'm using some CSS to hide the overflow of the product's description. Please, see this stackblitz for the current looking.
So I'm trying to extract the panel header into a child component and to apply the exact same CSS to it. However, the CSS doesn't seems to be working. Please, see this stackblitz.
Am I doing something wrong there ? Or is it that this Angular Material component is implemented in a way that it shouldn't be split in different components ?
You can wrap your product-panel-header.component between a div with display:flex like this:
html:
<div class="panel-header">
<mat-panel-title>
{{product.noProduit}}
</mat-panel-title>
<mat-panel-description class="product-name">
{{product.designation}}
</mat-panel-description>
<mat-panel-description>
{{product.quantite}}(+{{product.supplement}})
</mat-panel-description>
</div>
css:
.panel-header {
display: flex;
}
see working stackblitz
I am trying to embed this iTunes button that I am putting on a site, but it seems to automatically alight left. Where and how in this code would I make the button center itself? Please see the example code below. Thanks!
Here's a quick fix if you have access to the css you could easily do this with flex box.
Wrap your anchor tag:
<div class="itunes">
</div>
add this css:
.itunes {
display:flex;
justify-content:center;
}
jsFiddle
Although adding inline-styles is frowned upon..., if your in a pinch this will work as well. Please don't do this unless you must:
<div style="display:flex;justify-content:center;">
</div>
note: flex box works on most browsers.