I’m unable to set the height of a table to match the constrained height of a container:
table = dbc.Container(
dash_table.DataTable(
id = 'tbl',
row_selectable = 'single',
selected_rows = [None],
selected_row_ids = [None],
data=df.to_dict('records'),
columns=[{'id': c, 'name': c , 'type': table_type(df[c]), 'format':table_format(df[c])} for c in df.columns
# omit the id column
if c != 'id'
],
page_action = 'none',
style_table = {
"max-height": "100%",
#"height": "80vh",
#"height" : "20vh",
#'overflowY':'auto',
#'overflowX':'auto',
},
sort_action = 'native',
# page_size=5,
fixed_rows = {"headers": True, "data": 0},
virtualization = True,
hidden_columns = [None],
style_cell = {
#'font-size':'10px',
# 'minWidth': '180px',
#'width': '85px',
#'maxWidth': '180px',
},
style_cell_conditional=[
{'if': {'column_id': chem_columns}, 'width': '100px'},
],
style_data_conditional = get_style_data_conditional()
# col_width_computated,
,
css=[{"selector": ".show-hide", "rule": "display: none"}],
fill_width=False,
),
style={"height": "100%", "border": "5px #8c2c5c solid"}
)
I’ve tried to delete all the options but none worked.
Is there any advice?
I've found that, by having a look with the DevTool of chrome, if I set the height:100% in the class dah-table-container it works!
Unfortunately, I’ve no idea how to do it in the python code…
[SOLVED]
Add a CSS file option in asset folder located in app parent directory.
.dash-table-container{
height: 100% !important;
}
Related
I am using the following code for my wibar tasklist:
s.mytasklist = awful.widget.tasklist
{
screen = s,
filter = awful.widget.tasklist.filter.allscreen,
buttons = tasklist_buttons,
layout = wibox.layout.fixed.horizontal(),
widget_template =
{
{
{
{
id = 'clienticon',
widget = awful.widget.clienticon,
},
margins = 0,
widget = wibox.container.margin,
},
{
id = 'text_role',
widget = wibox.widget.textbox,
},
layout = wibox.layout.fixed.horizontal,
},
id = 'background_role',
forced_width = 200,
forced_height = 60,
widget = wibox.container.background,
create_callback = function(self, c, index, objects)
self:get_children_by_id('clienticon')[1].client = c
end,
},
}
s.mytasklist_onlyminimised = awful.widget.tasklist
{
screen = s,
filter = awful.widget.tasklist.filter.minimizedcurrenttags,
buttons = tasklist_buttons,
style = {
shape_border_width = 1,
shape_border_color = '#333333',
shape = gears.shape.partially_rounded_rect,
},
}
Which makes the tasks on the tasklist have fixed width (as according to this answer)
My question is:
Is it possible to make the tasklist switch to wibox.layout.flex.horizontal when the tasklist is full of tasks?
While you could technically replace the tasklist from a client.connect_signal("tagged", function(c) if #c.screen.selected_tag:clients() >= some_number then <make_a_new_tasklist> end end) style code, that's pretty cheap and ugly.
So I think this would require to contribute a patch upstream to expose the taglist/tasklist constructor arguments as properties. The awful.widget.layoutlist already do it, but not the tag/tasklists.
I'm using vis js to build an application and when I generate the first search I don't have edges overlapping but after expanding a node I got them.
I have a loop to fill the nodes and edges using nodes.update and edges.update
Graph:
var container = document.getElementById("graph-container");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
interaction:{
dragNodes:true,
dragView: true,
hover: true,
hoverConnectedEdges: true,
selectConnectedEdges: true,
zoomView: true
},
layout:{
randomSeed : 2,
improvedLayout:true,
clusterThreshold: 150,
},
physics: {
barnesHut: {
avoidOverlap: 0.5
}
},
nodes: {
physics:false,
borderWidth:3,
size:14,
font:{color:'#000000'}
},
edges:{
length: 200,
smooth: {
roundness: 0.2,
type: 'dynamic'
},
font:{
size:9,
}
}
};
if(is not expand node){
network = new vis.Network(container, data, options);
}else{
network.fit();
network.redraw();
}
What am I doing wrong?? I think its not reading my options = {...} in the expansion
I'm trying to achieve something like this: example.
I want to display labels for xAxis like in categories: in Month day-day format. Is it possible to achieve it with 'datetime' type?
This is my xAxis configuration:
{
"type" : "datetime",
"crosshair" : false,
"visible" : true,
"labels" : {
"enabled" : true,
"padding" : 10
},
"minTickInterval" : 86400000,
"tickLength" : 10,
"min" : 1507759200000,
"max" : 1523311199999
}
You can try setting xAxis.labels.x offset when xAxis.showLastLabel is disabled:
var chart = Highcharts.chart('container', {
chart: {
width: 700
},
xAxis: {
type: 'datetime',
labels: {
x: 150
},
showLastLabel: false
},
series: [{
data: [
[Date.UTC(2018, 0), 1],
[Date.UTC(2018, 1), 2],
[Date.UTC(2018, 2), 2]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/0bk79bpz/
API references:
https://api.highcharts.com/highcharts/xAxis.labels.x
https://api.highcharts.com/highcharts/xAxis.showLastLabel
I am having issues rotating my symbol around a specific pivot point.
Here is my code :
var path_tank_left_track = new Path({
segments: [[0,0], [10, 0], [10,40], [0,40]], strokeColor: 'black',
closed: true
});
var path_tank_right_track = new Path({
segments: [[40,0], [50, 0], [50,40], [40,40]], strokeColor: 'black',
closed: true
});
var path_tank_body = new Path({
segments: [[10,5], [40,5], [40,35], [10,35]], strokeColor: 'black',
closed: true
});
var path_tank_gun = new Path({
segments: [[23,15], [23,0], [27, 0], [27, 15]],
strokeColor: 'black',
pivot: [25,15],
name: 'gun'
});
var path_arena_separation = new Path(new Point(view.size.width/2,0),
new Point(view.size.width/2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed = true;
var whole_tank = new Group();
whole_tank.addChild(path_tank_left_track);
whole tank.addChild(new Point(5,20)); // trying to add the middle of the left track pivot point
whole_tank.addChild(path_tank_body);
whole_tank.addChild(path_tank_right_track);
whole tank.addChild(new Point(50,20)); // trying to add the middle of the right track pivot point
whole_tank.addChild(path_tank_gun);
// Create a symbol definition from the path:
var definition = new SymbolDefinition(whole_tank);
var instance1 = definition.place();
instance1.position = new Point(view.size.width/4, view.size.height/2);
var instance2 = definition.place();
instance2.position = new Point(3*view.size.width/4, view.size.height/2);
function onFrame(event) {
instance1.rotate(1, instance1.definition.item.children[1]);
}
As you can see, at the onFrame function, I'm trying to rotate the instance by 1 degree every frame around the point I created earlier. But I get an error saying the item_remove is not a function in the paper-full.js.
I'm confused, I tried to create a path with a single point and add it to the group but it did not let me.
If I modify the code to make the gun rotate on it's pivot instead, it does work :
function onFrame(event) {
instance1.definition.item.children['gun'].rotate(1, instance1.definition.item.children['gun'].pivot);
}
The gun does rotate around the proper pivot and the pivot stays attached to the symbol even if the symbol moves around. How could I achieve that behavior but turning the whole tank around a specific point relative to the center of the tank?
Thank you for your help, let me know if I should include more detail.
Your code is crashing because you try to add a point (and not a path containing a single point as you seems to be trying to) as a group child, which is not what API expects.
To create a path containing a single point, you have to do this:
var path = new Path(new Point(x,y));
But I think the idea of adding a single point path as a child to later retrieve its position to use it as a pivot point is wrong in your case.
The fact that you are creating each tank as a Symbol implies that you won't have access to its own children.
You can instead, before placing your symbols, store 2 vectors: one from center to left and one from center to right. They will later help you calculating left / right track positions.
Here is a Sketch adapted from your code, demonstrating this.
var path_tank_left_track = new Path({
segments : [ [ 0, 0 ], [ 10, 0 ], [ 10, 40 ], [ 0, 40 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_right_track = new Path({
segments : [ [ 40, 0 ], [ 50, 0 ], [ 50, 40 ], [ 40, 40 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_body = new Path({
segments : [ [ 10, 5 ], [ 40, 5 ], [ 40, 35 ], [ 10, 35 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_gun = new Path({
segments : [ [ 23, 15 ], [ 23, 0 ], [ 27, 0 ], [ 27, 15 ] ],
strokeColor: 'black',
pivot : [ 25, 15 ],
name : 'gun'
});
var path_arena_separation = new Path(new Point(view.size.width / 2, 0), new Point(view.size.width / 2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed = true;
var whole_tank = new Group();
whole_tank.addChild(path_tank_left_track);
whole_tank.addChild(path_tank_left_track);
whole_tank.addChild(path_tank_body);
whole_tank.addChild(path_tank_right_track);
whole_tank.addChild(path_tank_gun);
// store vectors from bounds center to tracks middle points
var tankCenter = whole_tank.bounds.center;
var leftTrackCenter = new Point(5, 20);
var rightTrackCenter = new Point(50, 20);
var leftVector = leftTrackCenter - tankCenter;
var rightVector = rightTrackCenter - tankCenter;
// Create a symbol definition from the path:
var definition = new SymbolDefinition(whole_tank);
var instance1 = definition.place();
instance1.position = new Point(view.size.width / 4, view.size.height / 2);
var instance2 = definition.place();
instance2.position = new Point(3 * view.size.width / 4, view.size.height / 2);
function onFrame(event)
{
// calculate pivot point position
// first we rotate vector accordingly to instance current rotation
var rotatedVector = rightVector.rotate(instance1.rotation);
// then we add it to current tank center
var point = instance1.bounds.center + rotatedVector;
// turn right
instance1.rotate(1, point);
}
My flot graph is rendering fine on firefox and chrome, however on ie11 it does not render. the graph appears with no datapoints.
var options = {
"xaxis" : {
"mode" : "time",
"timeformat" : "%d/%m",
//"tickSize" : [1, "day"]
},
"yaxes" : [{
"position" : "left",
//"tickSize" : 1,
"min" : min,
"max" : 100
}, {
"position" : "right",
"min" : 0,
"max" : max
}
],
"series" : {
"lines" : {
"show" : true
},
curvedLines: {
apply: true,
}
},
"colors" : ["#00ff00"],
"legend" : {
"show" : false
},
"grid" : {
hoverable: true,
clickable: true
}//,
//animator: { start: 100, steps: 99, duration: 2000, direction: "left" }
};
var data_ajax = [{
"color" : "#A8B400",
"label" : "R1 Graph",
"lines" : {
"show" : true,
"lineWidth" : 1
},
"points" : {
"show" : false
},
"yaxis" : 1,
"data" : arr
}
];
$('#network-graph').empty();
plot = $.plot("#network-graph", data_ajax, options);
Problem I found was with the data_ajax variable. it contained objects with wrong format. The time format i had to use for IE11 fix is as follows
var to_seconds = moment(data[i].TIMESTAMP, 'YYYY-MM-DD hh:mm A').unix() * 1000;
I wasn't specifying a format previously. Is there a universal date time format I can use for all browsers?