How to make group of toggle buttons responsive - sapui5

Question

The xml for toggle buttons:
<HBox id="toggleButtons1" fitContainer="false" class="fullWidthButtons" alignItems="Center">
<items>
<ToggleButton text="BUTTON1" enabled="true" pressed="true" press=".onPress1" class="firsttogglebutton" >
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</ToggleButton>
<ToggleButton text="BUTTON2" enabled="true" pressed="false" press=".onPress2">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</ToggleButton>
<ToggleButton text="BUTTON3" enabled="true" pressed="false" press=".onPress3">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</ToggleButton>
</items>
</HBox>
Applied some CSS guess not required
I am checking for responsive,when viewed in small/medium devices it is perfect with all size of devices:
for ref:
But When I changed(Enlarged) text inside buttons, It is not responsive. What might be the reason? how to overcome this?
I tried my luck replacing HBox with FlexBox but it is same(May be I should include some more properties).
Controller.js:
sap.ui.define("myController", [
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
var toggleButtons1;
return Controller.extend("myController", {
onInit: function() {
toggleButtons1 = this.byId("toggleButtons1").getItems();
},
onPressNext: function(e) {
for (var i = 0; i < toggleButtons1.length - 1; ++i) {
if (toggleButtons1[i].getPressed()) {
toggleButtons1[i].setPressed(false);
toggleButtons1[i + 1].setPressed(true);
break;
}
}
},
onPressPrevious: function() {
for (var i = toggleButtons1.length - 1; i > 0; --i) {
if (toggleButtons1[i].getPressed()) {
toggleButtons1[i - 1].setPressed(true);
}
}
},
onPress: function(e) {
var btn = e.getSource();
if(!btn.getPressed()) {
btn.setPressed(true);
return;
}
for (var i = 0; i < toggleButtons1.length; ++i) {
if (toggleButtons1[i] != btn) {
toggleButtons1[i].setPressed(false);
}
}
},
onPress1: function(e) {
this.onPress(e);
alert("Do something here!");
}
});
});

Answer 1

view.xml
<l:Grid id="gridToggleButtons" containerQuery="true" defaultSpan="XL2 L4 M4 S6">
<ToggleButton text="BUTTON1EEE" enabled="true" pressed="true" press=".onPress1" class="firsttogglebutton" />
<ToggleButton text="BUTTON2EEE" enabled="true" pressed="false" press=".onPress2" />
<ToggleButton text="BUTTON3EEE" enabled="true" pressed="false" press=".onPress3" />
</l:Grid>
controller.js
var oGrid = this.byId("gridToggleButtons");
var oBtns = oGrid.getContent();
var oBUTTON1EEE = oBtns[0];
var oBUTTON2EEE = oBtns[1];
var oBUTTON3EEE = oBtns[2];
Note: containerQuery is used to get the size based on the Grid size not based on the device sizes(Large, Medium and Small).
defaultSpan is set based on your requirement. For more information regarding the Grid go through the Grid API