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.
Related
In tinyMCE v.5 when changing table column width, as a functionality of table plugin, I have cursor: default, but on their website on example https://www.tiny.cloud/docs/demo/basic-example/# cursor is: col-resize. How can I change it to be col-resize also? :)
Could'n find on their website that that this is some customization option, it looks like default look, but in my project is showing different than on their example.
Here is the Screenshot https://prnt.sc/nlfza0
You seem to have some custom CSS in that screenshot - the toolbar should wrap, not scroll.
The cursor is set via a content stylesheet, which uses cursor: row-resize (or cursor: col-resize) when the cursor is over invisible div elements that line up with the table borders.
You can use a DOM inspector to find the elements (they're siblings of the body tag) and the element style information should tell you where the cursor is being overridden.
If that doesn't help, please create a replication example on our http://fiddle.tinymce.com website (or other fiddle/codepen type website) and we'll see if we can track it down.
Thank you #Spyder :)
I found them, you're right they are sibilings of body :)
They have classes:
"ephox-snooker-resizer-rows ephox-snooker-resizer-bar" - resize row
"ephox-snooker-resizer-cols ephox-snooker-resizer-bar" - resize column
and get additional class "ephox-snooker-resizer-bar-dragging" while in dragging mode.
I just added this properties in a "tinymce/css/mycontent.css" file:
/* TABLE RESIZE COLUMN - CURSOR TYPE */
.ephox-snooker-resizer-cols {
cursor: col-resize;
}
.ephox-snooker-resizer-rows {
cursor: ns-resize;
}
I Would like to move the sorting arrow from left to right side in the cell table header which is shown in below image
Any Suggestion?
It took me a while to find, but the solution is very easy. Cell table uses default header builder which has an option to render sort icon on left or right side.
DefaultHeaderOrFooterBuilder<Contact> headerBuilder = new DefaultHeaderOrFooterBuilder<>(table, false);
headerBuilder.setSortIconStartOfLine(false);
table.setHeaderBuilder(headerBuilder);
Cheers!
I think I have some raw ideas you could play with and see if they help:
Get a handle on the div containing the arrow img, to add a style classname that will be used in a CSS selector [2. below] that styles the right-alignment you want... Maybe something like this would work:
CellTable.getTableHeadElement().addClassName( "myTableHeadersClassname" );
If 1. succeeded in getting "myTableHeadersClassname" classname on the CellTable's thead element, then I think we are in good shape. I think this CSS selector will then work:
.myTableHeadersClassName div div:nth-child(1){
left: auto;
right: 0 px;
}
I'm not sure if 1. will work, so that might be the hard part. But the idea is to add a classname somewhere in the CellTable DOM hierarchy to then create the CSS selector out of. As long as you can apply that classname and make the selector, you should be just faced with fiddling with that selector's style (although I think the style inside the selector in 2. should work at that point). If 1. doesn't work, I think you could always just put a classname on the top-level CellTable itself, and then have this slightly more complex selector:
.myCellTableClassname thead div div:nth-child(1)
Whichever selector route you go, the left style should be overriding CellTable's inlined style; if what I wrote does not do that, then just add more specificity to the selector until it does.
Hope some of this helps...
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.
In menubar, normally submenu gets displayed on the right hand side. I want to change to Left hand side. Can anyone please let me know, how can I do it ?
Popup location of Sub menu is defined by CSS elements at rendering based on position of menu items.
Looking Via Firebug On Main Menu It produced:
element.style {
clip: rect(auto, auto, auto, auto);
left: 337px; // Change this to left:35px;
overflow: visible;
position: absolute;
top: 319px;
visibility: visible;
}
// This is main CSS for popup
.gwt-MenuBarPopup{
}
So, Give it a try by using setStyleName("css goes here") from code
I again advise you to override the default styles GWT:) I used this method on my project when I had to change some standard view of GWT-elements.
I was able to implement a solution by changing the css as well. Perhaps this isn't the most elegant way, but it works. Using a little help from GwtQuery's closest() method, here is a short example.
menuBar.addAttachHandler(new AttachEvent.Handler() {
#Override
public void onAttachOrDetach(AttachEvent event) {
if(event.isAttached()){
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
Element e = $(menuBar).closest(".gwt-MenuBarPopup").get(0);
e.getStyle().setLeft(parentMenuBar.getAbsoluteLeft()-menuBar.getOffsetWidth() , Unit.PX);
}
});
}
}
});
So the idea being when the child sub menu is attached, you want to change the css. I use a deferred command so that it will change the css after GWT's default MenuBar implementation sets it.
This line, "$(menuBar).closest(".gwt-MenuBarPopup").get(0);" will search up the DOM tree until it finds the element with the class .gwt-MenuBarPopup, which is the one you want to change.
My solution is somewhat of a hybrid of those posted so far here, but I think it is cleaner/simpler than any of them.
Each vertical subMenu is itself a MenuBar, added as an item to the top-level
MenuBar. For whichever subMenu you want to drop to the left instead of the right, add a style class name to it using .addStyleName("myLeftDropDownStyleName") on that MenuBar Widget.
Define the selector rule for that style like this (these are the minimum attributes that were necessary for me to get the left dropping):
.myLeftDropDownStyleName{
position: absolute;
right: 0px;
}
Absolute positions relative to the first parent element with a position other than static; for my case at least, that parent position seemed to be horizontal place where the dropdown otherwise has its left edge without this solution. I wouldn't be suprised if Relative position might work better in some other people's cases.
The Right offset of 0px tells the absolute position's right to be at that horizontal place I mentioned above. And of course the pixel size can be > 0 to push further to the left by that much, or even < 0 to pull it back to the right by that much.
This works perfectly for me, is simple & clean, and does not force all of your MenuBars to have this style (as I think would be the case if you overrode one of the GWT MenuBar styles themself).
I have a site that uses a accordion script, and I want to place a scrollbox inside one of the accordion tabs. However, the scrollbox works just fine, but breaks the accordion script. Is there a way around this conflict?
This is the site with just the accordion script:
http://www.namibiaonline.net/sandbox/NBAA/index9.html
And this is the broken one with jscrollpane and the accordion script:
(for some reason I'm only allowed to paste one hyperlink, so to get to the broken one, just replace /index9.html with /scroll_test.html)
Any help would be much appreciated :)
Ash
This should fix your problem. Try the beta:
http://groups.google.com/group/jscrollpane/browse_thread/thread/c1bc1bf63e3f80d8
and I believe this is where your issue lied:
http://jscrollpane.kelvinluck.com/auto_reinitialise.html
I had the same problem and this is how I almost solved it:
jQuery(document).ready(function() {
scrollPane = jQuery(".scroll-pane").jScrollPane({
showArrows: true
});
var api = scrollPane.data('jsp');
jQuery("#accordion").accordion({
changestart: function(event, ui) {
api.reinitialise()
}
});
}
Be sure that you define the correct width height for the containers which have the scroll-pane class. In my case I have created 3 containers like this:
<div class="scroll-pane">
.scroll-pane {
overflow: auto;
height: 134px;
width: 420px;
}
The class scroll-pane is where I defined the overflow, height and width. If I do in the parent container, the scroll is not shown because it takes all the height and also if I do in a child container, a non stylized scroll is shown.
But I still having an issue with the first pane. It is correctly shown the first time the page is loaded, but when I move to another accordion tab and then come back to the first one, the width of this element is set to 0. It only happens with the first one the others work fine.