I am actually a beginner to Python's Bokeh library.
I am plotting a simple scatter plot as follows:
from bokeh.io import show
from bokeh.plotting import figure
plot = figure()
plot.circle(x=[1,2,3,4,5],y=[10,7,2,5,9],size=10)
show(plot)
The code above opens a html page, with that plot aligned to the left of the screen.
Is there a way to align the plot to the center ?
I actually saw an attibute align of the method figure.
I set it to 'center', but nothing happened.
Can anyone help ?
Well, I have faced this problem and i found a solution that works:
You need to create a template that will overwrite the margin property of the plot's parent div>
template = """
{% block postamble %}
<style>
.bk-root .bk {
margin: 0 auto !important;
}
</style>
{% endblock %}
"""
.bk-root .bk defines the parent div of your plot. .bk-root is specified too because this will prevent ignoring of this property by specific styles(related to style importance evaluation order).
!important; is needed because margin property for that div is defined inline. Inline property can be overwritten only with this !important tag.
After this you will need two imports and two function calls:
from bokeh.io import save
from bokeh.util.browser import view
save(your_plot, template=template)
view("digits.html")
The save function will apply template to your html document. The view function will open a new tab in browser with your centered plot.
In case this solution does not work, you should inspect the html code from your browser and find out for which div class you should modify margin property, but general concept will remain the same.
Related
I want expand/ unexpand feature and I use Vaadin Details for it.
Div contentDiv = new Div();
Label label = new Label("Expand");
Details details = new Details(label, contentDiv);
What it gives is following output:
But, what I want is the expand icon in right side. So for this I use ThemeVariants like this:
details.addThemeVariants(DetailsVariant.REVERSE);
What it gives is the following output:
There is huge gap between the text and Icon.
This is because of the below default css applied on it.
:host([theme~="reverse"]) [part="summary"] {
justify-content: space-between;
}
So, Now I need to override this css. And what I have done is added below css code in my css file and added themeFor="summary" in import. But it did not work.
:host([theme~="reverse"]) [part="summary"] {
justify-content: normal;
}
Expected Output:
So, is there any other way to do this in Vaadin? Or how can I override the default css of ThemeVariants.
Note: I am using Vaadin 14.
One of the problem, when css did not work is wrong import.
Check if your css import specified with themeFor.
Example of css import:
#CssImport(value = "./styles/vaadin-details.css", themeFor = "vaadin-details")
In vaadin-details.css:
:host([theme~="reverse"]) [part="summary"] {
justify-content: normal;
}
Link to Vaadin documentation about css styling.
This is the commit where I got your expected result. Please, look how I import css file.
Also, as you correctly noted, this defect is reproduced when working with Div, not with Vertical Layout.
Use themeFor="vaadin-details" instead of themeFor="summary" and it should work.
Also, use justify-content: start;. There’s no normal value for that property: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
I am using bootstrap-vue and would like to add some padding to my sidebar, but i cant get it to work.
If I add padding in the browser devtools, it does.
But my code wont go through to the browser, so it does not show there at all.
I have tried to give it a class myself -> ends up in at the main tag with class: "b-sidebar-outer"
->Doesnt help, because i need it to go to the one with "b-sidebar"
But if i do this (or as specific as possible with classes):
.b-sidebar {
padding: 10px;
}
-> not showing
I could give the padding to the elements inside my sidebar, but that would be a lot more work. :c
Can anyone help?
Vue.JS gives every component and unique uid. In your DevTools you will see that components are having a data attribute, when your CSS is parsed it will look something like this div[data-v-f3f3eg9].
This way multiple components can use the same class names without intervening with eachother.
To set a style in another component you can use a deep selector
For SCSS:
/deep/ .b-sidebar {
padding: 10px;
}
For CSS:
.your-class >>> .b-sidebar {
padding: 10px;
}
I'm designing this for a touchscreen, so the scrollbar handles need to be extra big, but so far, this is all I can get:
In the constructor of the list widget:
myScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
myScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
myScrollArea->verticalScrollBar()->setFixedWidth(pitch_height);
myScrollArea->setWidget(this);
pitch_height is the size of the icons. I figured that'd be about right for the scrollbar too. Something roughly like this:
Use style sheets to modify scroll bar
QScrollBar:vertical {
width: 100px;
}
Relevant documentation:
Customizing QScrollBar
Qt Style Sheets Reference
I want to add a custom CSS Class to a dijit/layout/ContentPane so I'm able to style it myself.
This is cause I got more than one tab in my TabContainer where my ContentPanes are located and I don't want to double the borders. Using a border all around the Tab will double the border so I removed the left border of the tabs. In the first tab in the TabContainer I need the left border, too.
To get this I tried to assume the first ContentPane a custom CSS class which will do it.
As you see me writing here, I didn't find a way to do this.
I tried it within the data-dojo-props with
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">
So this didn't work. I tried to add it like I do it in a simple HTML element with class="firstTab"
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">
Both ways didn't add my class to the ContentPane.
So how is it done?
The class property is actually not used for that kind of purpose, but it used for identifying of which type the widget is.
However, the class attribute should work, because declarative widgets usually keep their parent attributes. If I have the following HTML:
It eventually gets rendered into:
<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent">
Hello
</div>
However, please note that when using a dijit/layout/ContentPane inside a dijit/layout/TabContainer a lot of additional CSS is added, possibily overriding your own CSS.
For example, for overriding the background color of a tab inside a dijit/layout/TabContainer, I had to use the following CSS selector:
.dijitTabContainerTop-dijitContentPane.test2 {
background-color: #D4D4D1;
}
Demo: http://jsfiddle.net/Lcog9saj/
But also, be aware that the borders generated by the TabContainer are not applied to the ContentPane itself, but to an element with classname .dijitTabContainerTop-container (part of the TabContainer itself).
If this really doesn't work, then you can always access the domNode property of the widget you're trying to alter, for example:
require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) {
ready(function() {
domClass.add(registry
.byId("myContentPane")
.get("domNode"), "test2");
});
});
It's that simple that I didn't get it.
All you need to do is adding an ID to the ContentPane.
Dojo generates a widgetID with it like "dijit_layout_TabContainer_0_tablist_myID"
If the TabContainer itself has an ID, it could be different. Just have a look at the generated code.
Now you're able to get it with dijit.byId.
At the end it looks something like:
var tab = dijit.byId("dijit_layout_TabContainer_0_tablist_myID");
domClass.add(tab.domNode,"myClassName");
domClass is a part of dojo. For using it you just need to require it "dojo/dom-class"
Seems like it will only works when using position: fixed in application template, if I place the element under other template (let's say Index), it will positioned based on the ember-view instead of the browser window.
So how do I make sure the element stay at the bottom of it's current view?
Thanks.
Solution:
Thanks to #Kalman for suggesting the conditionally render method which I put some time on it, so what I did is:
Have a named outlet under application.hbs:
<div class="position-fixed-bottom">
{{outlet "placeToPutElement"}}
</div>
and when in the route I need the element, render it out through renderTemplate with specified controller:
App.SomeRoute = Ember.Route.extend({
renderTemplate: function()
{
this.render('addbtn', {into:'application', outlet: 'placeToPutElement', controller: 'controllerName'})
//Render other content
}
});
So when we called it out, the element will stay bottom relative to the window as it is rendered in application template. (Just remember to use position: fixed)
When using {{ outlet }} helper, your template will always be plugged-in (sorry, couldn't avoid the pun there :)) inside the parent template. So, by definition that means that you will not be able to control where it appears on the entire page.
What you probably want is to use a render helper instead.
See an example here