Products

[admin]

Hello hansT,
jqx-scroll-bar is a custom element and its visibility is not affected by its parent’s overflow CSS property. You can use jqx-scroll-bar in whatever configuration you like.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Got it. Thank you.
Another questions comes to mind. Can i have the scrollbars visible even though they are not needed in order to view the full content of the page ?

[admin]

Hello hansT,

1. To hide the browser scrollbars, please set overflow: hidden to the HTML element that overflows and shows them.
2. In the change event handler function, the value is received as event.detail.value.

Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
Yes, it’s possible.
To do this, you have to set several properties:
– coerce and customInterval must be set to true
– customTicks must be set to an array with options, in your case – ‘[5, 15 , 55, 85, 100]’
Here is an example:
<smart-tank coerce custom-interval custom-ticks='[5, 15 , 55, 85, 100]'></smart-tank>
Please, take a look also at the example in the demo section of our website:
https://www.htmlelements.com/demos/tank/custom-interval/
It will be helpful for you.
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Michael20,
You can listen for scrollBottomReached or scrollTopReached and insert items when the event is fired. Here’s an example demo
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi pcng618,
smart-radio-button has enableContainerClick property for this purpose.
It allows clicks on the label to be handled the same way as clicks on the radio button’s shape.
Here is a demo:

<smart-radio-button enable-container-click>Radio button 1</smart-radio-button>
<smart-radio-button enable-container-click>Radio button 2</smart-radio-button>

Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello hansT,
To achieve this, please set the property allowToggle to true.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi pcng618,
Here is a code snippet that shows how to achieve this. We hope it is helpful:

<smart-menu id="menu" mode="dropDown" opened>
    <smart-menu-items-group>
        File
        <smart-menu-item shortcut="Ctrl+N">New</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+0">Open</smart-menu-item>
        <smart-menu-items-group>
            Open Containing Folder
            <smart-menu-item>Explorer</smart-menu-item>
            <smart-menu-item>cmd</smart-menu-item>
        </smart-menu-items-group>
        <smart-menu-item shortcut="Ctrl+S" disabled>Save</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+Alt+S" separator>Save As...</smart-menu-item>
        <smart-menu-item shortcut="Alt+F4">Exit</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Edit
        <smart-menu-item shortcut="Ctrl+Z">Undo</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+Y" separator>Redo</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+X">Cut</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+C">Copy</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+V" disabled>Paste</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group drop-down-height="300">
        Encoding
        <smart-menu-item>Encode in ANSI</smart-menu-item>
        <smart-menu-item>Encode in UTF-8</smart-menu-item>
        <smart-menu-item>Encode in UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 LE BOM</smart-menu-item>
        <smart-menu-items-group separator>
            Character sets
            <smart-menu-items-group>
                Cyrillic
                <smart-menu-item>ISO 8859-5</smart-menu-item>
                <smart-menu-item>KOI8-R</smart-menu-item>
                <smart-menu-item>KOI8-U</smart-menu-item>
                <smart-menu-item>Windows-1251</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Chinese
                <smart-menu-item>Big5 (Traditional)</smart-menu-item>
                <smart-menu-item>GB2312 (Simplified)</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Western European
                <smart-menu-item>ISO 8859-1</smart-menu-item>
                <smart-menu-item>ISO 8859-15</smart-menu-item>
                <smart-menu-item>OEM 850</smart-menu-item>
                <smart-menu-item>Windows-1252</smart-menu-item>
            </smart-menu-items-group>
        </smart-menu-items-group>
        <smart-menu-item>Convert to ANSI</smart-menu-item>
        <smart-menu-item>Convert to UTF-8</smart-menu-item>
        <smart-menu-item>Convert to UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 LE BOM</smart-menu-item>
    </smart-menu-items-group>
</smart-menu>

Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
To have such a format, please set the property formatString to ‘dd MMMM yyyy – HH:mm’.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com/

[admin]

Hi hansT,
Smart radio buttons can be grouped via setting their groupName property. In your case 6 buttons in 2 separated groups can be initialized by the following code:

    <smart-radio-button group-name="groupA">Option 1(group A)</smart-radio-button>
    <smart-radio-button group-name="groupA">Option 2(group A)</smart-radio-button>
    <smart-radio-button group-name="groupA">Option 3(group A)</smart-radio-button>
    <smart-radio-button group-name="groupB">Option 1(group B)</smart-radio-button>
    <smart-radio-button group-name="groupB">Option 2(group B)</smart-radio-button>
    <smart-radio-button group-name="groupB">Option 3(group B)</smart-radio-button>

Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Michael20,
You can achieve that by simply setting the properties scrollButtonsPosition to far in order to place the buttons on the far right and scrollButtonsNavigationMode to portrait to change the animation direction. Here’s an example on how to set them as HTML attributes:
<smart-calendar scroll-buttons-navigation-mode="portrait" scroll-buttons-position="far"></smart-calendar>
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Thank you cor pointing out things we should improve in our web components and in our documentation. We will do our best to resolve these as quickly as possible. Some of the documentation pages are actually already updated today – introductiom, accordion, button and calendar docs.

[admin]

Hi pcng618,
By default all drop down custom elements from the Smart framework automatically determine the opening direction of the actual drop down depending on the space available. For example, if there’s not enough space for the drop down to open below the element it will open above it. Regardless you can set a specific position via the dropDownPosition property. Here’s a link to the API with all avaialbe options: modes
Example:

<smart-drop-down-list drop-down-position="top">
 <smart-list-item>A</smart-list-item>
 <smart-list-item>B</smart-list-item>
 <smart-list-item>C</smart-list-item>
</smart-drop-down-list>

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

1. As mentioned before, if you go to the main page of the demos, scroll down to “Sample Applications”, you have a “Form” application listed. But that leads to the DropDownList demo page, where all the forms are just mock-up forms. That’s misleading.
2. It seems that setting “display:block” on all the widgets in the form is mandatory, otherwise you end up with strange, uneven spacing like in my pictures. Thank you for pointing out. Maybe you could add a document describing how to create a proper form.
3. I see. I guess I was mislead by the fact that the TextBox overview page shows the label in one of the animated gifs (see below) and the API page has both label and hint properties listed, without being mentioned that those are experimental features only.

[admin]

Hi PaoloBax,
1. The Sample App is about DropDownList, not about TextBoxes. It is not a Form Sample App, it’s a DropDownList sample app.
2. Here’s a sample with a Form:

3. Hints and Labels are an experimental feature. We did not demonstrate them in our demos.
Best Regards,
B. Markov
SmartHTMLElements
https://www.htmlelements.com

[Author]

Posts