TabViewStyle: make tabs take all horizontal space

[Etchelon]

Hi

I'm trying to understand how to make tabs in a TabView take all the available horizontal space. Setting their width is easy:
@
style: TabViewStyle {
id: tabStyle

frameOverlap: 1
tab: Rectangle {
color: styleData.selected ? "steelblue" :"lightsteelblue"
border.color: "steelblue"
implicitWidth: Math.max(text.width + 4, 80)
implicitHeight: 60
width: tabStyle.control.width / tabStyle.control.count

radius: 2
Text {
 id: text
 anchors.centerIn: parent
 text: tabStyle.control.width
 color: styleData.selected ? "white" : "black"
}

}
frame: Rectangle { color: "red" }
leftCorner: Rectangle { color: "cyan" }
}
@
but I don't know how to change their position. tabsAlignment: Qt.AlignHCenter moves the tabs so that their left margin is in the middle of the tabBar... but they're stacked on each other, with the first one hiding the others...
And I don't see which properties can be used to remedy.

[Etchelon]

Anyone?? This forum isn't very popular it seems... the majority of the threads has 0 replies.

[Jens]

I think it simply gets confused by you both setting implicitWidth and width. If you only set implicitWidth to tabStyle.control.width / tabStyle.control.count it works. The implicit width you have set is anyway not used since the tabs always fill the full width.

[Etchelon]

[quote author="Jens" date="1403083037"]I think it simply gets confused by you both setting implicitWidth and width. If you only set implicitWidth to tabStyle.control.width / tabStyle.control.count it works. The implicit width you have set is anyway not used since the tabs always fill the full width.[/quote]
Wow, a reply from one of the writers of QtQuick Controls, what a honor!
Thanks for the reply Jens, but doing as u say doesn't work.
https://github.com/Etchelon/VariousQmlTests
I've uploaded the project (a Qt Quick Project, just 1 file + the .pro file) and pasted the code above, with your modification, and it doesn't work. Can you please look into it?

[Jens]

The issue seems to be an indirect division by 0 and causes further updates to be ignored in this expression:
@
implicitWidth: control.width / control.count
@

The problem happens during initialization of the view, the count is initially 0. While the code as it stands should not really break, adding a safeguard will make the code evaluate correctly:

@
implicitWidth: control.width / Math.max(1, control.count)
@

[Etchelon]

That's it! Many thanks :)