Products

[yavordashew]

Hi Tulio,
I tested the SmartCarousel component with the latest version and everything works as intended.
If you can create a complete code example which reproduces the issue we can be able to give you a solution about 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/

[yavordashew]

Hi kboughaba,
By default the Scheduler component does not support this functionality by default but I have created a workaround how to achieve this functionality and we bind for the insertItem event.
In your app.component.ts:

  onItemInsert(event) {
    const detail = event.detail,
        item = detail.item;
    setTimeout(() => {
      let schedulerEvents = document.querySelectorAll('.smart-scheduler-event');
      let schedulerEventsCount = schedulerEvents.length;
      schedulerEvents[schedulerEventsCount - 1 ].classList.add('new-event-class');
    }, 100);
}

and in your app.component.html:

<smart-scheduler #scheduler id="scheduler" [dataSource]="dataSource" [view]="view" [views]="views"
    [hideAllDay]="hideAllDay" [hourStart]="hourStart" [hourEnd]="hourEnd" [nonworkingDays]="nonworkingDays"
    [nonworkingHours]="nonworkingHours" [hideNonworkingWeekdays]="hideNonworkingWeekdays"
    [firstDayOfWeek]="firstDayOfWeek" [viewSelectorType]="viewSelectorType" [groups]="groups"
    [groupTemplate]="groupTemplate" [timelineDayScale]="timelineDayScale"
    [timelineHeaderFormatFunction]="timelineHeaderFormatFunction" [resources]="resources"
    (itemInsert)="onItemInsert($event)"
    >
</smart-scheduler>

and also in your app.component.css:

.smart-scheduler-event.new-event-class{
    --smart-scheduler-event-background: red!important;
    --smart-scheduler-event-focus:red!important;
    --smart-scheduler-event-hover:red!important;
}

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 Michele,
Usually our library is compatible with others, however I have tested the provided code and the text selection problem could be coming from the Monaco Editor, but I wasn’t able to completely reproduce the issue.
I also tested the SmartDockingLayout with our and native input elements and they worked as intended.
Would you, please, share a bit more information on your testing environment such as – which version of Safari you are using and version of SmartUI.
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,
Yes you can do that with the following code snippet:

smart-number-input {
    width: 80px;
}

More information about this is also available in the documentation section for the component:
https://www.htmlelements.com/docs/input-css/
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 Najmedine Mannaii,
The variable smartgrid is a selector for the SmartGrid component.
For example you can select the SmartGrid like so:

let smartgrid =  document.querySelector('smart-grid');

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 ORE,
Yes, this is unwanted behavior.
Anyway I have created a temporary solution which resolves the issue.
Just add the following CSS snippet:

.smart-tabs[vertical] .smart-tabs-content-section,
.smart-tabs[vertical] .smart-tabs-header-items{
    height: auto;
}

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 Yang Zhang,
Its better to create a code example that reproduces the issue, videos are useful but not so much as a code, because its best to reproduce the problem in order to be able to give you a solution about and additionally there is no link for the video.
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 Jozef,
With the shared code example I was able to get a bit more context of your use case and I was able to resolve your issue.
In your app.component.html file:

<div id="container">
    <smart-docking-layout #docking [layout]="layout"></smart-docking-layout>
    <smart-slider #slider></smart-slider>
    <smart-multiline-text-box #multilinetextbox></smart-multiline-text-box>
    <popup></popup>
</div>

In your app.componen.css file:

body, html{
	width: 100%;
	height: 100%;
}
#container {
	width: 100%;
	height: 100%;
	position: absolute;
}
smart-slider {
	margin-top: 100px;
}
smart-docking-layout {
	width: 100%;
	height: 100%;
}

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 Jozef,
Thank you for the additional information.
Another option for you could be to set the height and the width of the smart-window component to percentage values like so:

smart-window {
	--smart-window-default-height: 50%;
	--smart-window-default-width: 50%;
}

Also in order for the window to be positioned in the center it must have certain values like percentages or pixels.
If its possible to create a code example that showcases the behavior from your last reply it will be best, so that we are able to give you a solution about it and to assess the use 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 Josef.Lukac,
In situation when the resources for the window will be different size depending on your use case you can set these CSS variables for example like so:

smart-window {
	--smart-window-default-height: auto;
	--smart-window-default-width: 50%;
}

This way the window will take the half width of the parent container and height will be set depending of the amount of content in 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/

[yavordashew]

Hi davout,
When you set the ‘dateStart’ and ‘dateEnd’ to the same value its not a logical bug that the event is not displayed, because when you set it like so the entry’s value is basically ‘0’.
In other words- it should always have a ‘starting date’ and ‘ending date’ in order to be displayed( determines which part it will take in the SmartScheduler).
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,
The functionality you want to have can be achieved via CSS.
A quick code snippet which ‘hides’ the header of the Scheduler:

.smart-scheduler-header{
    visibility: hidden;
}

Just in case you can take a look at the headerTemplate property which overrides the default one.
Demo using this property: https://www.htmlelements.com/demos/scheduler/travel-schedule/index.htm
And a quick code snippet hiding the header using headerTemplate property:

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'day',
            dataSource: data,
            hourStart: 9,
            hourEnd: 18,
            firstDayOfWeek: 1,
            headerTemplate: (header) => {
                header.style.visibility = "hidden";
            },
        };
    }
});

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 Sebastian Calvo,
I have prepared a quick code example which showcases the functionality you stated.
//In your App.jsx file:

	handleAddGroupToClick(event) {
		const newItemsGroup = document.createElement('smart-tree-items-group');
		newItemsGroup.innerHTML = 'Capital letters<smart-tree-item>Α</smart-tree-item><smart-tree-item>Γ</smart-tree-item>';
		newItemsGroup.expanded = true;
		this.tree.current.addAfter(newItemsGroup, "0");
		event.target.disabled = true;
	}
	render() {
		return (
			<div>
				<Tree id="tree1" ref={this.tree} scrollMode="scrollbar" className="animation" selectionMode="oneOrMany"
					showLines dataSource={this.treeDataSource} displayMember="label" valueMember="value"></Tree>
				<button onClick={this.handleAddGroupToClick.bind(this)}> Add group</button>
			</div>
		);
	}
}

Also we have demo regarding this:
https://www.htmlelements.com/demos/tree/add-remove-items/
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 Maserati,
We do not recommend making changes to the smart.default.css file because this could lead to unwanted behavior of the components.
When you want to change styling of a component its best to do it through its CSS variables or selector.
For example if you want to set up the font-size in SmartGanttChart:

    smart-gantt-chart {
        width: 100%;
        height: auto;
        --smart-font-size: 25px;
    }

More info about the CSS variable and selectors you can find the documentation for each component.
For the GanttChart:
https://www.htmlelements.com/docs/gantt-css/
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,
The SmartKanban doesn’t have events on selection of tasks, but I have prepared a code example which enables you to have this functionality:

        this.kanban.addEventListener ('click', (event: MouseEvent): void => {
            if (event.shiftKey) {
                const selectedTasks: any=  document.querySelectorAll('.smart-kanban-task[selected]');
                console.log(selectedTasks);
            }
        })

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/

[Author]

Posts