Output of SmartGWT Img as HTML <object> instead of HTML <img>

Blama replied

15 Mar 2018, 14:18
Hi Isomorphic,

that assumption is correct. I thought you meant how the CSS is included. The icons I use are from FontAwesome, so far all of them use path.

Best regards
Blama
Leave a comment:
Isomorphic replied

15 Mar 2018, 12:42
That CSS styling appears to only apply to explicit <path> elements in the SVG, and doesn't apply to <circle>, though one might assume "path" to be a generic tag matching all SVG shapes.

We'll proceed under the assumption you were speaking abstractly when referencing "path" in that CSS, since you didn't provide any specific SVG for the example of #9.
Leave a comment:
Isomorphic replied

15 Mar 2018, 11:42
For the original test.svg in #1, we see that the original svg-stylesheet.css from #1 works, but what you posted in #13 doesn't. For example:

Code:

svg > path {fill: red !important;}

Were you assuming a slightly different test.svg file?
Leave a comment:
Blama replied

15 Mar 2018, 10:50
Hi Isomorphic,

no, the CSS is in a single file and referenced from the SVG. See #1. You could also put it in skin_styles.css and link that from the SVG (and the main page), but I assume that is creates overhead for the browser, as all the normal rules are not needed there. I'll therefore go with a (single rule?) CSS file referenced from all my SVG files.

Best regards
Blama
Leave a comment:
Isomorphic replied

15 Mar 2018, 09:55
With regard to the styling you reported as working in #13, can you provide an example of the "dummy.svg" files you were using? Where did you place that CSS? In the skin's skin_style.css?

Last edited by Isomorphic; 15 Mar 2018, 10:55.
Leave a comment:
Isomorphic replied

12 Mar 2018, 09:15
This feature is under development.
Leave a comment:
Blama replied

12 Mar 2018, 02:59
Hi Isomorphic,

any update on this one? This here and this one are places were I'm currently stuck with half finished features.

Best regards
Blama
Leave a comment:

Blama replied

4 Mar 2018, 23:21

Hi Isomorphic,

additionally to #18. the clickHandler fix you did in #15 does not fix the same issue in FormItemIcons using v11.1p_2018-03-03.
See this modified sample, where a click on the icon does not open the expected window:

Code:

isc.DynamicForm.create({
    ID: "dateForm",
    width: 620,
    fixedColWidths: true,
    colWidths: [190, "*"],
    isGroup: true,
    groupTitle: "Date Controls",
    fields : [{
        name: "dateItem", title: "Date", hint: "<nobr>Picklist based date input</nobr>", 
        editorType: "DateItem",
        pickerIconSrc:"[SKINIMG]NavigationBar/miniNav_up.svg",
    },
    {
        name: "mdri", title: "Mini Date Range", 
        editorType: "MiniDateRangeItem",
        pickerIconSrc:"[SKINIMG]NavigationBar/miniNav_up.svg",
    }
    ]
});

Best regards
Blama

Leave a comment:

Blama replied

1 Mar 2018, 05:08

Hi Isomorphic,

I collected all the open issues in one self-descriptive testcase. There are two more issues, one more general related to showRollOverIcon:true + showRollOver:false, where it is not possible to control those independently. And one introduced with 2018-02-28 (not in 2018-02-27), where the ":hover"-pseudoclass is not recognized anymore. See the end of the video for how it worked in v11.1p_2018-02-27 (does not in v11.1p_2018-02-28).

This is the testcase and the image needed for test 7:

BuiltInDS.java:

Code:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {
        public MyWindow() {
            setWidth(400);
            setHeight(800);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setTitle("img- vs object-tag issue" + getTitle());
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            {
                Label label = new Label("1: Problem with setShowRollOverIcon(true) for SVG-ImgButton");
                addItem(label);
                ImgButton imgButton = new SVGImgButton();
                imgButton.setShowRollOver(true);
                imgButton.setShowRollOverIcon(true);
                addItem(imgButton);
            }
            {
                Label label = new Label("2: No problem with PNG-ImgButton");
                addItem(label);
                ImgButton imgButton = new PNGImgButton();
                imgButton.setShowRollOver(true);
                imgButton.setShowRollOverIcon(true);
                addItem(imgButton);
            }
            {
                Label label = new Label(
                        "3: General problem with ImgButton showRollOverIcon:true + showRollOver:false (not possible to control those independently)");
                addItem(label);
                ImgButton imgButton = new PNGImgButton();
                imgButton.setShowRollOverIcon(true);
                imgButton.setShowRollOver(false);
                addItem(imgButton);
            }
            {
                Label label = new Label("5: No Problem with PNG-IButton");
                addItem(label);
                PNGButton button = new PNGButton("Title visible");
                addItem(button);
            }
            {
                Label label = new Label("6: Title not visible with SVG-IButton");
                addItem(label);
                SVGButton button = new SVGButton("Title not visible");
                addItem(button);
            }
            {
                Label label = new Label(
                        "7: SVG Hover problem with CSS hovers that worked in 2018-02-27, but not in 2018-02-28 (normal green, on hover red is the expectation)");
                addItem(label);
                SVGImgButton imgButton = new SVGImgButton();
                imgButton.setSrc("/miniNav_up.svg");
                addItem(imgButton);
            }
        }
    }

    private class SVGImgButton extends ImgButton {
        public SVGImgButton() {
            super();
            setSrc("[SKINIMG]NavigationBar/miniNav_up.svg");
            setIconSize(16);
        }
    }

    private class PNGImgButton extends ImgButton {
        public PNGImgButton() {
            super();
            setSrc("[SKINIMG]DateChooser/arrow_left.png");
            setIconSize(16);
        }
    }

    private class SVGButton extends Button {
        public SVGButton(String title) {
            super(title);
            setIcon("[SKINIMG]NavigationBar/miniNav_up.svg");
            setIconSize(16);
        }
    }

    private class PNGButton extends Button {
        public PNGButton(String title) {
            super(title);
            setIcon("[SKINIMG]DateChooser/arrow_left.png");
            setIconSize(16);
        }
    }
}

built-in-ds\war\svg_styles.css (linked from SVG in attachment):

Code:

svg > path {fill: green !important;}
svg:hover > path {fill: red !important;}

built-in-ds\war\miniNav_up.svg (see attachment, rename to remove "txt")

Best regards
Blama

Attached Files

miniNav_up.svg.txt (609 Bytes, 390 views)

Leave a comment:

Blama replied

28 Feb 2018, 07:22

Hi Isomorphic,

I retested using v11.1p_2018-02-28. The issues of #14 are gone, but the last one from #16 is still open. This also affects other parts, e.g. SectionStackSections with an SVG as icon - these also don't show a title then - compared to a PNG as icon.

Also I'm getting many warnings like:

Code:

[ERROR] [builtinds] - 16:20:49.598:TMR3:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:49.736:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:51.146:TMR2:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:52.738:TMR1:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:53.166:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:53.714:TMR4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:55.132:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:56.801:TMR3:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.560:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.811:FCS4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.815:MDN2:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:57.903:MUP7:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:58.160:TMR6:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:20:58.316:BLR4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:01.830:TMR5:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:02.634:TMR4:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:03.634:TMR3:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:04.140:MDN4:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:04.218:MUP8:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:06.405:BLR1:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:06.477:FCS7:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:07.769:BLR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:08.443:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:08.457:TMR5:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:09.503:TMR9:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:09.618:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:10.295:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:10.307:TMR5:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:11.040:TMR2:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:11.103:TMR7:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:12.196:TMR7:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:12.530:MDN3:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:12.631:MUP8:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.011:BLR9:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.014:FCS0:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.017:MDN8:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:14.111:MUP2:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:15.791:MDN9:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:15.876:MUP3:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.245:MDN6:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.327:MUP7:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.762:TMR3:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.826:TMR8:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_1:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:17.862:TMR1:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:18.195:TMR1:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:19.398:TMR0:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:19.454:TMR7:WARN:ImgButton:isc_ImgButton_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:19.654:TMR0:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:20.706:BLR5:WARN:ImgButton:isc_BuiltInDS_ActionHLayout$1_0:setImage: image 'main' couldn't be found
[ERROR] [builtinds] - 16:21:20.710:FCS6:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:20.713:MDN4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:20.775:MUP8:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:21.529:TMR5:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:21.871:BLR2:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.292:TMR8:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.474:FCS6:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.477:MDN4:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:22.533:MUP8:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:26.247:TMR5:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found
[ERROR] [builtinds] - 16:21:29.503:BLR5:WARN:IButton:isc_IButton_2:setImage: image 'icon' couldn't be found

Best regards
Blama

Leave a comment:

Blama replied

27 Feb 2018, 08:12

Hi Isomorphic,

please also see this issue. Add this code to the end of MyWindow:

Code:

            IButton pngTestIButton = new IButton("PNG Test");
            pngTestIButton.setIcon("[SKINIMG]DateChooser/arrow_left.png");
            addItem(pngTestIButton);

            IButton svgTestIButton = new IButton("SVG Test");
            svgTestIButton.setIcon("[SKINIMG]NavigationBar/miniNav_up.svg");
            addItem(svgTestIButton);

As you can see, the SVG-IButton does not display the test "SVG Test" next to the icon, while the PNG-IButton does.

Best regards
Blama

Leave a comment:

Isomorphic replied

27 Feb 2018, 01:54
These have all been fixed for builds dated February 28 and later - SVG images will no longer consume mouse events, so framework handlers will function correctly.
Leave a comment:

Blama replied

26 Feb 2018, 09:13

Hi Isomorphic,

it is working, but still has several problems.

Please see this sample and the two ImgButtons at the end, one with SVG and one with PNG.

The PNG-one does trigger the added click-handlers on click, the SVG-one does not.
The same is true for svgTestImg.setShowRollOver(true), which does not result in a CSS-class change on hover.
The sample is using images from Tahoe, so best run it in this skin.

Code:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.AdvancedCriteria;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.events.RightMouseDownEvent;
import com.smartgwt.client.widgets.events.RightMouseDownHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.IMenuButton;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuItem;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {
        public MyWindow() {
            setWidth(400);
            setHeight(300);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setTitle("img- vs object-tag issue" + getTitle());
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            final ListGrid svgTest = new ListGrid() {
                {
                    setShowRecordComponents(true);
                    setShowRecordComponentsByCell(true);
                    setRecordComponentHeight(22);
                }

                @Override
                protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                    if ("ahl".equals(this.getField(colNum).getName())) {
                        ActionHLayout ahl = new ActionHLayout();
                        return ahl;
                    }
                    return null;
                };
            };
            svgTest.setDataSource(DataSource.get("animals"));

            ListGridField ahlLGF = new ListGridField("ahl", "SVG Test");
            ListGridField commonNameLGF = new ListGridField("commonName");
            ListGridField scientificNameLGF = new ListGridField("scientificName");
            ListGridField lifeSpanLGF = new ListGridField("lifeSpan");
            svgTest.setFields(ahlLGF, commonNameLGF, scientificNameLGF, lifeSpanLGF);
            svgTest.fetchData(new AdvancedCriteria(new Criterion("commonName", OperatorId.ISTARTS_WITH, "A")));
            addItem(svgTest);

            Menu mainMenu = new Menu();
            mainMenu.setWidth(150);
            MenuItem svgTestItem = new MenuItem("SVG Test");
            svgTestItem.setIcon("[SKINIMG]NavigationBar/miniNav_up.svg");
            mainMenu.setItems(svgTestItem);

            IMenuButton mainMenuButton = new IMenuButton("SVG Test", mainMenu);
            mainMenuButton.setWidth(150);
            addItem(mainMenuButton);

            ImgButton svgTestImg = new ImgButton();
            svgTestImg.setSrc("[SKINIMG]NavigationBar/miniNav_up.svg");
            svgTestImg.setShowDown(true);
            svgTestImg.setShowRollOver(true);
            svgTestImg.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.say("Clicked SVG");
                }
            });
            svgTestImg.addRightMouseDownHandler(new RightMouseDownHandler() {
                @Override
                public void onRightMouseDown(RightMouseDownEvent event) {
                    SC.say("Right-Clicked SVG");
                }
            });
            addItem(svgTestImg);

            ImgButton pngTestImg = new ImgButton();
            pngTestImg.setSrc("[SKINIMG]DateChooser/arrow_left.png");
            pngTestImg.setShowDown(true);
            pngTestImg.setShowRollOver(true);
            pngTestImg.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.say("Clicked PNG");
                }
            });
            pngTestImg.addRightMouseDownHandler(new RightMouseDownHandler() {
                @Override
                public void onRightMouseDown(RightMouseDownEvent event) {
                    SC.say("Right-Clicked PNG");
                }
            });
            addItem(pngTestImg);
        }
    }

    public class ActionHLayout extends HLayout {
        public ActionHLayout() {
            super(3);
            setHeight(22);
            setWidth100();
            setAlign(Alignment.CENTER);

            ImgButton svgTestIB = new ImgButton() {
                {
                    setShowDown(true);
                    setShowRollOver(true);
                    setLayoutAlign(Alignment.CENTER);
                    setSrc("[SKINIMG]NavigationBar/miniNav_up.svg");
                    setHeight(16);
                    setWidth(16);
                }
            };
            addMember(svgTestIB);
        }
    }
}

Best regards
Blama

Leave a comment:

Blama replied

26 Feb 2018, 04:14
Hi Isomorphic,

great. A quick check shows that it works as expected with IE11, IE Edge, FF26, Chromium 64, Opera (all Win 10).
For others finding this thread: The rule used is not

Code:

path {fill: red !important;}

but

Code:

svg > path {fill: red !important;}

Former one has the disadvantage that you need to be on the stroke itself, while with the latter one, the stroke gets also colored when you are on an empty are of the SVG.

This one does also work:

Code:

svg:hover > path {fill: red !important;}

But as I think I'll need more specific rules, as I need different behavior in different cases (e.g. SVG in main ListGrid which has no background color vs context menu, which has a background), I'll go for something like this and make use of the SmartGWT stateful classes:

Code:

.imgButtonOver > svg > path {fill: red !important;}

Best regards
Blama
Leave a comment:
Isomorphic replied

26 Feb 2018, 03:18
Yes, we'll fix so the extension is checked insensitively for tomorrow's builds
Leave a comment:

Previous 1 2 3 template Next

Announcement

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment: