Setting ellipsis in css on a IconMenuButton also cuts of the dropdown icon.

[sela]

SmartClient Version: v9.1p_2014-06-20/Pro Deployment (built 2014-06-20)

FF 24.8.1 ESR,

When overriding the css class of IconMenuButton and adding ellipsis to it, the title of the IconMenuButton is cut off and the dots are shown (OK) but the dropdown that houses the menu items also disappears. See images + code

package com.example.myproject.client.misc;

import be.sofico.silkroad.client.util.SilkConstants;

import com.example.myproject.client.doc.HowToWriteTests;
import com.example.myproject.client.doc.PanelFactory;
import com.example.myproject.client.doc.TestCasePanel;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.IconMenuButton;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuItem;

public class EllipsisOnIconMenuButton extends TestCasePanel{

	private static final String DESCRIPTION = "A guide how to use this test application.";

	public static class Factory implements PanelFactory {

		private String id;

		public Canvas create() {
			EllipsisOnIconMenuButton panel = new EllipsisOnIconMenuButton();
			id = panel.getID();
			return panel;
		}

		public String getID() {
			return id;
		}

		public String getDescription() {
			return DESCRIPTION;
		}

		public String getURL() {
			return null;
		}

		public String[] getIssues() {
			return null;
		}

		public String getBadBuild() {
			return null;
		}

		public String getFixedBuild() {
			return null;
		}
	}

	public Canvas getViewPanel() {
		VLayout layout = new VLayout();
		
		final SectionStack stack = new SectionStack();
		stack.setWidth(500);
		
		
		final Menu menu = new Menu();
		
		
		MenuItem item1 = new MenuItem("Item 1");  
        item1.setAttribute("canDismiss", false);  
  
        MenuItem item2 = new MenuItem("Item 2");  
        item2.setAttribute("canDismiss", true);  
        
        menu.setData(item1, item2);
		
		
		IconMenuButton menuButton = new IconMenuButton("Menu Button with ellipsis in css", menu);
		menuButton.setShowMenuIconOver(true);
//		menuButton.setBaseStyle("test");
		
		final  SectionStackSection section = new SectionStackSection("Header");
		section.setControls(menuButton);
		section.setExpanded(true);

		stack.setSections(section);
		layout.setMembers(menuButton);
		return layout;
	}

	@Override
	public String getIntro() {
		return DESCRIPTION;
	}
}

And Css:

.iconButton,
.iconButtonOver,
.iconButtonDown,
.iconButtonFocused,
.iconButtonFocusedOver,
.iconButtonFocusedDown,
.iconButtonSelected,
.iconButtonSelectedFocused,
.iconButtonSelectedDown,
.iconButtonSelectedFocusedDown,
.iconButtonSelectedOver,
.iconButtonSelectedFocusedOver,
.iconButtonDisabled,
.iconButtonSelectedDisabled  {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: no-wrap;
  max-width: 110px;
  display: block; 
}

I know ellipsis is not yet supported standard in smartGWT, but is there something I can do?

Kind Regards
Sela

[Isomorphic]

Hi Sela,
We do already support ellipsis-clipping by default for standard SmartGWT buttons. Would a simple MenuButton work for you rather than an IconMenuButton? This should clip the title (with ellipses) but leave the turndown arrow image visible.

Thanks
Isomorphic Software

[sela]

Thanks for the reply.

No in this case I really need an icon button to be consistent throughout the app.
Do you happen to know why it only works with a normal MenuButton?

[sela]

In the DOM the title of the IconMenuButton is placed inside a <span> element, I tried to apply the ellipsis on that <span> element but it had the same effect as placing it in the iconbutton itself.

.sectionStack .iconButton span {
  overflow: hidden;
  white-space: no-wrap;
  max-width: 110px;
  display: block;
  text-overflow: ellipsis;
}

[Blama]

We're not seeing any issues with the Messaging sample. These might have been caused by caching older versions of the Showcase, although that would have been automatically handled unless there is something like a faulty web cache at your site.

The warnings about ListGridRecord are a minor example code flaw - we'll fix them.
Reply With Quote

This seems to be unrelated Spam - copying from random threads. Please delete.

[Isomorphic]

The generated iconMenuButton title HTML is significantly different from that for normal buttons / menuButtons, and we don't currently have support for ellipsis-clipping as we do with other buttons.
We are looking into adding this in the future but don't yet have a definite ETA for this, and it's not yet clear whether backporting this rework to 9.1 would be practical. It would quite likely be applied to the most recent branch only.

We'll follow up on this thread when we have more information

Regards
Isomorphic Software