SmartClient version: Version v10.0p_2015-05-11/Enterprise Deployment (2015-05-11)
Browser: Chrome 43.0.2357.132 m
We have the following requirement:
We have a layout that can be wide or narrow that you can switch between.
When the layout is wide the buttons in the toolstrip/ribbonbar should display with their titles.
When in "narrow mode" they should display only the associated icon with no title (square button with icon).
On the surface the above seems pretty simple, but I cannot for the life of me get it to work.
I have attached an example page and images that is used on the button.
Minimizing the button seems to work fine but when trying to get the button to go back to its original size it kind of just dissapears. I tried using a small width and setting autoFit to true.
Am I correct in assuming that using autoFit is suppose to grow the button to fits its children? It doesnt seem to be working in this case?
Its like after you mess with the width the first time (minimizing) going back again is not possible.
How can I achieve the functionality described above?
Code below and also attached:
Browser: Chrome 43.0.2357.132 m
We have the following requirement:
We have a layout that can be wide or narrow that you can switch between.
When the layout is wide the buttons in the toolstrip/ribbonbar should display with their titles.
When in "narrow mode" they should display only the associated icon with no title (square button with icon).
On the surface the above seems pretty simple, but I cannot for the life of me get it to work.
I have attached an example page and images that is used on the button.
Minimizing the button seems to work fine but when trying to get the button to go back to its original size it kind of just dissapears. I tried using a small width and setting autoFit to true.
Am I correct in assuming that using autoFit is suppose to grow the button to fits its children? It doesnt seem to be working in this case?
Its like after you mess with the width the first time (minimizing) going back again is not possible.
How can I achieve the functionality described above?
Code below and also attached:
Code:
<!DOCTYPE html>
<html>
<head>
<title>SCBase</title>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic/skins/BlackOps/load_skin.js></SCRIPT>
<style>
.buttonBaseStyle {
color: #AAA;
border: 1px solid #666666;
background: none;
}
.buttonBaseStyle img {
margin-right: 0px !important;
}
.buttonBaseStyleSelected,
.buttonBaseStyleSelectedOver,
.buttonBaseStyleSelectedFocused,
.buttonBaseStyleSelectedFocusedOver{
color: black;
background-color: #666;
}
</style>
</head>
<body>
<SCRIPT>
var btnCalculator = isc.Button.create({
title:"Calculator",
actionType: "checkbox",
showSelectedIcon: true,
icon: "md/Calculator.png",
iconHeight: 18,
iconWidth: 18,
baseStyle : "buttonBaseStyle",
click: function() {
console.log(this);
}
});
var btnSummary = isc.IconButton.create({
title:"Restore Button",
click: function() {
btnCalculator.setAutoFit(true);
btnCalculator.setWidth(1);
btnCalculator.setTitle("Calculator");
}
});
var btnFreeze = isc.IconButton.create({
title:"Minimize Button",
click: function() {
btnCalculator.setTitle("");
btnCalculator.setWidth(32);
}
});
var mdGroup = isc.RibbonGroup.create({
showTitle:false,
numRows: 1,
rowHeight: 26,
controls: [btnSummary, btnFreeze, btnCalculator],
autoDraw: false,
baseStyle: "ribbonBaseStyle"
});
var ribbonBar = isc.RibbonBar.create({
top: 30,
groupTitleAlign: "center",
groupTitleOrientation: "top",
membersMargin: 2,
layoutMargin: 2,
baseStyle: "ribbonBaseStyle"
});
ribbonBar.addGroup(mdGroup, 1);
</SCRIPT>
</body>
</html>