Comments (10)
DarkCTO
commented on June 12, 2024
If remove the 'overflow-y':'scroll', everything on the right panel scrolls with consistent widths, but I would like the tab and the affix to stay on top.
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
If it were other components such as Graphs, the width is consistent...
So I think it's the AntdGrid process of determining the width that is erroneous.
@app.callback(
[Output('tabs-add-delete-demo', 'items'),
Output('tabs-add-delete-demo', 'activeKey')],
[Input('tabs-add-delete-demo-add', 'nClicks'),
Input('tabs-add-delete-demo', 'latestDeletePane')],
[State('tabs-add-delete-demo', 'items'),
State('tabs-add-delete-demo', 'activeKey')]
)
def tabs_add_delete_demo(nClicks,
latestDeletePane,
origin_items,
activeKey):
if ctx.triggered_id == 'tabs-add-delete-demo-add':
# 提取已有items中的最大key值
if len(origin_items) == 0:
origin_max_key = 0
else:
origin_max_key = max([int(item['key']) for item in origin_items])
return [
[
*origin_items,
{
'label': f'Report {origin_max_key+1}',
'key': str(origin_max_key+1),
'children': fuc.FefferyDiv(
[
fac.AntdAffix(
fac.AntdCompact(
[
fac.AntdButton("INSERT MODEL", icon=fac.AntdIcon(icon='antd-deployment-unit')),
fac.AntdButton("INSERT CHART", icon=fac.AntdIcon(icon='antd-bar-chart')),
fac.AntdButton("INSERT MAP", icon=fac.AntdIcon(icon='antd-compass')),
],
style={
'height':'50px',
'margin-left':'25px',
}
),
offsetTop=0,
target='affix-container-demo',
),
fuc.FefferyDiv([
dcc.Graph(
figure=px.scatter(df, x="sepal_width", y="sepal_length", color="species"),
style={
'width':'100%',
'height':'30%',
}
) for i in range (1, 10)
],
style={
'height':'90vh',
'overflow-y':'scroll',
})
],
# f'report_{origin_max_key+1}',
id='affix-container-demo',
style={
'fontSize': 28,
'display': 'block',
},
)
}
],
str(origin_max_key+1)
]
elif ctx.triggered_id == 'tabs-add-delete-demo':
return [
[
item
for item in origin_items
if item['key'] != latestDeletePane
],
'1' if latestDeletePane == activeKey else no_update
]
return no_update
pass
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
Please see this, so the second tab has shorter width, but upon resize and maximize again it becomes the correct width.
from feffery-antd-components.
CNFeffery
commented on June 12, 2024
@DarkCTO The drag-and-drop grid generated by fuc.FefferyGrid will only automatically adjust the layout when the size of the browser window changes, but not when the parent container changes. In this case, for example, the size monitoring function of FefferyDiv in fuc can be used to monitor the layout every time the size of the parent container changes. Simulated js executes window.dispatchEvent(new Event('resize')) to manually update the layout (the principle is to manually simulate the overall browser resize event):
demo.mp4
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
That's good explanation for second part, but it doesn't explain the first tab grid width has longer grid width than the second, third etc. because the width hasn't changed right? I believe the first tab has overflow-y to overscroll so maybe the subsequent tab generate contents with less width because of the scrollbar width makes less width of the Div, so another scrollbar reduce even more? but it didn't happen with a long list of graphs...
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
I think you can reproduce the issue by having the tab with add tab callbacks (already in fac.feffery.tech) and generate a grid vertically long enough that the scrollbar shows.
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
For now I got that fixed by having fuc.ExecuteJS and use window.dispatchEvent(new Event('resize')) when adding new tab.
However I still believe this is a bug, as the width of the parent did not change for 2nd and 3rd tab.
Also if I clear all tabs and open one by one, same thing happen, the first tab has the longest width, from 2nd on is shorter.
from feffery-antd-components.
CNFeffery
commented on June 12, 2024
@DarkCTO try to set forceRender to True for every item in items:
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
Found the issue.
The children of AntdTabItem even when set height to 100% actually have the overall length go over the height of its parent... introducing the scrollbar for the parents, therefore subsequent tabs use the width minus the scrollbar width.
Using percentage on children style doesn't work, only actual px so I will have to calculate myself as a workaround.
from feffery-antd-components.
DarkCTO
commented on June 12, 2024
Fixed by adding to the Div of GridItem items...
style={
'height':'calc(100vh - 100px)',
'overflow-y':'scroll',
}
Also removing 'height':'100% from parent's Div width
@app.callback(
[Output('tabs-add-delete-demo', 'items'),
Output('tabs-add-delete-demo', 'activeKey'),
Output('execute-js-demo-output', 'jsString'),],
[Input('tabs-add-delete-demo-add', 'nClicks'),
Input('tabs-add-delete-demo', 'latestDeletePane')],
[State('tabs-add-delete-demo', 'items'),
State('tabs-add-delete-demo', 'activeKey')]
)
def tabs_add_delete_demo(nClicks,
latestDeletePane,
origin_items,
activeKey):
if ctx.triggered_id == 'tabs-add-delete-demo-add':
# 提取已有items中的最大key值
if len(origin_items) == 0:
origin_max_key = 0
else:
origin_max_key = max([int(item['key']) for item in origin_items])
return [
[
*origin_items,
{
'label': f'Report {origin_max_key+1}',
'key': str(origin_max_key+1),
'children': fuc.FefferyDiv(
[
fac.AntdAffix(
fac.AntdCompact(
[
fac.AntdButton("+", id='button_insert_model', icon=fac.AntdIcon(icon='antd-deployment-unit')),
fac.AntdButton("+", icon=fac.AntdIcon(icon='antd-bar-chart')),
fac.AntdButton("+", icon=fac.AntdIcon(icon='antd-compass')),
],
style={
'margin-left':'25px',
}
),
offsetTop=-25,
target='affix-container-demo',
),
fuc.FefferyDiv([
fuc.FefferyGrid(
[
fuc.FefferyGridItem(
[
fuc.FefferyDiv(
dash_table.DataTable(
id='datatable-interactivity',
columns=[{
'name': 'Column {}'.format(i),
'id': 'column-{}'.format(i),
'deletable': True,
'renamable': True,
'selectable':True,
} for i in range(1, 50)],
data=[
{'column-{}'.format(i): (j + (i-1)*50) for i in range(1, 50)}
for j in range(51)
],
editable=True,
row_deletable=True,
filter_action="native",
sort_action="native",
column_selectable='multi',
style_cell={'fontSize':14, 'font-family':'sans-serif'},
),
style={
'width':'100%',
'height':'100%',
}
)
],
id='gi_' + str(0),
key=str(0),
style={
'display': 'block',
}
),
fuc.FefferyGridItem(
[
dcc.Graph(
figure=px.scatter(df, x="sepal_width", y="sepal_length", color="species"),
style={
'width':'100%',
'height':'100%',
}
)
],
id='gi_' + str(1),
key=str(1),
style={
'display': 'block',
}
),
fuc.FefferyGridItem(
[
flc.LeafletMap(
[
flc.LeafletTileLayer()
],
center={
'lng': 106.573344,
'lat': 29.560087
},
zoom=13,
editToolbar=True,
style={
'width': '100%',
'height':'100%',
}
)
],
id='gi_' + str(2),
key=str(2),
style={
'display': 'block',
}
),
# for i in range(5)
],
layouts=[
dict(
i=str(i),
x=0,
y=i,
w=6,
h=4
)
for i in range(3)
],
cols=6,
rowHeight=75,
placeholderBorderRadius='5px',
margin=[25, 25],
),
],
style={
'height':'calc(100vh - 100px)',
'overflow-y':'scroll',
}
)
],
# f'report_{origin_max_key+1}',
id='affix-container-demo',
style={
'fontSize': 28,
'display': 'block',
'overflow':'hidden'
},
)
}
],
str(origin_max_key+1),
no_update,
]
elif ctx.triggered_id == 'tabs-add-delete-demo':
return [
[
item
for item in origin_items
if item['key'] != latestDeletePane
],
'1' if latestDeletePane == activeKey else no_update,
no_update
]
return no_update
pass
Now there's no more need for ExecuteJS!!
from feffery-antd-components.
Related Issues (20)
- AntdMenu top and bottom buttons HOT 1
- Large icon size for AntdMenu HOT 1
- Import feffery_antd_components break dash-chart-editor HOT 2
- Sidebar active issue HOT 1
- AntdTab + FefferyGrid + LeafletMap: Map only good for latest tab. HOT 3
- Bug: displayed data different from available options HOT 4
- icon相关参数组件添加组件型支持 HOT 1
- 引入额外的通用外部图标使用方法
- Change mask color for AntdDrawer HOT 1
- AntdBreadcrumb增添节点点击监听功能
- AntdTable增加自定义筛选 HOT 4
- [BUG] AntdTable pagination["current"]在某些情况下与UI右下角标不一致 HOT 1
- 希望AntdTabale新增一个参数，回调被编辑的列名，类似于recentlyCellClickColumn HOT 1
- Double Click and Rename AntdTabs HOT 3
- Trying to achieve a table in an expanded row of a table HOT 7
- Searchable Tree Component HOT 2
- 在AntdTable中引入自定义单元格元素后，行监听属性（如selectedRows、recentlySwitchRow等）会报错，进而影响整个组件的正常功能 HOT 2
- Support of FloatButton HOT 1
- [BUG]经测试fac0.2.10rc16版本AntdTable的data参数中存在None时会报错，回退至0.2.9则正常 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from feffery-antd-components.