I have been trying to change the width and height of my Codemirror editor using CSS but it does not seem to have any effect.
.CodeMirror {
width: 500px;
height: 1000px;
}
Instead of resizing accordingly it remains at a height of 300px and full width.
Nevertheless I am still able to set width and height via code: editor.setSize(500, 1000);
What am I doing wrong?
Have you tried.
.CodeMirror {
max-width: 500px;
max-height: 1000px;
width: 100%;
height: 100%;
}
Try using percentages.
Also CodeMirror docs specifically say you should use width: auto and height: auto to auto scale. just fyi.
Make sure to import your own CSS file after the default stylesheets of Codemirror. Otherwise the defaults do not get overridden properly. Simply import your stylesheet last.
Related
I've build an ad with an click tag. Everything works fine - the images are scaling proportionally but is there a way for the container not to fill 100% of width/height and still be scaling?
Preview:
https://craftads.de/hosting/stack_test5/
Wetransfer Code:
https://wetransfer.com/downloads/5b7b21ccd2a0f535cfcb22146ae5e41b20210823135155/edf6cd
I would like that only the visible part to be clickable.
Visual representation:
This is what I would like to achieve
Thanks for the help!
After a lot of trial and error I think I've found a solution:
html, body {
width: 100%;
height: 100vh;
margin: 0px;
max-width: 50vh;
min-width: 500px;
min-height: 1000px;}
Does that make any sense haha?
For some reason, I can't seem to get the mat drawer to occupy the remaining available height on the screen. I've tried:
.drawer-container {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
But I still get an overflow for some reason even though there's only one element on screen as indicated by the scroll bar:
And when I remove the CSS rules, I end up with this:
Basically about 10% of the screen height only. I've considered using a fixed height, but I'm guessing it would look cut off if viewed on a larger or smaller monitor. I'd appreciate any help as I'm really not familiar with the full properties of angular material and how to properly manipulate them. Thanks in advance.
in case any dropped by this and had a similar problem.
i fixed this long ago by applying
.drawer-container {
position: absolute;
top:0;
width: 100%;
bottom: 0;
}
just make sure the parent has a position: relative
Percentage based width/height is not yet supported by mat-sidenav i suppose.
try height: 100vh; instead.
that should work, but will add a scrollbar if there is any toolbar in your page.
UPDATE:
HTML:
<mat-drawer-container class="parent" autosize>
<mat-drawer mode="side">
Your sidenav content
</mat-drawer>
<div class="content">
Your main content.
</div>
</mat-drawer-container>
CSS:
.parent {
width: 100%;
height: 100vh; // calc(100vh - 64px) can be used if there is navbar at the top
}
.content {
height: 100%;
}
I'm using this library to make QR codes.
I'm trying to give the qrcode a width of 100%. I've tried using style="width: 100% !important;" like I would on images, but it doesn't worked.
(codepen Reference Here)
Any ideas?
Hi refer add css for image:
#qrcode img{
width: 100%;
}
On your codepen it work with width 100% on the image
img {width: 100%; height: auto;}
I have a div element that is say 500px that contains an image file that is say 490px. Every time I set the image from display:none to display:inline, the div resizes. How do I prevent this?
I'm using d3 to append the element. Could have anything to do with it?
Edit: This worked:
#your_div {
width: 500px;
min-width: 500px;
}
But my image only resizes from the bottom now.
Have you tried setting min-width: 500px on the div?
#your_div {
width: 500px;
min-width: 500px;
}
Or width: 500px if you don't want it to expand too
I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.
You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.
I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.