I have a component that renders Tabs component from Material UI 5.0.0-beta.5
There is a case when I set this components display to none.
But, then I get this error -
Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.
I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).
Is there a way to fix this error or maybe a better way to do what I am trying to do?
You could try to use visibility: hidden instead
And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.
visibility: hidden;
width: 0;
height: 0;
And when you want to show it back:
visibility: visible;
width: 100%;
height: 100%;
Related
I'm fairly new to ReactJS and am using styled components to display an image. The code I have in my App.js is <StyledImage src={mainimg} alt="hi"></StyledImage> which displays an image on the left side of the screen. My styling is
export const StyledImage = styled.img`
width: 80%;
`;
I've tried justify-content, alignitems... I'm not sure what exactly to type to get it aligned on the right side of its container. Any advice?
Use float: "right" as a style.
Ok so, you need to set the justify-content and align-item properties to the parent node of your image to move the child inside your parent. If you don't want to set any properties to the parent then use the position: absolute or position: fixed to your image.
Is it possible to configure Froala editor so that it always matches the size of the parent component in height and width?
Currently it goes beyond the boundaries of the parent component as the amount of text increases, not matter what layout I am using.
I have checked the list of available options and examples, but did not find an appropriate settings. The only option I can use now is explicitly set height and width for a Ext.froala.Mixin.editor config.
I am using ExtJS 7.2, modern toolkit.
Fiddle
I expect a scroll inside a Froala editor component, but instead a Froala editor component exceed height of the parent component.
Set overflow: auto; for flora wrapper:
.fr-box.fr-basic.fr-top .fr-wrapper {
overflow: auto;
}
Fiddle
UPDATE for extjs v7.5.0, froala v4.0.8:
.x-froala .fr-wrapper {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
I have a bunch of react-select components on the screen. They are all inside a div with a class called bookData. The css for bookData is:
.bookData{
font-size:13px;
column-count: 2;
column-gap: 20px;
padding: 10px;
}
If I select something with react-select, the selection does not show up. If I remove column-count, my code for react-select works find, it will select items and display. Is there css, I can add that will allow react-select to work with column-count?
This CodeSandbox could help you: https://codesandbox.io/s/4jr596lr09
All you need to do is to wrap the two column content in a div displayed by flex.
Wrap the two elements in a div and set the flex value to 1 (Ref: What does flex: 1 mean?)
I've seen a lot of post talking about display vs visibility vs opacity but in my case I need something more along the lines of display none but I don't want the cost associated with having the browser completely rerender what in this case is a footer React component. Thus I wanted to know if there is a performance benefit of setting the height to 0px instead of setting the display to none. The component will always be rendered on the page as well.