I understand that it's composed of three bars, as this question suggests. My point is to make this line...
...a couple of pixels bigger, for better readability. Is there an option to do this?
As per that question, enabling glyphMargin would give you a little bit of padding.
Otherwise, you could use a bit of custom CSS (see Help - Developer tools, and plugins to automate inclusion on startup)
.monaco-editor .margin { padding-left: 20px }
.monaco-editor .margin + .editor-scrollable { margin-left: 20px }
Chances are that you might be able to find plugins specifically for this purpose (monaco term: margin, general term: gutter), or just to add another column on the area that would pad it out further.
Related
I need to swap panels in a list. I've tried to reorder rows in a grid but I need to put a little more informations in the item so a panel will be nicely to show.
Must be the classic drag icon (four arrows) like here http://examples1.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/
This example is very close that I want. I need only vertical swap like this one http://tof2k.com/ext/sortable/ ( this could be just what I need but seems it don't use ExtJS themes and I don't know if I can put more information inside the items - and it is a little ugly too).
Some ideas?
Perhaps using a grid with a templatecolumn and drag and drop resolve your issue.
FIDDLE: https://fiddle.sencha.com/#fiddle/1i7l
Also, you can use CSS to change row.
.customRow .x-grid-cell-inner {
margin: 5px 5px 5px 5px;
background-color: yellow;
}
Remove de comment
//cls: 'customRow'
on fiddle (line 58).
I prepare a ioslides presentation in RMarkdown via RStudio. As the presentation contains a lot of references they are truncated:
With {.allowframebraks}there seems to be a quick solution for beamer presentations as this answer shows.
Is there one for ioslides, too?
This isn't exactly what you're asking for, but it might be the best you can do. Insert the following inline CSS at the end of your document (i.e. just before where the references will be inserted), and instead of truncating them, it will add a scroll bar (the first part) and suppress the page number (the second part).
<style>
slides > slide { overflow: scroll; }
slides > slide:not(.nobackground):after {
content: '';
}
</style>
You won't be able to see all references at once, but at least you can scroll through them. (You can add this after the header on any long slide for the same effect.)
Edited to add:
To suppress the logo, this should work:
<style>
slides > slide:not(.nobackground):before {
background: none;
}
</style>
Generally to figure things like this out, use Firefox (or another browser?), point at the thing of interest, right click and choose Inspect Element. That will tell you where it came from, and you might be able to guess how to suppress it.
I have a dijit/form/Select component which I make declaratively. I want to add text-overflow:ellipsis style for each option. I've tried giving id to the component and then I've set:
#myselectorid_dropdown td,
#myselectorid span{
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
max-width:50em;
}
Firstly, this solution doesn't fully work, because at first dropdown open, the ellipsis style is not applied (at next opens it is). Secondly, I consider it a "dirty" solution (there should be a cleaner way to do it, right?).
So the question is: how to add text-overflow:ellipsis to each select's options?
EDIT: I gave autoWidth:false attribute to the Select component, so it fixed the first issue (improper width at first open). I'm still looking for cleaner solution than td/span styling though.
Try using .dijitSelectLabel instead of span
#myselectorid .dijitSelectLabel {
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
max-width:50em
}
I'm using a layout panel with some layers. One of the layers is quite simple but I want it to have a float: right on the element. But this is actually not working because subwidgets are styled with style="postition: absolute; left: 0px; ..." which overrides the styling and so the subpanels/widgets will always be placed on the left. Any workaround for this?
After adding your element to your layout container, did you try setWidgetHorizontalPosition ?
If above method does not work and you want to use float right, maybe you can use a non-layout system with FlowPanel maybe. Otherwise you will have to fix the position and width/height of your components but you may loose responsive design.
Last trick : If you really need to change the absolute style. In your component do something like this (do this after your component has been added to the dom)
this.getElement().getParent().getStyle().set.....
You can reset whatever property you want but this might break your layout
After a good deal of searching I can't seem to find answer that suits my needs. While working on a satirical blog project (located here) I was able to get a sticky sidebar to work on the right sidebar, stopping nicely at the top as planned. Formerly the left sidebar was modelled to do the same, which it did. What I'm after is using a similar setup to have a second element, further down the page in the left sidebar, or the right, follow the first as it scrolls out view, and stop at the top similarly, some parameter which allows flexibility in having content further down stop at the top. Either this isn't possible, or my skill-set isn't such that I just don't know what I'm doing (very likely the later) and I would be eternally indebted for guidance. Below you will find the existing coding used (left as is to demonstrate the issue as is on the linked page but obviously incorrect in context). I can't imagine I'm the only one who's after this variation, and if a solution is provided, it will be gratefully and duly notated in the script accordingly. My CSS knowledge is slightly better than rudimentary, but specifics would greatly appreciated. I imagine some further positioning is needed. Happy to provide additional insight to the generous soul who responds if needed. Currently the elements to which this applied are accurate (i.e. ".sidebar-right-1" and "HTML7" respectively)…
#sidebar-right-1.sticky {
position: fixed;
width: 310px;
top: 5px
}
#HTML7.sticky {
position: fixed;
width: 310px;
left: 50%;
margin-left: -690px;
top:5px
And the corresponding script below
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){
var offset = 0;
var sticky = false;
var top = $(window).scrollTop();
if ($("aside").offset().top < top) {
$("#sidebar-right-1, #HTML7").addClass("sticky");
sticky = true;
} else {
$("#sidebar-right-1, #HTML7").removeClass("sticky");
}
});
//]]>
</script>
Cheers, and kindly forgive any etiquette oversights herein.