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.
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)
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.
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'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800