Align rightside of menu edge with right side of container

Hi there, I have a problem where I want the menu that appears to be right-aligned to the right edge of the button that spawned the menu.

If you look at the attached image you can see that the menu appears to the right side of the "container" Is there any way for me to make sure that the menu always appears inside this container (Inside, or rather to the left of the long red line)?

Making the browser window smaller so that the whitespace in the attachment is not visible has the desired effect, but that is not what I am after. I want the menu inside my container regardless of the size of the browser window.

Code:
this.addMember(
isc.MenuButton.create({
title: "",
icon: "DashboardToolbar/Broadcast.png",
baseStyle: "broadcastToolStripButton",
showRollOver: false,
iconHeight:24,
iconWidth:24,
width:25,
showMenuButtonImage: false,
click: function() {
this.menu.data = THIS.getAllPortlets();
this.menu.markForRedraw();
},
menu: isc.Menu.create({
autoDraw: false,
showShadow: true,
autoDismiss: false,
shadowDepth: 10,
data: undefined,
cellClick: function (record, rowNum, colNum) {
this.setItemChecked(record,!record.checked);
}
})
})
);


SmartClient Version: v10.0p_2015-05-28/Enterprise Development Only (built 2015-05-28)

Chrome Version 43.0.2357.81 m

Attached Images

menu.PNG (6.7 KB)