I am developing an dashboard with Flask, Bootstrap4 and Bokeh. However, I cannot get a stable responsive design with bokeh. I have eight tabs with each two bokeh plots. The tabs are hidden via javaScript so can select a tab and it will be shown. The responsiveness is only working for the default visible tab. Accordingly, for the first tab the plots adjust to the given size. However, for the other tabs (same css, same html) the plots do not limit to the given css boundary and occupy a bigger space as the div they live in actually has. And, once I go back to the default visible tab, also those plots lost their responsiveness and behave like all the others.
I am using the sizing mode: "stretch both" and limit the height of the plots via css.
I would be thankful if someone could point me towards the solution. Cheers Lars
Here is my plotting code:
def plottingto(dataframe, lineID, plotnametext ):
names = lineID
source = ColumnDataSource(data={
'date' : dataframe['date'],
'time' : dataframe['time'],
'index' : dataframe.index,
'pendeltime_To_Real': dataframe['pendeltime_To_Real'],
'pendeltime_To': dataframe['pendeltime_To'],
'pendeltime_Back_Real': dataframe['pendeltime_Back_Real'],
'pendeltime_back': dataframe['pendeltime_back'],
'delay_to': dataframe['delay_to'],
'delay_back': dataframe['delay_back'],
})
hover_tool = HoverTool(tooltips=[('Uhrzeit', '#time'),('Pendelzeit', '#pendeltime_To_Real'),('Verzögerung','#delay_to')], names=names)
tools = [hover_tool, ResetTool(), BoxZoomTool()] #WheelZoomTool(), PanTool(),
#Bokeh Plott Rückweg Live Today
p = figure(plot_height=320, x_axis_type="datetime", y_range=(26, 60),tools=tools, sizing_mode="scale_width")
p.line(x='index', y='pendeltime_To_Real',line_width=1, line_color="#7db800", legend="Echte Pendelzeit", name=names[0], source=source)
p.line(x='index', y='pendeltime_To', line_width=1, line_color="red", legend="Durchschnittliche Pendelzeit", source=source)
p.toolbar.logo = None
plotname = file_html(p, CDN, plotnametext)
return plotname
Here is my css (in addition to bootstrap4):
.fixed_height{
height:380px;
padding-bottom: 30px;
margin-bottom: 50px;
}
Here is my html:
<div class="row mainrow">
<button class="accordion">
<h3 class="headingfullrow">STATISTIKEN ZUM PENDELFENSTER</h3>
</button>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-sm diagrambox">
<div class="x_title">
<h2>Verkehrslage letzte 7 Werktage Hinweg</h2>
<div class="clearfix"></div>
</div>
<div class="x_panel tile fixed_height overflow_hidden">
{{BOKEHWEEKTO | safe}}
</div>
</div>
<div class="col-sm diagrambox">
<div class="x_title">
<h2>Verkehrslage letzte 7 Werktage Rückweg</h2>
<div class="clearfix"></div>
</div>
<div class="x_panel tile fixed_height overflow_hidden">
{{BOKEHWEEKBACK | safe}}
</div>
</div>
</div>
</div>
In my github repo exists a folder within the pathway "TriviaGame/assets/images/" but on the io page of that repo, the pathway to the file produces a "404". It seems that github pages is not uploading the image. ["TriviaGame/assets/images/backgroundimage.png"][1]
TriviaGame/assets/images/backgroundImage.png
https://dboothy.github.io/TriviaGame/assets/images/backgroundimage.png
Failed to load resource: the server responded with a status of 404 ()
dboothy.github.io/:1 GET https://dboothy.github.io/TriviaGame/assets/images/backgroundimage.png 404
404 error on io
[1]:
.content-wrap {
background: url("../images/backgroundimage.png") no-repeat center fixed;
background-size: cover;
min-height: 100vh;
}
<div class="content-wrap" align="center">
<div id="heading" class="hide">
<h2>Time remaining: <span id="timer"></span></h2>
</div>
<div class= "container">
<div id = "game-wrapper">
<div id="main-content">
<div class="content-container">
<h1>Movie Trivia</h1>
<div id="welcome">
<p>try and answer as many question in the time allowed</p>
<div id="results" class="hide"></div>
<button id="startGame" class="textBox">Start</button>
</div>
<div id="gameWrap" class="hide">
<div id="questionWrap"></div>
<button id="finish" class="btn btn-warning">FINISH</button>
</div>
</div>
</div>
</div>
</div>
</div>
https://i.stack.imgur.com/R7kG8.png
In css above I typed:
"../images/backgroundimage.png"
when actually file was named "../images/backgroundImage.png"
Hej all !
As the title of the subject suggest, I wonder if it's possible to have deep linking that works on nested tabs.
I mean, if I use only one tabs container, it works fine, but I don't know how to deep link to a tab inside a parent tab. It should first open the parent tab and then display the goal child tab.
Is it possible using Foundation 6 deep-linking please (without hacks) ?
Let's say we have this code :
<div>
<ul class="tabs" data-tabs id="tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 1</li>
<li class="tabs-title">Content 2</li>
</ul>
</div>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="tab1">
My Content 1
</div>
<div class="tabs-panel" id="tab2">
<ul class="tabs" data-tabs id="tab2-tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 2-1</li>
<li class="tabs-title">Content 2-2</li>
</ul>
<div class="tabs-content" data-tabs-content="tab2-tabs">
<div class="tabs-panel is-active" id="tab2-tab1">
My Content 2-1
</div>
<div class="tabs-panel" id="tab2-tab2">
My Content 2-2
</div>
</div>
</div>
</div>
How can I open "My Content 2-2" using deep-linking please ?
I have a web page with a left hand menu. It is made up of many div tags.
I have noticed when my Selenium Python script runs it is not clicking the text I want clicked from the left hand menu. It is clicking something else.
My Xpath is not correct.
I would like to locate the text "Statistics" (it is in a div\span tag) which has the parent div text "Analysis"
It is not clicking the correct text "Statistics" because there maybe another "Statistics" somewhere in the HTML source. If i start from the div tag which has the text "Analysis" and then find the text "Statistics" then I will get the correct element.
My Xpath is:
.//div//span[#title="Analysis"]/following::div[5]//span[text()="Statistics"]
The HTML is:
<div>
<span class="" title="Analysis"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Analysis</span>
</div>
</div>
</div>
</div>
</div>
<div style="overflow: hidden;">
<div>
<div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="1" aria-expanded="false"
aria-level="2">
<div class="GJPPK2LBIF" style="padding-left: 16px;">
<div class="GJPPK2LBIF GJPPK2LBKF" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<img border="0"
style="width:15px;height:15px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA7/HbnjJn53wAAAABJRU5ErkJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<img border="0"
style="width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaekJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div>
<span class="" title="Statistics"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Statistics</span>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks,
Riaz
If you have FireFox with FirePath you can test the xpath and see how many and which matches you get. For instance:
//span[text()="Statistics"]
This may result in 1 matching node but also in more. Let's assume there's two matches and the one you want is the second one. Then you'd choose:
//span[text()="Statistics"][2]
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file