diff --git a/app/gui/AutoResizingComboBox.qml b/app/gui/AutoResizingComboBox.qml
new file mode 100644
index 00000000..3f14c199
--- /dev/null
+++ b/app/gui/AutoResizingComboBox.qml
@@ -0,0 +1,27 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.2
+
+// https://stackoverflow.com/questions/45029968/how-do-i-set-the-combobox-width-to-fit-the-largest-item
+ComboBox {
+ property int modelWidth
+
+ width: modelWidth + 2*leftPadding + 2*rightPadding
+
+ TextMetrics {
+ id: textMetrics
+ font: parent.font
+ }
+
+ onFontChanged: {
+ textMetrics.font = font
+ }
+
+ // We call this every time the options change (and init)
+ // so we can adjust the combo box width here too
+ onActivated: {
+ for (var i = 0; i < count; i++){
+ textMetrics.text = textAt(i)
+ modelWidth = Math.max(textMetrics.width, modelWidth)
+ }
+ }
+}
diff --git a/app/gui/SettingsView.qml b/app/gui/SettingsView.qml
index 9c27e390..42f640c5 100644
--- a/app/gui/SettingsView.qml
+++ b/app/gui/SettingsView.qml
@@ -73,7 +73,7 @@ ScrollView {
Row {
spacing: 5
- ComboBox {
+ AutoResizingComboBox {
// ignore setting the index at first, and actually set it when the component is loaded
Component.onCompleted: {
// Add native resolutions for all attached displays
@@ -145,7 +145,6 @@ ScrollView {
}
id: resolutionComboBox
- width: 200
textRole: "text"
model: ListModel {
id: resolutionListModel
@@ -188,7 +187,7 @@ ScrollView {
}
}
- ComboBox {
+ AutoResizingComboBox {
function createModel() {
var fpsListModel = Qt.createQmlObject('import QtQuick 2.0; ListModel {}', parent, '')
@@ -253,7 +252,6 @@ ScrollView {
id: fpsComboBox
textRole: "text"
- width: 250
// ::onActivated must be used, as it only listens for when the index is changed by a human
onActivated : {
var selectedFps = parseInt(model.get(currentIndex).video_fps)
@@ -315,7 +313,7 @@ ScrollView {
color: "white"
}
- ComboBox {
+ AutoResizingComboBox {
// ignore setting the index at first, and actually set it when the component is loaded
Component.onCompleted: {
var savedWm = prefs.windowMode
@@ -331,7 +329,6 @@ ScrollView {
}
id: windowModeComboBox
- width: Math.min(bitrateDesc.implicitWidth, parent.width)
textRole: "text"
model: ListModel {
id: windowModeListModel
@@ -386,7 +383,7 @@ ScrollView {
color: "white"
}
- ComboBox {
+ AutoResizingComboBox {
// ignore setting the index at first, and actually set it when the component is loaded
Component.onCompleted: {
var saved_audio = prefs.audioConfig
@@ -402,7 +399,6 @@ ScrollView {
}
id: audioComboBox
- width: Math.min(bitrateDesc.implicitWidth, parent.width)
textRole: "text"
model: ListModel {
id: audioListModel
@@ -519,7 +515,7 @@ ScrollView {
color: "white"
}
- ComboBox {
+ AutoResizingComboBox {
// ignore setting the index at first, and actually set it when the component is loaded
Component.onCompleted: {
var saved_vds = prefs.videoDecoderSelection
@@ -535,7 +531,6 @@ ScrollView {
}
id: decoderComboBox
- width: Math.min(bitrateDesc.implicitWidth, parent.width)
textRole: "text"
model: ListModel {
id: decoderListModel
@@ -567,7 +562,7 @@ ScrollView {
color: "white"
}
- ComboBox {
+ AutoResizingComboBox {
// ignore setting the index at first, and actually set it when the component is loaded
Component.onCompleted: {
var saved_vcc = prefs.videoCodecConfig
@@ -583,7 +578,6 @@ ScrollView {
}
id: codecComboBox
- width: Math.min(bitrateDesc.implicitWidth, parent.width)
textRole: "text"
model: ListModel {
id: codecListModel
diff --git a/app/qml.qrc b/app/qml.qrc
index 28d69339..4d73e388 100644
--- a/app/qml.qrc
+++ b/app/qml.qrc
@@ -11,5 +11,6 @@
gui/NavigableItemDelegate.qml
gui/NavigableMenuItem.qml
gui/CliStartStreamSegue.qml
+ gui/AutoResizingComboBox.qml