GwtMaterialDesign
Badge inside Icon Link dosn't display correct
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:
Without this icon the view is ok:
But I would like to get it look like it is in example:
http://gwtmaterialdesign.github.io/gwt-material-demo/#!badges
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="[email protected]"
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.
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.
