I don't think that's the normal behavior or React Slick, but when initialize my page (via address bar), the carousel looks like that :
As you can see, there's a brown bar at right side of the screen.
But when I resize my browser window, it displays well.
Is there any way to prevent that when rendering the component?
I figured out what caused this behavior on my component, I was defining the height of the slide this way :
const heightCarousel = '80vh'
<Slider {...settings}>
<div style={{height:heightCarousel, background:'#F4CC67', padding:'15px 0', textAlign:'center'}}><h3>1</h3></div>
<div style={{height:heightCarousel, background:'#AA8326', padding:'15px 0', textAlign:'center'}}><h3>2</h3></div>
</Slider>
Instead of below, which lets React-slick defining the width automatically of each slide :
<Slider {...settings}>
<div style={{background:'#F4CC67', textAlign:'center'}}><div><h2>TEST</h2></div></div>
<div style={{background:'#AA8326', textAlign:'center'}}><h3>2</h3></div>
</Slider>
Note that you cannot define height inside a slide or you will get the same issue, but you still can play with padding to style your content inside.
Related
i am using primeng v11.x and using p-tree to display hierarchy values. As the list is quite big, i want to fix a height. i am using following but the scroll bar not appearing in the p-tree.
<div class="tree-component">
<div>
<p-tree
#tree
[value]="nodes"
selectionMode="checkbox"
[propagateSelectionUp]="true"
[propagateSelectionDown]="true"
(onNodeUnselect)="onNodeUnselect()"
(onNodeSelect)="onNodeSelect()"
disabled="disabled || readonly"
scrollHeight="200px"
[virtualScroll]="true"
></p-tree>
</div>
</div>
I'm trying to get the chart to extend to the bottom only. I tried using a column flex box with height="100vh". However, it's overflowing the screen.
<Flex direction="column" height="100vh">
<Flex flex="1" direction="row">
<div>123456789010 </div>
<Box flex="1">
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<ThreeDataPoint />
</Box>
</Flex>
</Flex>
I notice that it'll work if I don't have any text above the chart. However, when I put anything above, it will cause it to overflow. It seems to be because the flexbox doesn't notice there's anything above, and is sizing the chart as if there's nothing there.
What could be occurring?
CODESANDBOX HERE
Try configuring the props of your react-financial-charts components.
The auto-sizing behavior of your react-financial-charts package seems to be causing this issue.
When inspecting the page in the browser, you’ll notice that your .react-financial-charts element has a hardcoded height equal to the height of the browser viewport. I had a look at this component with React Developer Tools in Chrome, and it seems to contain an AutoSizer component that may be causing this issue.
You export your BasicLineSeries component this way:
export default withSize({ style: { minHeight: 0 } })(
withDeviceRatio()(BasicLineSeries)
);
So my guess would be that withSize creates AutoSizer, which by default will resize the component to the size of the browser viewport.
The solution would then be to check the documentation for this package and figure out which props you need to use to tell it not to resize automatically.
One solution is to simply add overflow="hidden" prop to your Flex component like this : <Flex direction="column" height="100vh" overflow="hidden">
I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels, I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.
I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.
I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.
Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.
I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.
If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.
Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
classes={{
flexContainerVertical: classes.flexContainerVertical // pass the class flexContainerVertical
}}
>
Then on your makeStyles:
const useStyles = makeStyles((theme) => ({
...
flexContainerVertical: {
display: "flex",
alignItems: "center",
}
}));
And Tab images will appear on center of the Tab.
Here your codesandbox modified.
looking for a way to be able to make a mat-dialog both draggable and resizeable. So far I have the draggable part done already using cdkDrag (DragDropModule). I have tried using resize: booth; in css but it seems as it isn't working well with combined with draggable functionality. I.e. if i remove the cdk the resizable works and vice versa.
See code here: https://stackblitz.com/edit/angular-vp8xt7
In your StackBlitz, a resize handle appears bottom right of the dialog, hence you're almost there. The problem is that mouse events are consumed by the dragging functionality and not handed over to the resizing functionality.
Adding a cdkDragHandle to the h1 element solves your problem.
<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
Shee how it workes on your forked StackBlitz.
For resizeable mat dialog component:
use css for panel class like this..
.custom-mat-dialog-panel .mat-dialog-container {
resize: both;
}
ts file:
openDialog() {
this.dialog.open(HelloComponent,{height:'100px',width:'100px', panelClass: 'custom-mat-dialog-panel'});
}
For draggable mat dialog component:
<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
Draggable Title
</div>
I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.
But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.
Here is my CodeSandBox.
Many thanks
Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further
Please take a look at this, I want to put each button in new line in this case :
Small screen test
They seem to line up - what is the problem?