I am trying to increase the font-size of the title of a slider in bokeh (0.12.4). For any other object there seems to be a "something_font_size" attribute, but as far as I can tell this doesn't seem to be the case for a slider title as it's saved as a string. Is there a way of doing this using bokeh or do I need to find a way to fix it using JavaScript?
Not certain if you can fix this using bokeh.
Try see what attributes and methods can be applied to the slider object.
If that fails, you could change it through investigating the elements on chrome/firefox then adding these to a styles.css file or similar.
.bk-slider-parent
{
font-size:20px
}
That seemed to increase both the name and value font sizes, you can also change just the values font size/color etc...
Let me just add that I am running with
bokeh serve --show Appdirectory
and Appdirectory contains main.py, Templates/index.html , Templates/styles.css - so you can include the snippet in either file (styles.css is included in index.html)
Updated: See below for bare minimum index.html should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
<div class="content">
<h1>Title</h1>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
</div>
</body>
</html>
Related
I am currently using flask and I aim to do the following:
When I click on a tab on my webpage constructed by HTML, I want it to display a list of data stored in mysql server.
I know how to pull the data from sql in Python (using mysql connector) and then 'input' the values individually, however, this would require me to create another webpage with the sole objective of displaying data from that particular tab - and then I'd have to create a new webpage altogether for another tab.
This seems really inefficient and was wondering if there is a way of displaying data from sql when pressing a tab without needing to navigate to another page.
Code
Python:
#app.route('/studentdb')
def sdb():
return render_template('studentdb.html')
HTML (studentdb.html)
<!DOCTYPE html>
<html lang="en">
<head>
<html lang="en">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style_sdb.css')}}">
<title>Student Database</title>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openSubject(event,'bio')">Biology</button>
<button class="tablinks" onclick="openSubject(event, 'chem')">Chemistry</button>
<button class="tablinks" onclick="openSubject(event, 'phy')">Physics</button>
</div>
<div id="bio" class="tabcontent">
<h3>Biology</h3>
<p>Biology Students List</p>
</div>
<div id="chem" class="tabcontent">
<h3>Chemistry</h3>
<p>Chemistry Students List</p>
</div>
<div id="phy" class="tabcontent">
<h3>Physics</h3>
<p>Physics Students List</p>
</div>
<script src="static/js/tabs.js"></script>
</body>
</html>
There are also css and javascript code for the tabs that I have not included - I'm happy to post them if required.
I'm using an open source for using Google Map API, but I don't know how to resize the map. Here's my code. Please help me.
index.html
<body><div>{{sndmap.html}}</div></body>
main.py
#app.route('/')
def index():
sndmap = Map(
identifier="sndmap",
varname="sndmap",
lat=37.4419,
lng=-122.1419,
markers=[(37.4419, -122.1419), (37.4500, -122.1350), (37.4300, -122.1400, "Hello World")]
)
return render_template('index.html', sndmap=sndmap, GOOGLEMAPS_KEY=request.args.get('apikey'))
You can easily include inline styling, but adding a stylesheet is largely considered the most maintainable method.
This is done by giving your desired tag a class. Then linking a css stylesheet to your html and updating the css as needed.
I've included an example.
projectroot/index.html
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='style/style.css') }}">
</head>
<!-- Other html -->
<body>
<div class="google-map">
{{ sndmap.html }}
</div>
</body>
<!-- Other html -->
</html>
projectroot/static/styles/style.css
/* More css */
.google-map {
max-width: 500px;
max-height: 200px;
}
/* More css */
This shouldn't be copied verbatim as you'll need to play around with the exact styling to achieve the look you want. The number of customization options through standard css are endless. I'd recommend looking up common patterns and coping what you like.
For a bokeh folder application that will only run locally I am trying to display a PDF within an Iframe. The following code is indeed showing an Iframe but unfortunately it is always only filled with the following information: "404: Not Found"
from bokeh.models.widgets import Div
from bokeh.layouts import row
from bokeh.io import curdoc
div = Div(text="""<iframe src="path/to/pdf.pdf"></iframe>""",
width=300, height=300)
curdoc().add_root(row(div))
Any other solution than displaying the pdf in an Iframe would be welcomed as well.
Did you try a folder app with custom templates?
in my_app/
you have :
my_app/main.py
my_app/templates/index.html
in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
<iframe src="path/to/pdf.pdf"></iframe>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
</body>
</html>
I am embedding a bokeh chart in a Flask template. The app uses a master stylesheet, while the chart needs its own styles.
The master stylesheet leaks into the chart and changes its appearance. How do I apply different styles to different sections in a template so that only one style is active?
See my question on the Bokeh mailing list for more code and images.
This is the code of the template that pulls in the chart object. resources, script, and div are the elements of the object, generated by the charting library.
{% extends "base.html" %}
{% block content %}
<frame>
<head>
<meta charset='utf-8' />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
{{ resources|indent(4)|safe }}
{{ script|indent(4)|safe }}
</head>
<body>
{{ div|indent(4)|safe }}
</body>
</frame>
{% endblock %}
You don't, that's not how HTML/CSS works. All linked stylesheets apply to the entire document, Jinja templates don't factor into it. You use selectors to selectively apply CSS rules to HTML elements. Give the chart element an id, and write rules for that id.
<div id='my_chart'></div>
#my_chart {
}
This is my first question ever on SO and I'm happy to take any tips on improving. Be gentle :)
To increase maintainability, I am trying to keep CSS, JS and HTML all together in the same file. This becomes difficult with include files, or macros, etc. The final output template.render() should grab all that CSS and JS, and place it at the top and bottom of the base HTML template.
Example should explain what I mean:
base.html
<html>
<head>
<style>
{{ print_css() }}
</style>
</head>
<body>
{% include 'bolded_text.html' %}
<script>
{{ print_js() }}
</script>
</body>
</html>
bolded_text.html
{# this doesn't need to be a filter. It could be a block, or anything else that would make this work #}
{% filter add_css %}
strong {
background: #ccc;
}
{% endfilter %}
<strong>Bolded text</strong>
{% filter add_js %}
alert('javascript included!');
{% endfilter %}
Output would of course be:
<html>
<head>
<style>
strong {
background: #ccc;
}
</style>
</head>
<body>
{% include 'bolded_text.html' %}
<script>
alert('javascript included!')
</script>
</body>
</html>
Predictably, the problem is that print_css() outputs nothing.
I tried doing this with context filters, where add_js and add_css append to a variable in the context, and then print_css and print_js output that variable. This works nicely and simply for JavaScript, since the print statement follows all the filters.
However, I can't think of a way to make it work with CSS. If I could make the print_css() call lazy, or swap in the output in the jinja2 AST somehow, that might work. I'm trying to avoid hacky string manipulation (such as outputting the CSS at the bottom and then using regexes to move it to the top).
I figured there might be a way to do this elegantly and my experience with jinja2's low-level API is limited.
Any help is much appreciated, thanks!
Macros will do that, but I don't see the point why you wouldn't use StyleSheets, this enables the browser a way better caching and it's also easier to maintain.
EDIT:
Example:
{% macro generate_css(strong_bg='#ccc', additional_options=None) -%}
strong {
background: {{ strong_bg }};
}
{%- endmacro %}
<head>
<style>
{{ generate_css() }}
</style>
</head>