search

GwtMaterialDesign / gwt-material

A Google Material Design wrapper for GWT
https://gwtmaterialdesign.github.io/gmd-core-demo/
Apache License 2.0
411 stars 124 forks source link

Badge inside Icon Link dosn't display correct #377

Open masterdany88 opened 8 years ago

masterdany88 commented 8 years ago

I would like to add badges to icon in my MaterialSideProfile' row. But when I paste badge like follow:

<m:MaterialLink ui:field="icoNoty" iconType="NOTIFICATIONS" marginLeft="10" waves="DEFAULT"><m:MaterialBadge text="2" backgroundColor="pink" textColor="white" circle="true"/></m:MaterialLink> in row there is only mess: image image

Without this icon the view is ok: image But I would like to get it look like it is in example: http://gwtmaterialdesign.github.io/gwt-material-demo/#!badges image

image

Here is my uibinder code for this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui" 
    xmlns:m="urn:import:gwt.material.design.client.ui"
    xmlns:ma="urn:import:gwt.material.design.addins.client"
    xmlns:ms="urn:import:gwt.material.design.addins.client.sideprofile"
    xmlns:mh="urn:import:gwt.material.design.client.ui.html">
    <ms:MaterialSideProfile
        url="http://static1.squarespace.com/static/51609147e4b0715db61d32b6/521b97cee4b05f031fd12dde/5519e33de4b06a1002802805/1431718693701/?format=1500w"
        ui:field="profilePanel" >
        <m:MaterialImage ui:field="profileImage" url="http://b.vimeocdn.com/ps/339/488/3394886_300.jpg"  />
        <m:MaterialRow float="RIGHT" textColor="white">
            <!-- <m:MaterialLink ui:field="icoNoty" iconType="NOTIFICATIONS" marginLeft="10" waves="DEFAULT"/> -->
            <!-- <m:MaterialLink ui:field="icoNoty" iconType="NOTIFICATIONS" marginLeft="10" waves="DEFAULT"><m:MaterialBadge text="2" backgroundColor="pink" textColor="white" circle="true"/></m:MaterialLink> -->
            <m:MaterialIcon ui:field="icoNoty" iconType="NOTIFICATIONS_ACTIVE" marginLeft="10" waves="DEFAULT"/>
            <m:MaterialIcon ui:field="icoMessage" iconType="MESSAGE" marginLeft="10" waves="DEFAULT"/>
            <m:MaterialIcon ui:field="icoLogout" iconType="EXIT_TO_APP" marginLeft="10" waves="DEFAULT"/>
        </m:MaterialRow>
        <m:MaterialLabel text="User name" textColor="white"/>
        <m:MaterialLink text="useremail@mail.com"
            ui:field="profileLink"
            activates="" iconType="ACCOUNT_CIRCLE" iconPosition="RIGHT"
            textColor="white" waves="DEFAULT" />

    </ms:MaterialSideProfile>
</ui:UiBinder>

To see my problem uncomment ui:field="iconNoty" as a link or icon.

kevzlou7979 commented 8 years ago

You can play with the icons and links by changing its layoutPosition I think the Link must be RELATIVE and the icons are absolute. And by changing the icon's position left ``` , right ``` etc. it will solve the problem.

BenDol commented 8 years ago

This an issue on our end?

masterdany88 commented 8 years ago

Yes. This is still an issue with gmd.