Change height of wysiwyg

Arkadiusz Idzikowski staff commented 5 years ago

Did you add this rule to your global styles in styles.scss file?

tommykjensen commented 5 years ago

I added it on the styles for the component where I use the editor not in the global styles. I will try global styles to see if that works. But overriding style on component level should work shouldn't it?

tommykjensen commented 5 years ago

It works in global style file. Fortunately I only need one intanse of the editor in this project so that is fine but it really should be possible to change the height on individual level if there are multiple editors in same project. Maybe add an @input to control this?

Arkadiusz Idzikowski staff commented 5 years ago

We will consider adding an input for that, but in this case we will probably need to overwrite the styles in the style parameter and if we do that it will be impossible to customize height with css class.

You can always add custom class to the mdb-wysiwyg component: <mdb-wysiwyg class="custom-class"> and modify the css rule accordingly to create scope for the styles: .custom-class .mdb-wysiwyg-textarea { ... }

tommykjensen commented 5 years ago

Evene when I add class on the directive or if I add a styles="" it has no effekt on the height of the editor. The only thing that worked so far was in global styles.

Arkadiusz Idzikowski staff commented 5 years ago

We still recommend to use global styles, I just mentioned that you can create scope for your styles if you need to create multiple editors with different appearance.

tommykjensen commented 5 years ago

I am no expert in css so I guess I do not understand fully what you are saying as I did add the class statement on the wysiwyg directive and added the new class in the component specific scss file.

In component.html file on the wysiwyg directive: [options]="options" class="height"

In component.scss file:.height { height: 800px !important;}

and this did not have any effect.

Arkadiusz Idzikowski staff commented 5 years ago

You still want to target .mdb-wysiwyg-textarea styles. Lets say you have two mdb-wysiwyg editors in the same project and you want them to have different heights.

You can add custom classes to the mdb-wysiwyg elements like this:

<mdb-wysiwyg class="first-custom-class"></mdb-wysiwyg>and<mdb-wysiwyg class="second-custom-class"></mdb-wysiwyg>

Then you can overwrite the height like this (in your global styles):

.first-custom-class .mdb-wysiwyg-textarea { //height styles }

and accordingly for the second one:

.second-custom-class .mdb-wysiwyg-textarea { //height styles }

As I mentioned before, we will consider adding an input for that to make the customization easier. But currently you can still scope your styles and customize only specific components in your application.

tommykjensen commented 5 years ago

Thank you for the explanation and consideration to add input. You can consider this topic for answered now :-)