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;
}
Related
I've integrated TinyMCE with React.js.
But there is a feature I need which seems TinyMCE doesn't support it natively so I wanna know how can I add it.
you see the two blocks that are surrounded by the red box (see the image below) have maxWidth and width which I set it manually via DevTools
max-width: 800px;
width: 100%;
margin: 0px auto;
I wanna know how can I set the above css for the current selected block using TinyMCE API.
so the user can resize the max-width for the current selected block by clicking a button in the toolbar (which will call the TinyMCE API to resize its max-width)
Have CKEditor 5 working in ReactJS. However, need the ability to make the entire editor resizable so content can be expanded for larger screen sizes. I have made attempts with CSS resize without success.
For example:
.ck-editor__editable {
min-height: 20vw;
height: 100%;
resize: both;
overflow: scroll;
}
Also, I have tried adding resize and overflow on the parent DIV to the editor.
Is CSS the best approach here?
If anyone has done this successfully advice is appreciated.
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%;
I have read Antd's layout design documents and the docs on Grid and Layout. What I don't understand is how to accomplish the following design in Antd:
I'd like my app to have a single centered column.
On a wide screen (landscape clients), the center column should be fairly narrow. In terms of grid, maybe 8 units.
On a narrow screen (portrait clients), the center column should use a relatively large
width. In terms of grid up to 24 units in case of very narrow/small screen sizes.
Basically this sounds like I'm looking for the good old container with a max width. I could obviously come up with some custom CSS to style a custom <div>, but this makes me wonder:
Am I missing something, or is there really no way to achieve that with Antd's layout system natively?
If so, am I doing something wrong in terms of modern UI design philosophy?
We have done this. Not exactly via Ant Design, but used a lot of Ant Design inside this.
I am not sure what other solutions are, but this is how we did it. The container you talked about was the parent container of our website, with everything else rendered inside this.
We created a routing inside the main container (as bottom tabs, so was convenient for us) and set its max-width to 420px. Since everything was contained in the bottom tabs, our app was centered when on landscape clients, and looked to fill the width on portrait mode.
Code for clarity. (its a react app)
App Container CSS:
.App {
text-align: center;
height: 100vh !important;
}
Parent Container CSS:
.parentcontainer {
height: calc(100vh - 50px);
max-width: '100%';
display: inline-block;
width: 100vw;
}
Tab CSS:
position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',
This worked for us, and the behavior is what you desire.
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