gentics / gentics-ui-core Goto Github PK
View Code? Open in Web Editor NEWGentics UI Core Framework
Home Page: https://gentics.github.io/gentics-ui-core/
License: Apache License 2.0
Gentics UI Core Framework
Home Page: https://gentics.github.io/gentics-ui-core/
License: Apache License 2.0
The model always returns a number, but it should return null or undefined if the input is empty.
How to reproduce:
Create dx-tree-list
component with enabled load panel
<dx-tree-list>
<dxo-load-panel
[enabled]="true"
></dxo-load-panel>
</dx-tree-list>
loading icon is completely white because borders are set to none
contentnode-ui/node_modules/@gentics/devextreme-styles/styles/_theme.scss:16514
div, table, tr, td,
.dx-treelist-container .dx-treelist-headers .dx-row td,
.dx-treelist-container .dx-treelist-rowsview .dx-data-row td {
border-left: none;
border-right: none;
border-bottom: none;
border-top: none;
}
How to reproduce
<gtx-dropdown-list width="trigger">
Behaviour
Dropdown renders out of the window
Explanation:
so now in gentics-ui-core, width of the container will be 74px
src/components/dropdown-list/dropdown-content-wrapper.component.ts:248
private calculateWidthTrigger(): number {
return this.trigger.offsetWidth + 1;
}
now there is a method which will try to fix positioning of the dialog
const currAlignment = this.calculateAlignment(triggerLeft, containerWidth);
which will also fail, and alignment will be 'left', which will at the end render it outside the window
positionStyles.left = leftPosition + 'px';
When width is set to to default one it renders nicely using this method
private calculateWidthContents(): number {
const content = this.getDropdownContent();
// if the container is wider than the window, we just set the width to take up the full window
if (window.innerWidth < content.offsetWidth) {
return window.innerWidth;
} else {
// adjust the width by 1px once, to eliminate unwanted x-scrollbar when there is a y-scrollbar.
// The `widthHasBeenAdjusted` flag prevents the contents from further widening on subsequent
// calls to calculatePositionStyles()
const adjustment = this.widthHasBeenAdjusted ? 0 : 1;
return content.offsetWidth + adjustment;
}
}
Julian notes:
I also noticed strange behaviour working with these dropdowns. It seemed to calculate the width based on the template (including the interpolation syntax (e.g. "{{ Blabla }}"). Then, after the lifecycle finished, the final text is not as wide, while the box still keeps the same width.
Hello guys,
I want to make gtx-date-time-picker width responsive and I can't.
Basically I have 8 input fields in 2 column grid layout and I want all of them to fill the cell width.
Text and Select fields are working as expected, but the date-time-piker is not filling the width of the grid cell.
How can I fix this small issue?
Thak you!
PS: great job you did with this library, thanks for letting me use it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.