tab layout - Use icons to decrease label width

[mdsupport]

For devices with limited width, menu in tab layout can overflow. The design should allow icons to limit the menu width. One approach is to let jquery monitor viewport and automatically make the switch by using code which move label text to tile and place applicable icon as label -

`
// Replace menu text by fa
var xl_icons = {
"Calendar": "calendar",
"Flow Board": "calendar-check-o",
"Messages": "envelope",
// "Fees": "money",
// "Administration": "cog",
// "Reports": "file-text-o",
"About": "ellipsis-v",
};

$(".menuLabel").each( function(ix) {
var lbl = $(this).html().trim();
if (xl_icons[lbl]) {
$(this).css ('font-size', '150%');
$(this).attr ('title', lbl);
$(this).html('');
}
});
`

[bradymiller]

To expand this a bit, was thinking of:

1. creating a label_to_icon entry in the menu json
2. building 2 menu structures (1 with labels and 1 with icons on the top level labels) (10/14/16 edit here: actually, may better to just have 1 menu structure with the label and icon in wrapped in responsive css elements)
3. using @media css setting to choose which to use depending on the width of the frame(ie. responsive):
   http://stackoverflow.com/questions/17762354/remove-element-for-certain-screen-sizes
   http://www.w3schools.com/css/css_rwd_mediaqueries.asp

does this make sense?

[mdsupport]

Media is just one of the factors. Menu overflow can happen because language translations, font-size etc..
At the risk of offending others, we should be using 'enterprise grade' components that are tested in 1000s of situations. In this case long term solution is to use bootstrap or other framework. Then you already have responsive utilities that can be invoked to dynamically switch text to icons and back. It does need some design effort or locating another open source application to borrow from.

[bradymiller]

no offense taken here :)
there are plans to get bootstrap used throughout the project, but not really focused on the responsive part.
any thoughts on how to get the current knockout.js menu scheme to play nice with a bootstrap menu scheme(I agree this would be ideal)?

[bradymiller]

another couple more quick questions:
All the responsive things I have seen seem to use pixels width of browser as breakpoints, but don't incorporate the size of the element itself into the decision. Would dealing with menu overflow be a different mechanism(ie. down size to icons if the menu overflows)? If so, this would be much better and would then account for font size and translations?