Forum Replies Created

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • in reply to: smart elements cpu usage #101094
    Avatar
    B. Markov
    Participant

    Hi Gerhard,

    It is normal a CPU to rise when you scroll through a Grid, because there are calculations being made by the component, sometimes cells formatting, loading of html templates, etc. What we can recommend is, if you do not use the advanced features of the Grid and you do not work with large data set to switch to our lightweight version – the Table component.

    Best regards,
    Boyko Markov

    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Filter button wrong position #101090
    Avatar
    B. Markov
    Participant

    Hi developer09,

    We created work items for both reported issues:

    https://github.com/HTMLElements/smart-webcomponents/issues/3
    https://github.com/HTMLElements/smart-webcomponents/issues/4

    Thank you for the valuable feedback!

    Best regards,
    Boyko Marokv

    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Filter button wrong position #101088
    Avatar
    B. Markov
    Participant

    Hi developer09,

    The issue is a conflict with other scripts and css on the page. When we remove them, it works: https://dotnetfiddle.net/GaLrBG
    We will work on this for the next version to clear these conflicts with other libraries.

    Best regards,
    Boyko Marokv

    Smart UI Team
    https://www.htmlelements.com/

    in reply to: Filter button wrong position #101086
    Avatar
    B. Markov
    Participant

    Hi,

    The javascript code looks OK, except how the Scripts are imported. I suppose that the site.js script is actually loaded in your app, before the smart.grid module. You can try changing the type=”module” to the site.js as well.

    However, in order to test and debug, we will need a complete sample which demonstrates an issue. You can share it online if you wish by using https://dotnetfiddle.net/

    Best regards,
    Boyko Marokv

    Smart UI Team
    https://www.htmlelements.com/

    Avatar
    B. Markov
    Participant

    Hi davout,

    To achieve that you may use this:

    html, body {
       width: 100%; height: 100%; padding: 0; margin: 0;
    }
    
    app-public-home-header {
       display: block;
       width: 100%;
       height: 200px;
       background: #eee;
    }
    
    smart-splitter {
       width: 100%;
       height: 100%;
    }

    Hope this helps.

    Best Regards,
    B. Markov

    in reply to: Applying a theme to the button #100860
    Avatar
    B. Markov
    Participant

    As the theme file is:

    body[theme="dark-red"] {
     	--smart-primary-rgb: 221, 44, 0;
        --smart-primary: rgba(var(--smart-primary-rgb), 1);
        --smart-background: #242424; /* The theme background color. The background color appears behind scrollable content.*/
        --smart-background-color: #fff; /* Text color on top of a background background */
        --smart-surface: #333; /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
        --smart-surface-color: #fff; /* Text color on top of a surface surface */
        --smart-disabled: #535353; /* The theme primary color in disabled state. */
        --smart-disabled-color: #fff; /* Text color on top of a theme background in disabled state */
        --smart-border: #464646; /* The theme background border color */
        --smart-editor-selection: var(--smart-primary);
        --smart-editor-selection-color: var(--smart-primary-color);
        --smart-ui-state-hover: #444;
        --smart-ui-state-color-hover: #fff;
        --smart-ui-state-border-hover: #444;
        --smart-ui-state-active: var(--smart-primary);
        --smart-ui-state-color-active: var(--smart-primary-color);
        --smart-ui-state-border-active: var(--smart-primary);
        --smart-ui-state-focus: #555;
        --smart-ui-state-color-focus: #fff;
        --smart-ui-state-border-focus: #555;
        --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1);
        --smart-ui-state-color-selected: var(--smart-primary);
        --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1);
        --smart-alternation-index0-color: var(--smart-surface-color); /* Alternation color for index0 */
        --smart-alternation-index0-border: var(--smart-surface); /* Alternation border color for index0 */
        --smart-alternation-index0-background: var(--smart-surface); /* Alternation background color for index0 */
        --smart-alternation-index1-color: #111; /*Alternation color for index1 */
        --smart-alternation-index1-border: #9BBB59; /* Alternation border color for index1 */
        --smart-alternation-index1-background: #9BBB59; /* Alternation background color for index1 */
        --smart-alternation-index2-color: #fff; /*Alternation color for index2 */
        --smart-alternation-index2-border: #FC3752; /* Alternation border color for index2 */
        --smart-alternation-index2-background: #FC3752; /* Alternation background color for index2 */
        --smart-scroll-bar-background: #3E3E42;
        --smart-scroll-bar-border: #3E3E42;
        --smart-scroll-bar-thumb-background: #686868;
        --smart-scroll-bar-thumb-border: #686868;
        --smart-scroll-bar-thumb-background-hover: #9E9E9E;
        --smart-scroll-bar-thumb-border-hover: #9E9E9E;
        --smart-scroll-bar-thumb-background-active: #444;
        --smart-scroll-bar-thumb-border-active: #444;
        --smart-scroll-bar-button-background: #3E3E42;
        --smart-scroll-bar-button-border: #3E3E42;
        --smart-scroll-bar-button-color: #999999;
        --smart-scroll-bar-button-background-hover: #3E3E42;
        --smart-scroll-bar-button-border-hover: #3E3E42;
        --smart-scroll-bar-button-color-hover: var(--smart-primary);
        --smart-scroll-bar-button-background-active: #3E3E42;
        --smart-scroll-bar-button-border-active: #3E3E42;
        --smart-scroll-bar-button-color-active: var(--smart-primary);
    }

    it expects a theme attribute set to the document’s body tag.

    Hope this helps you.

    Best Regards,
    Boyko

    in reply to: Auto height not working? #100717
    Avatar
    B. Markov
    Participant

    Hi Aks26,

    Please, provide an example which reproduces the behavior which you report. The problem could be in the Gantt, but also could be caused by something else. We cannot tell from the information, which we have.

    Regards,
    Peter

    Smart UI Team
    https://www.htmlelements.com/

    in reply to: basic usage #100713
    Avatar
    B. Markov
    Participant

    We support Shadow DOM. Smart is one of the first Web Components libraries and can be used for building Web Components.

    To use Smart with LitElement, you can use this approach:

    import { LitElement, html, css } from ‘lit-element’;
    Smart.EnableShadowDOM = true;
    export class SuperElement extends LitElement {
    static get styles() {
    return css`

    `;
    }

    render() {
    return html`
    <link rel="stylesheet" type="text/css" href="https://htmlelements.com/demos/source/styles/smart.default.css"&gt;
    <smart-button>Click me</smart-button>
    `;
    }
    }

    customElements.define(‘super-element’, SuperElement);

    Regards,
    Boyko

    in reply to: basic usage #100709
    Avatar
    B. Markov
    Participant

    Hi,

    These files are included in the button module.

    smart.button.js in modules is a bundle of the necessary files, one of which is smart.element.js. You may look at the online samples, too.

    As far as I see you’re using it with Lit Element which creates a Shadow DOM, then you should add the smart.default.css within that Shadow DOM. Otherwise, as the shadow dom is isolated, that will not allow the outside CSS to style elements in the shadow dom.

    Regards,
    Boyko

    in reply to: according scrolling and spacing #100704
    Avatar
    B. Markov
    Participant

    The ‘expand-mode’ in this case should be “single”, not “singleFitHeight” which fits the height to the available space, but in this case you do not have such space.

     

    Regards,

    Boyko

    https://www.htmlelements.com/

    in reply to: scroll to newly selected item #100702
    Avatar
    B. Markov
    Participant

    Hi,

    The ensureVisible method scrolls to an item: https://www.htmlelements.com/docs/listbox-api/#toc-ensurevisible

    Regards,
    Boyko

    in reply to: Always show drag limit? #100698
    Avatar
    B. Markov
    Participant

    Hi Aks26,

    We will consider making this optional in future versions of our Gantt Chart. Unfortunately, this is not possible in the moment as the feature is not implemented.

    Thanks for the feedback.

     

Viewing 12 posts - 1 through 12 (of 12 total)