Products

[yavordashew]

Hi Suriya,
If you want to change the icon use the CSS variable of the icon to change it according to your needs like:
--smart-icon-attention-circled: 'your icon'
Or set it to other variable:

.smart-grid{
    --smart-icon-attention-circled: var( --smart-icon-docs )
}

We are aware that we have some missing stuff in the documentation but we work on to adding more and more to it.
However if you want to see more of the CSS variables you can do so by inspecting the element and in the ‘Styles’ sidebar you can find all of them.
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi david,
I did some testing on the validator in different situations but I was unable to reproduce the issue that you do.
So I would like to ask you to create a code example which reproduces this behavior for us in order to give a solution for your case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Dark Beccio,
When I tested the validator I was unable to reproduce both of the situations that you encounter.
That is why I’m going to ask you to create a code example for us in order to assess the situation and give you solution about it.
In the mean time I can suggest you to check if you have included all the necessary scripts and styles for the validator.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi tullio0106,
If you want to get the value of the smart-checkbox I have a code snippet made with the demo I send you in my previous reply:

 let checkBox = document.getElementById('checkBox');
 checkBox.addEventListener('change', (event) => {
        console.log(event.detail.value)
    })

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

[yavordashew]

Hi edilsonamaral,
If you want to disable ripple effect of the elements the easiest way to do so by using the following code snippet:

.smart-ripple{
    transform: initial!important;
    transition: initial!important;
    animation-duration: 0s!important;
}

This is the CSS class responsible for this effect.
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi tullio0106,
In order for you to achieve the functionality you want you will have to bind for the onchange event.
I have a code snippet using your code example:
<smart-check-box id="checkBox" onchange="alert('Done');">Check Box</smart-check-box>
Also you can take a look at the following demo:
https://www.htmlelements.com/demos/checkbox/events/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Clintre,
If you prefer to have the functionality as a ‘custom developed feature’ you can contact sales@jqwidgets.com anytime.
However I have prepared a code snippet which showcases how to achieve the functionality you want:
//In your JS file:

window.onload = () =>{
    let kanban = document.getElementById('kanban');
    kanban.addEventListener('open', ()=> {
        let editorContainer = document.getElementsByClassName('editor-container'),
            progressInput = document.querySelectorAll('smart-numeric-text-box');
        editorContainer[1].style.display = 'block';
        progressInput[0].style.display = 'none';
    })
}

And also add the following CSS:

.smart-kanban-task-progress-container,
#kanbanLabelProgress{
    display: none!important;
}
.smart-kanban-sub-task{
    font-size: 20px;
}

Note that I have used this demo for a base for the code snippet:
https://www.htmlelements.com/demos/kanban/editable/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi santhosh,
Testing with the information that you provided I was unable to reproduce the issue as you do.
As far as I can comprehend from the shared info you have the smart-tree component in parent component and if the parent has a set height and the smart-tree component has overflowing items the scrollbar is visible.
I have a little code example:

<div class="tree-container">
   <smart-tree #tree id="tree" [scrollMode]="'scrollbar'" [selectionMode]="'oneOrMany'" [showLines]="true"></smart-tree>
</div>

And in the CSS:

.tree-container{
  height: 200px;
}
smart-tree {
	width: 100%;
	height: 100%;
}

Let me know if that works for you but if this is not the case it will be better to share a bit more context of your situation!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Clintre,
Thank you for the detailed information and code snippet!
This way I was able to further test your case and come to a solution for it.
In order for your use case to work properly you need to bind for DOMContentLoaded event of the ‘document’ like so:

document.addEventListener('DOMContentLoaded', () => {
  async function fetchData() {
    let response = await fetch('/server.php');
    if (response.status === 200) {
        let kbData = await response.json();
        window.Smart('#kanban', class {
            get properties() {
                return {
                    addNewButton: true,
                    collapsible: true,
                    dataSource: kbData.tasks,
                    editable: true,
                    taskActions: true,
                    taskDue: true,
                    taskProgress: true,
                    userList: true,
                    users: kbData.users,
                    columns: [
                        { label: 'To do', dataField: 'toDo' },
                        { label: 'In progress', dataField: 'inProgress' },
                        { label: 'Testing', dataField: 'testing' },
                        { label: 'Done', dataField: 'done', addNewButton: false }
                    ]
                };
            }
        });
        return kbData
    }
}
fetchData();
})

Also the same result can be achieved if you move all your scripts in the <head> tag.
And I strongly recommend you to add the following code in your php script when encoding the data into json like so:

header('Content-Type: application/json');
echo json_encode($out);

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

[yavordashew]

Hi tullio0106,
First I would suggest you take a look at the CSS API for the input if you need to change the styles of the component(it also has for the texbox element):
https://www.htmlelements.com/docs/input-css/
And it will be better to explain your use case with a bit more detail about it in order to give a definite solution about it.
However if you want select for styling a certain element inside of SmartInput for example you can do so like this:
//in your HTML file:
<smart-input class="input-class" placeholder="Empty"></smart-input>
//in your CSS file:

 .input-class input{
    background-color: red;
   }

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

[yavordashew]

Hi tullio0106,
If you want to introduce only numbers in the input you will have to use NumberInput component and the reason for the NumericInput to introduce characters is that it can be used with ‘#’ or ‘kg’ signs for example.
Here is a link for the NumberInput component demo:
https://www.htmlelements.com/demos/input/number-input/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Clintre,
Thank you for contacting us!
The reason for your case is that when you want to assign a task to ‘userId’ you need also to set the userList property to true.
I have tested the kanban component with the same data that you have and it works as it should.
Here is the code snippet of the kanban:

window.Smart('#kanban', class {
    get properties() {
        return {
            collapsible: true,
            dataSource: data,
            addNewButton: true,
            editable: true,
            taskActions: true,
            taskDue: true,
            taskProgress: true,
            userList: true,
            users: [
                { id: 0, name: 'Andrew' },
                { id: 1, name: 'Anne' },
                { id: 2, name: 'Janet' },
                { id: 3, name: 'John' },
                { id: 4, name: 'Laura'}
            ],
            columns: [
                { label: 'To do', dataField: 'toDo' },
                { label: 'In progress', dataField: 'inProgress' },
                { label: 'Testing', dataField: 'testing' },
                { label: 'Done', dataField: 'done' }
            ]
        };
    }
});

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

[yavordashew]

Hi davout,
We a component smart-tooltip which in in your case could be very useful.
Also I have created a little code snippet on how to use it with smart-button component:
//In your app.compoent.html:

<smart-button #button id="button"
              class="btn btn-1 btn-sep icon-info">
              Button
</smart-button>
<smart-tooltip #tooltip id="tooltip"
                [selector]="'button'"
                [arrow]="true"
                [position]="'right'">
                This is a tooltip for smartButton
</smart-tooltip>

And in your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from 'smart-webcomponents-angular/button';
import { TooltipModule } from 'smart-webcomponents-angular/tooltip';
import { AppComponent } from './app.component';
@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, ButtonModule, TooltipModule ],
    bootstrap: [ AppComponent ],
	entryComponents: [ AppComponent ]
})
export class AppModule { }

Also you can check the demos regarding the tooltip:
https://www.htmlelements.com/demos/tooltip/overview/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi tullio0106,
Thank you for contacting us!
I have tested the smart-multiline-text-box component in Firefox as well but still I was unable to reproduce the issue that you do.
However when you disable the ‘height: auto’ styles the component has more than 10 rows which I think is not the functionality you want to achieve.
If we are to be able to give you proper support it will be best to share a code example of your case because this behavior could be coming not from the component itself.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Michele,
Thank for contacting us and reporting this issue to us!
I have tested the mentioned demo and the issue is present only in Safari.
We have made a work item for this and we will work on to fixing it.
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