gentics / gentics-ui-core Goto Github PK

How to reproduce

• place gtx-dropdown component on the far right of the page, use width trigger
• set some content in dropdown to take for example 74px

<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;
    }
}

Related issue:
https://jira.gentics.com/browse/SUP-11853?focusedCommentId=168395&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-168395

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.

The model always returns a number, but it should return null or undefined if the input is empty.

https://github.com/gentics/gentics-ui-core/blob/master/src/components/input/input.component.ts#L214-L220

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;
}