Index: sources/gui/qml/components/RangeRect.qml =================================================================== diff -u -r7c86f3854db9ad02d95681203198d75a0d65c9fa -rbbb976a0542436a5ea107ea712f77d7e42b1abcb --- sources/gui/qml/components/RangeRect.qml (.../RangeRect.qml) (revision 7c86f3854db9ad02d95681203198d75a0d65c9fa) +++ sources/gui/qml/components/RangeRect.qml (.../RangeRect.qml) (revision bbb976a0542436a5ea107ea712f77d7e42b1abcb) @@ -47,20 +47,36 @@ function adjustOverlap() { // Due to font size not being fixed and be different depending on text, // setting a minimal expected gap - let minimumGap = 10 - let overlap = _textMinimum.x + _textMinimum.width - _textMaximum.x + minimumGap + let minimumGap = 4 - // Check if there exists an overlap, if there is an overlap, adjust the text padding - // to provide a gap between the min and max text labels. Otherwise, set them to 0 - if(overlap > 0){ - _textMinimum.rightPadding = overlap / 2 - _textMaximum.leftPadding = overlap / 2 - } else { - _textMinimum.rightPadding = 0 - _textMaximum.leftPadding = 0 + // Reset the padding of the text Items to initially assume there is no + // overlap adjustment. This avoids causing the padding to grow accumulatively + // if we enter the "overlapped" condition multiple times consecutively + _textMinimum.rightPadding = 0 + _textMaximum.leftPadding = 0 + + // A special case in which only the max label is shown, this ensures centering the label + if(minimum == maximum) return + + // Considering half the minimum text's width as the threshold to determine + // whether an overlap of the labels exist. This avoids relying solely on + // the x of the maximum label or the width of the root. Debugging the code + // for overlapping revealed that the max's X and the width of the root can be + // unexpectedly larger than what is display. This causes the calculation of + // "overlapping" to be incorrect leading to some cases not correctly padding. + let overlapThreshold = ( _textMinimum.width + minimumGap )/ 2 + let overlap = overlapThreshold - _textMaximum.x + + if(_root.width < overlapThreshold || _textMaximum.x < overlapThreshold){ + _textMinimum.rightPadding = overlap + _textMaximum.leftPadding = overlap } } + // The min/max labels are anchored to the left/right sides of _root + // so, an update of overlapping is necessary if the width changes + onWidthChanged: adjustOverlap() + width : parent.width height : parent.height