@boikom

@boikom

Forum Replies Created

Viewing 15 posts - 601 through 615 (of 656 total)
  • Author
    Posts
  • in reply to: Nested groups in context menu #99521
    admin
    Keymaster
    Up
    0
    Down

    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

    in reply to: Custom date time format #99520
    admin
    Keymaster
    Up
    0
    Down

    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/

    in reply to: How to group radio buttons #99518
    admin
    Keymaster
    Up
    0
    Down

    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

    in reply to: Calendar arrow direction #99517
    admin
    Keymaster
    Up
    0
    Down

    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

    in reply to: Many issues when creating a simple form #99507
    admin
    Keymaster
    Up
    0
    Down

    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.

    in reply to: DropUp mode #99506
    admin
    Keymaster
    Up
    0
    Down

    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

    in reply to: Many issues when creating a simple form #99505
    admin
    Keymaster
    Up
    0
    Down

    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.

    in reply to: Many issues when creating a simple form #99504
    admin
    Keymaster
    Up
    0
    Down

    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

    in reply to: Many issues when creating a simple form #99496
    admin
    Keymaster
    Up
    0
    Down

    1. Can you please show me the code where the forms are created on that Sample app? In the source code at the bottom of the page I can’t locate any smart-text-box or similar.
    2. I know how to change the style. I just don’t understand why, by default, similar widgets (which usually are side by side in forms) have different styling.
    3. Actually labels are listed among the features in the TextBox overview page. In any case, even if I don’t use labels and hints, the layout has some issues, as you can see in the next picture. I can’t figure out where that extra space after (or before?) some inputs comes from.

    Any help to create that simple form is much appreciated.

    in reply to: Many issues when creating a simple form #99479
    admin
    Keymaster
    Up
    0
    Down

    Hi PaoloBax,
    1. The Sample app opens https://www.htmlelements.com/demos/dropdownlist/overview/. This is not a Fake form. This is a sample built with our web components.
    2. Styling of the Web Components is done in smart.default.css. If you would like to put custom CSS, take it into account that such style could be already defined. In your case, to put custom Background of these Inputs, you should use something like that:

    smart-numeric-text-box .smart-input,
    smart-text-box .smart-input,
    smart-password-text-box .smart-input{
      background:blue;
    }

    3. Hints and Labels are not yet supported. We will add support for these in future versions of our web components. I would suggest you to take a look at the demos and how we use the components.
    4. The roadmap is available here: https://www.htmlelements.com/docs/roadmap/
    5. In general, this is an active project and we make frequent updates with bug fixes and new features.
    Best Regards,
    B. Markov
    SmartHTMLElements
    https://www.htmlelements.com

    in reply to: How to remove window's header section #99477
    admin
    Keymaster
    Up
    0
    Down

    Hi pcng618,
    You can set the ‘headerPosition’ property to ‘none’. This will remove it. More info about the property: https://www.htmlelements.com/docs/window-api/
    Regards,
    B. Markov
    SmartHTMLElements
    https://www.htmlelements.com

    in reply to: Confusing documentation #99475
    admin
    Keymaster
    Up
    0
    Down

    The linked example is empty. In any case I figured it out, thank you.

    in reply to: Confusing documentation #99471
    admin
    Keymaster
    Up
    0
    Down

    Thanks for writing and for the feedback. We will resolve the reported things.
    The download currently includes a file that is combined from the files listed there. The individual files are included only in the commercial version.
    To run the project you have to refer to smart.default.css and smart.elements.js and that’s all. Example: https://codepen.io/pen/?&editable=true Material is the default theme so you don’t need to set anything here. The quick usage examples are all included in the .zip.
    Best Regards,
    Boyko Markov

    in reply to: Change arrow indicator of accordion items #99466
    admin
    Keymaster
    Up
    0
    Down

    Hi hansT,
    You can manipulate(update or remove) accordion’s arrows, via updating the settings of .smart-arrow CSS class.
    To change arrows position in the header you have to update the order, for example order:0 will set the arrow at the beginning of the accordion item’s header block.
    If you want to remove the arrow – use display: none ;
    To change the arrow with a different icon you have to manipulate it’s ::after pseudo-element.
    Best Regards,
    Ivailo Ivanov
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Accordion animation types #99464
    admin
    Keymaster
    Up
    0
    Down

    Hi pcng618,
    The accordion has animation property. This property can be set to:
    – ‘advanced’ (by default) – animations are enabled and the element has ripple effect on click
    – ‘simple’ – animations are enabled, but ripple effect is disabled
    – ‘none’ – animations are disabled
    Best Regards,
    Ivailo Ivanov
    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 15 posts - 601 through 615 (of 656 total)