As the title says. I tried using the Overlay item that comes with blueprint, but that had the issue of only being able to scroll within the overlay. Also tried using reflexbox but that had the issue of not being able to scroll individually within the sidenav vs main content. I'm looking for something like
a | a a a
a | a a a
a | a a a
where the sidebar and the maincontent can scroll independently
You can use CSS to do this. Simply put the two elements inside a div and assign them a class. Style it as such:
.scroll-div {
overflow-y: auto;
}
Related
When using react-virtualized's Table class with a table with many columns, it is necessary to scroll horizontally to the very end of the columns in order to be able to see the vertical scrollbar.
(you can see an extremely similar question about React-Table here, it is not clear to me if react-virtualized's table code uses React-Table's code at all, but in any case I am having an identical problem)
in the linked issue someone commented that:
.ReactTable .rt-tbody{
overflow: initial !important;
}
fixed their issue. I checked this solution with react-table and got the desired behavior.
However, as far as I can tell react-virtualized table doesn't have tbody class available for css. (The docs do list a bunch of available class names, but a body class name doesn't seem to be on that list).
I've messed around with the css trying to set different overflow options in different ways to no avail. I have not been able to get the vertical scrollbar to display without needing to horizontally scroll all the way to the end. What can I do to make that happen?
(Edit: I've also tried to figure out some way to make this work with react-floating-scroll but it seems like the ref passed back by virtualized table isn't the kind of ref the scroll code needs...)
This will move the scroll bar to the left side instead of right side.
.ReactVirtualized__Table {
.ReactVirtualized__Table__Grid {
direction: rtl !important;
.ReactVirtualized__Grid__innerScrollContainer {
direction: ltr !important;
}
}
}
Currently, my title overlays my cover image on my pages and posts. I do not like this and want it either hidden or removed. I've tried plugins and they don't work. What code can I use to do this? I have a child theme.
My Site with example of this: https://intentionaldetours.com/example-laos-article/
Plugins that didn't work and messed up my menu. I just want this text deleted on the display, I need it to show up in other areas of the site
Don't have any
Titles either not displaying at all on pages, and for post below the featured image
Do you want remove the text "Example Laos Article 2 months ago"? Is it?
If so, you can add some CSS code to hide it.
Something like:
.entry-header {
display: none;
}
I use the Kendo Upload component for Angular 2.
I cannot figure out how to hide the file list below the uploader button. I know it can be customized using ng-template but I want it to be hidden. I've tried setting the class like this :
.k-upload-files{
display: none;
}
but this has no effect.
Can you help ?
The file-list can be hidden by utilizing the showFileList input. API Reference
<kendo-upload
[showFileList]="false"
...
>
</kendo-upload>
Alternatively you can use a css rules to hide the file-list (as you already stated in your question).
.k-upload-files {
display: none;
}
I've prepared an example showing both approaches in action.
I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using:
jsPlumb.draggable("window2", {
containment:"parent"
});
the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward.
To see this all in a fiddle: http://jsfiddle.net/xXYwX/3/
Does anyone know if there is a way to use jsPlumb's draggable function with YUI and still restrict the movement of the draggable div?
Thanks!
First make the div draggable using jsPlumb:
jsPlumb.draggable("window2");
Then add necessary jsPlumb end points:
jsPlumb.addEndpoint("window2", { ----});
Then add the HTML draggable like
$('#window2').draggable({
containment: 'parent'
});
Its working for me..
No, it seems not possible with the yui version of jsPlumb. The 'dd-constrain' module is missing and i found no way to plug this module in, because you can't get access to the Y.DD.Drag object.
You can send a feature request to the creator or do a pull request on github.
Here is a plain yui example with a constrained drag:
http://yuilibrary.com/yui/docs/dd/constrained-drag.html
make your container overflow: visible in css
I have a pretty simple horizontal menu that has a solid background with colored links. How do I change the color of the link when I'm at the targeted page?
I tried this #nice-menu-1 li a:active
but that only affects the color for a moment when I click on it. I want the color on that item of the menu to stay changed while I am on that page.
thanks
Elements are "active in the definition of the :active pseudo class when that element is being clicked or tapped. So what you describe above is expected behavior.
You'll need to:
Set a class on the link that corresponds to the current page
Target that class with CSS
Luckily, Nice Menus and Drupal handle #1 for you by adding an .active class to the <a> tag and an .active-trail class to the parent <li> tag.
So you can target those in CSS like this:
#nice-menu-1 li.active-trail a,
#nice-menu-1 li a.active { color: #0f0;}