admin's Replies

@boikom

Forum Replies Created

Viewing 12 posts - 916 through 927 (of 927 total)

← 1 2 3 … 60 61 62

Author

Posts
June 22, 2018 at 1:50 pm in reply to: Checkbox selection in Menu #98921

admin
Keymaster

Thank you, Dimitar.

June 22, 2018 at 12:47 pm in reply to: Checkbox selection in Menu #98920

admin
Keymaster

Hi Mike,
This can be achieved by setting the checkboxes attribute to the smart-menu and checkable and check-mode=”checkbox” to the particular smart-menu-items-group. You can see this in action in the “Menu labels” section of the Overview demo.
Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

June 19, 2018 at 2:39 pm in reply to: Header scoll buttons on hover #98898
admin
Keymaster
Hi john1987,
in order to control the visibility of the scroll buttons inside the header section of the element you simply need to changed the <b>overview</b> property to ‘hidden’. When you want to see the buttons again just set the value of the property back to it’s default value ‘auto’. Here’s how to do it:
```
   <script>
        window.onload = function () {
            var tabs = document.querySelector('smart-tabs');
            tabs.addEventListener('mouseenter', function (event) {
                this.overflow = 'auto';
            });
            tabs.addEventListener('mouseleave', function (event) {
                this.overflow = 'hidden';
            });
        }
    </script>
</head>
<body>
    <smart-tabs>
        <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
        <smart-tab-item label="TAB 2">Content 2</smart-tab-item>
        <smart-tab-item label="TAB 3">Content 3</smart-tab-item>
        <smart-tab-item label="TAB 4">Content 4</smart-tab-item>
        <smart-tab-item label="TAB 5">Content 5</smart-tab-item>
        <smart-tab-item label="TAB 6">Content 6</smart-tab-item>
        <smart-tab-item label="TAB 7">Content 7</smart-tab-item>
        <smart-tab-item label="TAB 8">Content 8</smart-tab-item>
        <smart-tab-item label="TAB 9">Content 9</smart-tab-item>
        <smart-tab-item label="TAB 10">Content 10</smart-tab-item>
        <smart-tab-item label="TAB 11">Content 11</smart-tab-item>
    </smart-tabs>
</body>
```
If you have further questions feel free to ask.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com
June 19, 2018 at 7:47 am in reply to: Disable some of the Accordion items #98897

admin
Keymaster

Hi john1987,
To achieve this behavior, you can set pointer-events: none; to this particular item.
This will disable the interaction with it.
Best Regards,
Ivailo
Smart HTML Elements Team
https://www.htmlelements.com

June 15, 2018 at 12:47 pm in reply to: Gauge with big range amplitude #98889
admin
Keymaster
Hi AL,
Please try using smart-gauge configured as follows:
```
<smart-gauge analog-display-type="fill"
            digital-display
            digital-display-position="center"
            start-angle="0"
            end-angle="180"
            min="1"
            max="500"
            value="2"
            logarithmic-scale
            show-ranges
            ranges='[{ "startValue": "1", "endValue": "20", "className": "calm" }, { "startValue": "200", "endValue": "500", "className": "danger" }]'></smart-gauge>
```
You can style the “calm” and “danger” zones as follows:
```
<style type="text/css">
    .calm {
        fill: darkseagreen;
    }
    .danger {
        fill: crimson;
    }
</style>
```
Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com
May 16, 2018 at 11:26 am in reply to: set items internally #98855

admin
Keymaster

Hi Aleksandar,
You can do so by calling the update method, i.e.:
document.querySelector('smart-list-box').update(0, 'Order 1 (sold)');
Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

May 16, 2018 at 6:09 am in reply to: set items internally #98854

admin
Keymaster

Thank you Dimitar!. I have gone astray 🙂 it is my mistake.
This is greate But I have another question. How can I update one particular item?
For example I want to change the “Order 1” to “Order 1 (sold)”.
–Aleksandar Laskin

May 16, 2018 at 6:00 am in reply to: How to change the text color #98853

admin
Keymaster

Hi Ivailo,
Maybe I will spend more time to search how to make this style change. This doc is very useful! Thanks!
Now I have another question. Can I make it this with some toggle button or something? Becouse I want to change text of the button of in one case and in another to be different.
–Aleksandar Laskin

May 16, 2018 at 5:42 am in reply to: Dynamic change content of Tooltip #98852

admin
Keymaster

Hi Christopher,
Thank you for this example. I will use this native way.
–Aleksandar Laskin

May 15, 2018 at 1:41 pm in reply to: How to change the text color #98851
admin
Keymaster
Hi Aleksandar,
If you want to change button’s background color and color, please, set the following CSS variables:
```
--smart-background-color: #55719e;
--smart-color: white;
```
More information about button’s CSS styling can be found here:
https://www.htmlelements.com/docs/button-css/
Best Regards,
Ivailo
SmartElements Team
http://www.htmlelements.com
May 15, 2018 at 12:57 pm in reply to: set items internally #98850

admin
Keymaster

Hi Aleksandar,
Here is how to set the dataSource property as an attribute:
<smart-list-box data-source='["Order 1", "Order 4"]'></smart-list-box>
Note that when setting properties as attributes, they have to be in dash-case (not in CamelCase), i.e. data-source, not dataSource.
Best Regards,
Dimitar
SmartElements Team
http://www.htmlelements.com

May 15, 2018 at 8:24 am in reply to: Dynamic change content of Tooltip #98843
admin
Keymaster
Hi pcng618,
In order to change the content of the Tooltip dynamically you need to set the innerHTML property of the Tooltip instance. To change it when clicking on a button you have to bind to it’s click event and simply set the new content to the innerHTML property of the Tooltip. Here’s an example:
```
<head>
 <script>
        window.onload = function () {
            var tooltip = document.querySelector('smart-tooltip');
            document.getElementById('myButton').addEventListener('click', function (event) {
                document.getElementById('tooltip').innerHTML = 'The button is clicked !';
            })
        }
    </script>
</head>
<body>
    <smart-button id="myButton"></smart-button>
    <smart-tooltip id="tooltip" selector="myButton">Some Random Text</smart-tooltip>
</body>
```
Best Regards,
Christopher
SmartElements Team
http://www.htmlelements.com
Author

Posts

Viewing 12 posts - 916 through 927 (of 927 total)

← 1 2 3 … 60 61 62