I replaced a tinymce 3 with tinymce 4. Tinymce 4 takes all the width available :
tinyMCE.init({ mode: 'textareas',
theme: 'modern',
width:"808",
height : "480"
});
It ignores the width settings. I use it on a rails admin plugin where i cannot change the surrounding HTML. WHat has change in tinymce 4 that can explain this behavior?
i found that : http://fiddle.tinymce.com/jvdaab/1 i cannot reduce width, if someone can it would be great.
You have to remove the quotes :
width: 300,
height : 480
like this : http://fiddle.tinymce.com/Nzdaab
Wrong :
width: "100",
height : "480"
As "Sébastien Gicquel" said, it must be a Number as mentioned in TinyMCE 4 docs.
For anyone struggling with the percentage width, I'm not sure if there is an official way to fix this, but you can fix it by adding this CSS:
.mce-tinymce.mce-container.mce-panel {
width: 100%;
}
Related
Objective:
To create two divs, side-by-side on a page. Together they should cover 100% of the page. using latest versions of react + MUI.
div on the left should have a fixed width (say 200px).
div on the right should cover the rest of the page.
In CSS, one could use calc(100% - 200px) to dynamically compute the width of div on the right.
Issue Faced:
I couldn't use that in MUI. I tried inline styling ( style={{width='calc(100%-200)'}}), which compiles but doesn't work. I also tried makeStyles(), but with no avail.
I deeply appreciate the community's help in this matter.
For anyone curious about how to write this using makeStyles():
const useStyles = makeStyles({
width: 'calc(100% - 200px)'
});
Or if the pixel amount is dynamically generated in the javascript layer:
const elWidth = getMyElementWidth(); // returns '200'
const useStyles = makeStyles({
width: `calc(100% - ${elWidth}px)`
});
The main issue, as dlewiski's answer points out, is the need to include spaces around the operator and to include the px unit.
I've often made the "forgetting to include spaces around the operator inside calc()" mistake.
I just want to point out that the key issues I see is no spaces between the '-' and no 'px' after 200.
So you have style={{width='calc(100%-200)'}}
Should be style={{width='calc(100% - 200px)'}}
I realize this is already shown in the original answer but I thought some more clarification on the specifics of the issue would help.
If your code doesn't work anymore in MUI v5, check if you're using theme.spacing() because there is a breaking change in the newer version. From the migration guide:
theme.spacing now returns single values with px units by default.
Correct code in:
V5
width: `calc(100vw - ${theme.spacing(3)})`
V4
width: `calc(100vw - ${theme.spacing(3)}px)`
Live Demo
since style is an object you can't use =.
the right way to do it:
style={{width: 'calc(100% - 200px)'}}
if not applied, try
style={{width: 'calc(100% - 200px) !important'}}
I am using angular-material 8, I need to reduce the default width (180px) of the .mat-form-field-infix, but am unable to change that css?
This is the by default-size of the .mat-form-field-infix:default-size field
I need like this filed exact with the text.I need exact like this
stackblitz example reference link, i need to reduce the size of the select field width.
How can I do that changes, can anyone help me?
in style.css add
.mat-form-field-infix {
width: 100px !important;
}
stacblitz demo
Why do you need to specifically set .mat-form-field-infix width when you can more easily control width on mat-form-field?:
mat-form-field {
width: 100px;
}
This seems to be some css issue and some guru would know how to fix right away.
I am using https://github.com/kekeh/mydatepicker which works as i require except i need to make some layout changes to the input box.
i am able to see desired changes if i do that in the chrome browser via developer tools but not able to get them working by applying the css.
so if you take a look at the screenshot:
https://www.dropbox.com/s/2dhri8ylss3pfgd/Screenshot%202017-09-30%2018.27.41.png?dl=0
i need to set the height to 25px rather 34px.
try to override class like .selectiongroup etc. doesnt help
you should use the height attribute to override input height.
private myOptions: IMyDpOptions = {
firstDayOfWeek: 'su',
editableDateField: false,
openSelectorOnInputClick: true,
height: '25px'
};
<my-date-picker [options]="myOptions" [(ngModel)]="XYZ" (dateChanged)="XYZ($event)"></my-date-picker>
Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)
I have a Bootstrap wysihtml5 on an input form.
I haven't been able to make the input width = 800px
The pics show the browser. If I uncheck the width: 201px; then I get what I want.
If I change the source code that is setting the 201px, then other forms get messed up.
I tried adding this:
.wysihtml5-sandbox {
width: 800px;
}
That may be caused by the order in which styles are loaded. If I'm not mistaken, the latest style read is displayed. You can override it with using !important :
width: 800px!important;