fix: child table ui issue with scroll
This commit is contained in:
Ejaaz Khan
parent
fc1c3f895a
commit
2de0ea068b
2 changed files with 88 additions and 43 deletions
|
|
@ -10,6 +10,7 @@ export default class GridRow {
|
|||
this.columns_list = [];
|
||||
this.row_check_html = '<input type="checkbox" class="grid-row-check">';
|
||||
this.make();
|
||||
this.setup_tab_listeners();
|
||||
}
|
||||
make() {
|
||||
let me = this;
|
||||
|
|
@ -269,11 +270,15 @@ export default class GridRow {
|
|||
}
|
||||
});
|
||||
} else if (this.show_search) {
|
||||
this.row_check = $(`<div class="row-check col search"></div>`).appendTo(this.row);
|
||||
this.row_check = $(`
|
||||
<div class="row-check col search">
|
||||
<input type="text" class="form-control input-xs text-center invisible">
|
||||
</div>`).appendTo(this.row);
|
||||
|
||||
this.row_index = $(
|
||||
`<div class="row-index col search">
|
||||
<input type="text" class="form-control input-xs text-center" >
|
||||
<span style="width: 33px;" class="d-block"></span>
|
||||
</div>`
|
||||
).appendTo(this.row);
|
||||
|
||||
|
|
@ -982,29 +987,7 @@ export default class GridRow {
|
|||
$col.field_area = $('<div class="field-area"></div>').appendTo($col).toggle(false);
|
||||
$col.static_area = $('<div class="static-area ellipsis"></div>').appendTo($col).html(txt);
|
||||
|
||||
$(document).ready(function () {
|
||||
let $scrollBar = $(".grid-scroll-bar");
|
||||
let form_grid = $(".form-grid");
|
||||
let grid_container = $(".form-grid-container");
|
||||
let grid_scroll_bar_rows = $(".grid-scroll-bar-rows");
|
||||
// Make sure the grid container is scrollable
|
||||
$scrollBar.on("scroll", function (event) {
|
||||
grid_container = $(event.currentTarget).closest(".form-grid-container");
|
||||
form_grid = $(event.currentTarget).closest(".form-grid");
|
||||
grid_scroll_bar_rows = $(event.currentTarget).closest(".grid-scroll-bar-rows");
|
||||
|
||||
var scroll_left = $(this).scrollLeft();
|
||||
|
||||
// Sync the form grid's left position with the scroll bar
|
||||
form_grid.css("position", "relative");
|
||||
form_grid.css("left", -scroll_left + "px");
|
||||
$(this).css("margin-left", scroll_left + "px");
|
||||
});
|
||||
|
||||
$scrollBar.css("width", grid_container.width());
|
||||
|
||||
grid_scroll_bar_rows.css("width", form_grid[0].scrollWidth);
|
||||
});
|
||||
this.handle_scroll_bar();
|
||||
|
||||
// set title attribute to see full label for columns in the heading row
|
||||
if (!this.doc) {
|
||||
|
|
@ -1021,6 +1004,51 @@ export default class GridRow {
|
|||
return $col;
|
||||
}
|
||||
|
||||
handle_scroll_bar() {
|
||||
$(document).ready(function () {
|
||||
let $scrollBar = $(".grid-scroll-bar");
|
||||
let form_grid = $(".form-grid");
|
||||
let grid_scroll_bar_rows = $(".grid-scroll-bar-rows");
|
||||
let parent_field_name = "";
|
||||
let grid_width = 0;
|
||||
let grid_body_width = 0;
|
||||
form_grid.each((grid_index, grid) => {
|
||||
parent_field_name = $(grid)
|
||||
.closest("[data-fieldname][data-fieldtype]")
|
||||
.attr("data-fieldname");
|
||||
grid_width = $($(grid)[0]).width();
|
||||
grid_body_width = $(
|
||||
'div[data-fieldname="' + parent_field_name + '"] .grid-body'
|
||||
).width();
|
||||
|
||||
$('div[data-fieldname="' + parent_field_name + '"] .grid-scroll-bar').width(
|
||||
grid_width
|
||||
);
|
||||
$('div[data-fieldname="' + parent_field_name + '"] .grid-scroll-bar-rows').width(
|
||||
grid_body_width + (grid_width != grid_body_width ? 30 : 0)
|
||||
);
|
||||
});
|
||||
|
||||
// Make sure the grid container is scrollable
|
||||
$scrollBar.on("scroll", function (event) {
|
||||
grid_scroll_bar_rows = $(event.currentTarget).closest(".grid-scroll-bar-rows");
|
||||
|
||||
var scroll_left = $(this).scrollLeft();
|
||||
|
||||
// Sync the form grid's left position with the scroll bar
|
||||
form_grid.css("position", "relative");
|
||||
form_grid.css("left", -scroll_left + "px");
|
||||
$(this).css("margin-left", scroll_left + "px");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setup_tab_listeners() {
|
||||
$(".nav-link").on("shown.bs.tab", () => {
|
||||
this.handle_scroll_bar();
|
||||
});
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.toggle_editable_row(true);
|
||||
return this;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
border: 1px solid var(--table-border-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: var(--text-color);
|
||||
min-height: 150px;
|
||||
background-color: var(--subtle-accent);
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
}
|
||||
|
||||
&.with-filter {
|
||||
height: 64px;
|
||||
height: 66px;
|
||||
}
|
||||
.filter-row {
|
||||
background-color: var(--bg-color);
|
||||
|
|
@ -33,7 +34,6 @@
|
|||
.search {
|
||||
// TODO: Align with table grid without overwriting padding if possible
|
||||
padding: 4px 7px 4px 7px !important;
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,6 +190,7 @@
|
|||
|
||||
.row-index {
|
||||
text-align: center;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.grid-row > .row {
|
||||
|
|
@ -230,7 +231,9 @@
|
|||
--input-disabled-bg: var(--gray-50);
|
||||
.grid-static-col {
|
||||
padding: 0px !important;
|
||||
height: 32px;
|
||||
}
|
||||
.grid-static-col.row-index {
|
||||
padding: var(--grid-padding) !important;
|
||||
}
|
||||
|
||||
.frappe-control[data-fieldtype="Select"].form-group .select-icon {
|
||||
|
|
@ -328,6 +331,9 @@
|
|||
line-height: 1.3 !important;
|
||||
}
|
||||
}
|
||||
.data-row div[data-fieldname="options"] {
|
||||
height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
@ -605,39 +611,51 @@
|
|||
grid-auto-rows: min-content;
|
||||
.grid-static-col.col-xs-1 {
|
||||
flex: 1 0 60px;
|
||||
width: 60px;
|
||||
}
|
||||
.grid-static-col.col-xs-2 {
|
||||
flex: 1 0 90px;
|
||||
flex: 1 0 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.grid-static-col.col-xs-3 {
|
||||
flex: 1 0 120px;
|
||||
flex: 1 0 140px;
|
||||
width: 140px;
|
||||
}
|
||||
.grid-static-col.col-xs-4 {
|
||||
flex: 1 0 150px;
|
||||
flex: 1 0 200px;
|
||||
width: 200;
|
||||
}
|
||||
.grid-static-col.col-xs-5 {
|
||||
flex: 1 0 200px;
|
||||
flex: 1 0 250px;
|
||||
width: 250px;
|
||||
}
|
||||
.grid-static-col.col-xs-6 {
|
||||
flex: 1 0 250px;
|
||||
flex: 1 0 300px;
|
||||
width: 300px;
|
||||
}
|
||||
.grid-static-col.col-xs-7 {
|
||||
flex: 1 0 300px;
|
||||
flex: 1 0 350px;
|
||||
width: 350px;
|
||||
}
|
||||
.grid-static-col.col-xs-8 {
|
||||
flex: 1 0 350px;
|
||||
flex: 1 0 400px;
|
||||
width: 400px;
|
||||
}
|
||||
.grid-static-col.col-xs-9 {
|
||||
flex: 1 0 400px;
|
||||
flex: 1 0 450px;
|
||||
width: 450px;
|
||||
}
|
||||
.grid-static-col.col-xs-10 {
|
||||
flex: 1 0 450px;
|
||||
flex: 1 0 500px;
|
||||
width: 500px;
|
||||
}
|
||||
.grid-static-col.col-xs-11 {
|
||||
flex: 1 0 500px;
|
||||
flex: 1 0 550px;
|
||||
width: 550px;
|
||||
}
|
||||
.grid-static-col.col-xs-12 {
|
||||
flex: 1 0 550px;
|
||||
flex: 1 0 600px;
|
||||
width: 600px;
|
||||
}
|
||||
.grid-row > .row .col:last-child,
|
||||
.grid-row > .dialog-assignment-row .col:first-child,
|
||||
|
|
@ -650,10 +668,13 @@
|
|||
max-width: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
.grid-heading-row .grid-row .data-row.row,
|
||||
.grid-body .rows .grid-row .data-row.row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-scroll-bar {
|
||||
display: none;
|
||||
overflow-x: auto;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
|
@ -670,10 +691,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: map-get($grid-breakpoints, "md")) {
|
||||
.grid-scroll-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-column.col-sm-6 .form-grid {
|
||||
.row-index {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue