@yavordashew

@yavordashew

Forum Replies Created

Viewing 13 posts - 166 through 178 (of 178 total)
1 2 3 … 10 11 12
  • Author
    Posts
  • January 5, 2021 at 1:50 pm in reply to: smart window not displaying footer #101286
    yavordashew
    Member

    Hi davout,
    When using the ‘smart-window’ component you should set the ‘opened’ property to a boolean value.
    If you want the window to be visible you can set the value to ‘true’.
    Also the ‘template’ must not be in the ‘smart-window’ tag.You should place the ‘template’ after your <app-root> tag with its corresponding id.
    I have made a little code snippet for you with the corrections you need to make.
    For your app.component.html file :
    <smart-window
    label=”{{taskEditService.title}}”
    [opened]=”true”
    [windowParent]=”‘body'”
    [headerButtons]=”[‘close’,’minimize’,’pin’,’collapse’]”
    [footerTemplate]=”‘footerTemplate'”
    [footerPosition]=”‘bottom'”
    (onClose)=”taskEditService.hide()” >
    </smart-window>
    In your main.html (main.html name is just for example) after the <app-root> tag, like this:
    <body>
    <app-root>Loading… </app-root>
    <template id=”footerTemplate”>
    <smart-button class=”flat”>Save</smart-button>
    <smart-button class=”flat”>Restore</smart-button>
    </template>
    </body>
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    January 4, 2021 at 12:23 pm in reply to: smart-window as floating data input form? #101284
    yavordashew
    Member

    Hi davout,
    I have another code snippet for your requirements.
    With adding the following code it will position the window inside the container to the right edge and it will be centered vertically within the container.
    Note that by default the ‘<smart-window>’ component will be centered vertically without adding additional code.
    .smart-window:not(.smart-container){
    right: 0 ;
    margin-left: auto;
    }
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/
     

    January 4, 2021 at 12:20 pm in reply to: how to create docking layout dynamically using java script and jquery? #101283
    yavordashew
    Member

    Hi kaltura,
    I have made a code snippet for you which I think covers your requirements and achieves the functionality you want.
    In your html file we have this code :
    <body>
    <smart-docking-layout ></smart-docking-layout>
    <br><br> <br>
    <smart-docking-layout id=’dockingLayout2′ ></smart-docking-layout>
    </body>
    And in your javascript file we have the following code :
    const secondDock = document.getElementById(‘dockingLayout2’); // the docking layout component in which we want to drag the tab into
    docking.addEventListener(‘stateChange’, function(event ){
    var movedTab= event.detail.item
    secondDock.dock(movedTab) /*here we use the ‘dock’ method of the docking layout component, you can also use the other methods like(insertIntoTop, insertIntoBottom and etc.)*/
    });
     
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/
     

    January 4, 2021 at 9:17 am in reply to: smart-window as floating data input form? #101281
    yavordashew
    Member

    Hi davout,
    For you case the ‘<smart-window>’ component will be suitable for your requirements.

    • The smart-window component has the option to be repositioned by the user by ‘drag & drop’ .
    • Also the component can be positioned inside a container parent as shown in this demo: https://www.htmlelements.com/angular/demos/window/inside-container/ or you can position it by using CSS to position it according to your needs inside the container as shown in the code snippet below:

    /* This will position the window in the top left corner of the container */
    .smart-window:not(.smart-container){
    top: 0;
    left: 0;
    }

    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 30, 2020 at 9:34 am in reply to: how to create docking layout dynamically using java script and jquery? #101277
    yavordashew
    Member

    Hi kaltura,
    I’m happy to help you and make things work!
    Unfortunately our component doesn’t have the functionality to drag content from one component to another.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 30, 2020 at 7:50 am in reply to: how to create docking layout dynamically using java script and jquery? #101275
    yavordashew
    Member

    Hi kaltura,
    Thank you for getting back to us.
    If you want to add new tab in a tab window you can achieve this by adding new object into the ‘items’ array which can be achieved for example as shown in the code below.
    var tabsWindowObject =
    {
    type: ‘LayoutPanel’,
    id: ‘Your Id’,
    label: ‘Solution Explorer’,
    items: [{
    label: ‘Solution Explorer’,
    content: ‘The content you want to add’
    }],
    tabPosition: ‘hidden’
    };
    //New Tab  object
    var newTabInsideTabWindow = {
    label: ‘Another Solution Explorer’,
    content: ‘Another content you want to add’
    }
    //Inserting the New Tab in the items array
    tabsWindowObject.items.push(newTabInsideTabWindow)
    const dockinglayout = document.querySelector(‘smart-docking-layout’);
    dockinglayout.insertIntoTop(1,tabsWindowObject);
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 29, 2020 at 10:01 am in reply to: how to create docking layout dynamically using java script and jquery? #101272
    yavordashew
    Member

    Hi kaltura,
    For your case its better to use insertIntoTop() function as shown in the code snippet below.In the tabsWindowObject you can customize
    the code according to your needs and in the insertIntoTop() function ‘1’ indicates the position where the tab to be added.
    var tabsWindowObject =
    {
    type: ‘LayoutPanel’,
    id: ‘Your Id’,
    label: ‘Solution Explorer’,
    items: [{
    label: ‘Solution Explorer’,
    content: ‘The content you want to add’
    }],
    tabPosition: ‘hidden’
    };
    const dockinglayout = document.querySelector(‘smart-docking-layout’);
    dockinglayout.insertIntoTop(1,tabsWindowObject);
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 23, 2020 at 9:52 am in reply to: info-button on smart -passord-text- box #101265
    yavordashew
    Member

    Hi AURAGARD,
    For this case again I have a neat solution with CSS, its using Font Awesome 5 icons, and you can change the icon by changing the unicode with the unicode for the icon you want.
    Quick example: you can see what is the unicode for each icon by going to https://fontawesome.com/ choose an icon and then just copy the unicode for it and place it in the ‘content’ line.
    One thing to note is that you need to include a CDN link for Font Awesome 5 in the head tag of your html file:
    <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”&gt;
    Also place this code in your CSS file, this snippet is already with info icon but you can replace it with any icon from Font Awesome.
    .smart-password-text-box .smart-password-icon:before{
    color:#000;
    content: ‘\f05a’;   /* Change the unicode in this line to switch the icon, but replace the code after the ‘\’ sign */
    font-family: ‘Font Awesome 5 Free’;
    font-style: normal;
    font-weight: 900;
    position:absolute;
    overflow: visible;
    font-size:20px;
    z-index: 9;
    }
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 22, 2020 at 2:30 pm in reply to: show-password-strength #101258
    yavordashew
    Member

    Hi AURAGARD,
    I have come up with a solution for your case.
    Add the code below to your CSS file, also note that the code here includes the CSS in case you are using the strength power template.
    .smart-input.outlined{
    overflow: visible;
    }
    .smart-input .smart-container{
    position: initial;
    }
    smart-password-text-box {
    margin: 50px;
    }
    .password-strength {
    width: auto;
    }
    .strength-meter {
    margin: 5px 5% 0px 5%;
    width: 90%;
    height: 10px;
    border: lightgray solid 1px;
    }
    smart-password-text-box .strength-meter {
    background-clip: content-box;
    box-sizing: border-box;
    }
    smart-password-text-box[show-password-strength] .smart-password-short .strength-meter {
    background-color: red;
    padding-right: 80%;
    }
    smart-password-text-box[show-password-strength] .smart-password-weak .strength-meter {
    background-color: orange;
    padding-right: 60%;
    }
    smart-password-text-box[show-password-strength] .smart-password-far .strength-meter {
    background-color: yellow;
    padding-right: 40%;
    }
    smart-password-text-box[show-password-strength] .smart-password-good .strength-meter {
    background-color: deepskyblue;
    padding-right: 20%;
    }
    smart-password-text-box[show-password-strength] .smart-password-strong .strength-meter {
    background-color: green;
    padding-right: 0%;
    }
    smart-password-text-box smart-tooltip .smart-tooltip-content {
    border-radius: 2px;
    }
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 22, 2020 at 12:57 pm in reply to: show-password-strength #101257
    yavordashew
    Member

    Hi AURAGARD,
    I will take a look at your specific case and will get back to you as soon as possible.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 22, 2020 at 12:07 pm in reply to: Apply Style to the Group Summary and Remove sum text from the description #101256
    yavordashew
    Member

     
    Hi Ronak,
    Thank you for your inquiry.
    For your particular requirements the best solution is to add the following piece of code to your app.component.ts file which change the ‘Messages’ ‘sum’ property value:
    ngAfterViewInit(): void {
    const grid = this.grid
    grid.messages[‘en’][‘sum’] = ‘{{value}}’;
    grid.refresh();
    this.init();
    }
    As for styling you can use our CSS variables:
    –smart-grid-cell-font-size for the font size of the cells,
    –smart-background-color for the color of the text in the cells,
    –smart-background for the background color of the cells.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 21, 2020 at 12:18 pm in reply to: show-password-strength #101250
    yavordashew
    Member

    Hi AURAGARD,
    For your first question regarding the tooltip-arrow, the arrow doesn’t work because this option is deprecated.
    For your second question I would suggest to check this demo https://www.htmlelements.com/demos/passwordtextbox/strength-template/ or if u want to change the styles of the tooltip you can access its properties by using its tag name- ‘smart-tooltip’.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    December 21, 2020 at 9:30 am in reply to: show-password-icon #101249
    yavordashew
    Member

    Hi AURAGARD,
    For your issue with our component a solution will be to add ‘z-index:9;’ property to the ‘.smart-password-icon’ class in your css file.
    Here is the code snippet:
    .smart-password-icon{
    z-index:9;
    }
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

  • Author
    Posts
Viewing 13 posts - 166 through 178 (of 178 total)
1 2 3 … 10 11 12