decreasing the size of the expansional panel in material ui - javascript

I have this requirement where I need to decrease the size of the expansion panel when it is open or say expanded.
I looked into the elements and styles tab but I see that we need to overwrite the styles.
Anyone who has handled this case?
Here is the to the sandbox.
https://codesandbox.io/s/yp9lmvwo1x
I basically want to decrease the size of the blue part in the first accordion.

You can do that by using withStyles HOC provided by material-ui.
const CustomExpansionPanel = withStyles(() => ({
root: {
width: "100%",
},
expanded: {
height: "110px"
}
}))(ExpansionPanel);
However you will also have to tweak the inner ExpansionPanelSummary and ExpansionPanelDetails if you are using them.
Here is a working sample for above : https://codesandbox.io/s/nr65w2qwp4

Related

styling changing on refresh in nextjs

I'm having this weird issue where my styling is not sticking. I have a NavBar set to be 20vh in height. I also have an image set to be 100% in width. However, when I refresh the page, the NavBar height shrinks and the image width increases significantly. I'm not sure what is causing this problem. I have pasted the relevant code below but you can also find the repo for the app at this link (dev branch).
const useStyles = makeStyles((theme) => ({
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
const useStyles = makeStyles((theme) => ({
introImg: {
width: "100%",
height: "auto",
},
}));
const Intro = () => {
const classes = useStyles();
return <img src={marco4sup} className={classes.introImg} />;
};
As you can see, the NavBar is definitely not 20vh and the image is expanding beyond 100% of the page width.
Alert: I will give a pull request on the repo on github so you can implement the code. Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.
How It Works
If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.
If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file, and the other files importing it. So if both Button.js and Modal.js import theme.js, editing theme.js will update both components.
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way.
Arrow functions aren't supported. Name your functional component.
export default function MyPage () {...
Without export defualt function MyPage() {... it won't use fast refresh therefore your code won't work, to implement it into your Code do the following(for code block1):
export default function UseStyles () {
navBar: {
height: "20vh",
width: "100%",
},
}));
const NavBar = () => {
const classes = useStyles();
return <div className={classes.navBar}>NavBar</div>;
};
Sorry if there are any grammatical errors my english isn't great.
And also if you want your navbar to be sticky set the position to sticky like the following:
position: sticky;

react-file-viewer renders any file very small

As much as I have searched about file sizing for react-file-viewer I could not find anything.
I want to use the react-file-viewer to click on a filename hyperlink and open the file (image, document or excel sheeet) in a new page. The rendering works fine, except for the image/document sizing.
I have the following example:
import React from "react";
import FileViewer from "react-file-viewer";
import { Fragment } from "react";
import imGurPic from "./MainBody/imGurPic.ts";
const MainBody = () => {
const file =imGurPic;
const type = "jpeg";
return (
<Fragment>
<FileViewer fileType={type} filePath={file} />
</Fragment>
);
};
export default MainBody;
The imGurPic is an image I picked randomly from imGur because of its large size (3024x4032 pixels) (don't worry it is a cat image... link here... I converted into a base64 string that I use in the filePath prop of the FileViewer component. Ultimately, it will be a base64 string coming from a db as a byte array.
In the following sandbox I managed to create a demo, only to find out that it is WAY too small (72*96px). I do not really understand why it would take so little space. Also, any document or excelsheet I enter, the maximum height is 96px. How can I change it? It seems to inherit from a parent element but the Mainbody takes all the available space between header and footer.
Any help on this will be appreciated.
Here is the sandbox -->sandbox demo
And in case someone cannot open it, here is a screenshot -->
Had to figure this out as well. If you want your image to scale to fit your sizing requirements, just make height=100% in the surrounding div. E.g.
<div style={{ height: '100%' }}>
<ReactFileViewer />
</div>
If you don't want the image scaled at all, then it's a little trickier. I've had to resort to some messy CSS to override the hardwired width and height settings:
.pg-viewer-wrapper {
overflow-y: unset !important;
}
.photo-viewer-container {
width: unset !important;
height: unset !important;
}
.photo-viewer-container > img {
width: unset !important;
height: unset !important;
}
It would be great if this component had features like scaling (e.g. fit, fill, percentage) but I don't think the library is being maintained any more (looking at the old PRs that are still waiting), so would recommend forking and implementing a cleaner solution than what I have done.

Can we modify the div once component renders in react?

I am trying to find a solution to modify the height of the div for react based on how many elements it will consist to grow automatically.
So, to do the same i have chosen jquery
ul.each(function() {
const self = $(this);
const { listCount, ulCount } = getListItemsCount(self);
const ruleHeight = listCount * listDefaultHeight;
const children = $(self).children();
/* Swapping of elements to adjust the heights */
if (children.length - 1 === 2 && ulCount === 1) {
if ($(children[2]).data('count') > $(children[1]).data('count')) {
$($(self).children()[2]).insertBefore($($(self).children()[1]));
//ruleHeight += 25;
}
}
$(self)
.find('div')
.css({ height: `${ruleHeight}px` });
});
The above code is happening inside componentDidMount(). The reason I am doing here, we are not sure how much height we need to increase as the div position is absolute and also depending upon the first level content, we are swapping the divs as well as a high-level overview.
The blue and ping is an absolute div whose height is growing accordingly, if the first level data is less and second level has nested and more list items, the height was not adjusting, so swapping the divs and its working.
The question here is: Is it the right approach to handle this with jquery?
React DOM is not updated now? How to update the react dom as well, if suppose render method is called, will the jquery code is written become obsolete?
Is there a possibility to adjust the height using flex automatically without using jquery for absolute positions or by just css will be awesome fix?
Please guide the best practice to do the same
I would suggest do not use jquery instead , write a function to calculate height of the div in componentDidMount and set the height of the div in render method.
Here is an example
componentWillMount() {
this.setDivHeight();
}
return () {
render(
<div style={{height: this.state.divHeight}}>
</div>
)
}
This just for reference, you have to call a function to set change value of state divHeight to re render the component and the div height will also change on each render. Also would suggest user in JSX to code your components. Tips about JSX

React-Stripe-Elements element not rendering style as expected

I'm trying to setup React-Stripe-Elements and while I was able to get the basic form to render, it does so in a really funky looking way. I even tried to add CSS from a form I found online and it won't render in the CardElement properly. How can I get React-Stripe-Elements to render with the proper UI or UI that even remotely resembles the UI on the docs?
The CardElement is currently rendering like:
And my card element file looks like:
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<label>
Card details
<CardElement style= {{ base: { color: '#fff',
fontWeight: 500,
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '15px',
fontSmoothing: 'antialiased' }}} />
</label>
);
}
};
export default CardSection;
I'm not sure what your definition of "funky" is - it might be better to add a link to a specific element and state what is different than you expect.
If I were to guess, I would say a few things are probably not as you like:
100% width - I think the package assumes you want a 100% width input. For example, I have all my inputs 100% but they are in containers of the smaller width that I want on the screen.
No border - you can add a border if you like. The input is usually more visible when the page has a background color other than white.
Height or padding - this could be a function of not seeing the true borders.
You can check out some more styling options that they use in their demo here: https://github.com/stripe/react-stripe-elements/blob/master/demo/demo/index.js
This answer might also be helpful https://stackoverflow.com/a/43986418/5049215

CKEDITOR 4: remain editor height when toggling toolbar

I use the classic version of ckeditor 4. The system I'm working with is a self-written CMS. That means I've got multiple cases where I need the ckeditor. Some of them are having the resizing-option/plugin enabled. In addition, most of them have an enabled toolbar.
When I resize the editor, the height of it changes (of course :D). In this case, it is intentional by the user. But when I toggle the toolbar, the height changes a lot, which is not intentional or wanted by the user.
Is there a possibility to let the editor remain its resized height when expanding or collapsing the toolbar? In the end, the editor in total should remain at the same height, no matter if the toolbar is expanded or collapsed.
Hope I described my problem comprehensibly :)
Collapsed: 280px
Expanded: 329px
Both states should have 280px
Store the height just before collapsing or expanding the toolbar and reapply it afterwards. For a CKEditor instance called editor1:
let ckHeight;
CKEDITOR.instances.editor1.on('beforeCommandExec', function(evt) {
if (evt.data.name == 'toolbarCollapse') {
ckHeight = evt.editor.container.$.offsetHeight;
}
});
CKEDITOR.instances.editor1.on('afterCommandExec', function(evt) {
if (evt.data.name == 'toolbarCollapse') {
evt.editor.resize(evt.editor.container.$.offsetWidth, ckHeight);
}
});

Categories