How do I make a CodeMirror editor and its gutter 100% of the height of its parent?
For example, on jsfiddle, the editors have a 100% height gray gutter.
I've gone through the CSS trying to make everything 100% height, but no effect.
A CSS rule like .CodeMirror { height: 100%; } should work. Note that when the parent element changes size after the editor has been initialized, you are responsible for calling .refresh() on your CodeMirror instance to make sure it correctly draws itself.
When showing CodeMirror write:
CodeMirror.setSize("100%", "100%");
Related
Background:
- I have a custom SharePoint masterpage with custom CSS.
- I also placed a custom div into the masterpage.html
Problem:
When I use the color picker to change some font color and select "more colors…", the modal dialogue box that comes up is too small and has scroll bars.
I would like for it to auto adjust.
How do I fix this?
I tried using F12 to figure out what CSS element may be affecting it, but I am unable to figure it out.
Note: I tried removing the custom div but the problem persists.
If I get two more reputation points I can upload a picture so you can visually see what I am talking about. A picture is worth a thousand words:/
Or you can go here to see the pic.
UPDATE:
I was able to figure it out:
I update the following custom css with 300px !Important:
#contentBox
{
margin-right:20px;
margin-left:20px;
min-width:300px !Important;
}
And I added the below custom css:
.more-colors-picker
{
margin: 0px;
}
For a complete history and explanation with pictures go here
I need a CodeMirror editor which starts with a certain width and then grows automatically to the right to match the maximum line length. I.e. roughly what CodeMirror does when height is set to auto, but with width.
Here's a self-contained example. The editor grows automatically along the y-axis fine, but not along the x-axis. By tweaking the CSS, I can either have a fixed width editor with a scrollbar, or one which fills the entire width of the browser, but not one which grows as you type. I assume overflow-x is relevant, but I don't understand how it interacts with other CSS size properties set on parent elements. I also tried setting that property on CodeMirror-scroll, but it didn't help.
I believe this can be done using CSS properties alone. In fact I have this behaviour in my application already, but growing to the left, rather than the right, but I don't understand why it happens, or how to reproduce it in a small example.
This question is essentially the same, but for the vertical scrollbar.
Simply add float:left to the CodeMirror div.
<div id="here" style="float:left"></div>
This is not something CodeMirror supports. You may be able to get something working by setting .CodeMirror's width to (-webkit-)fit-content, but there will likely be corner cases where this breaks the scrollbars or cursor placement.
I have a html panel and i want to add the html panel to browser screen hence i used rootPanel.get().add(htmlPanel);. But their is a extra space between the starting of the screen and the first widget in html panel (As in image). I tried with setting rootPanel.get().setheight("100%") and rootPanel.get().setsize("100%","100%") but it doesn't seem to work please help i want to remove the extra space and so that the widget starts from beginning.
This padding is added by GWT Bootstrap for its NavBar widget. See the note in the javadoc:
NOTE: We assume that most people will use the ResponsiveNavbar, so, we automatically add a padding-top: 50px in body.If you don't want this, you have to put a padding-top: 0px; manually in your document body tag.
See also https://github.com/gwtbootstrap/gwt-bootstrap/issues/120
I have a requirement to always show the menu icon in a a GridPanel's column header. See attached image. I've tracked down the css class and see the <td /> tag is assigned the x-grid3-hd-btn on hover. The x-grid3-hd-btn class uses a background image, grid3-hd-btn.gif to display the drop-down arrow I want, but I'm not css savvy enough to figure out how to always show it.
There doesn't seem to be a hook in the GridPanel class api's to always display this, wish there was. Also, note that I only want the arrow icon to show, I don't want the column header to change color, etc.
Does anyone have any guidance on this?
Thanks!
John
Add this to your stylesheet, this overwrites default extjs theme styles
/**
* EXTJS Grid-3 Always visible header buttons
*/
.x-grid3-hd-btn {
display: block !important;
height: 22px !important;
}
.x-grid3-hd {
cursor: pointer;
}
have you tried replacing the css class background image in your ext-all.css file?
original:
.x-grid3-header{
background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow.gif);
}
replace to :
.x-grid3-header{
background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow-over.gif);
}
tell me if that did it...
i was wondering on how to position a decorator panel that wraps around a table. i made a flextable and used the function 'setStyleName' that links to another css file. in the css file, i used absolute positioning with .position as the selector
.position
{
position:absolute;
right:0px;
}
however, every time i used the command position:absolute, the flextable will move but the decorator panel (the blue line) doesn't. it just becomes a blue dot. its probably wrapping around something that is 1px by 1px or something. help would be greatly appreciated as ive been super stuck. thanks!
Set position:absolute for the decorator panel instead of the table.
I don't know what are you to achieve, but maybe you should use "float: right" instead (if you want the panel to stick to the right side of the parent element)