UI5中进度指示器对齐的问题

Question

标签，文本和进度指示器应在同一行中对齐。请建议Present output

<f:SimpleForm id="idSimpleForm" editable="false" layout="ResponsiveGridLayout" maxContainerCols="2" columnsM="2"
                        singleContainerFullSize="false" labelSpanS="5">
                        <f:content>
                            <Label text="Lines Of Code"/>
                            <Text text="{sonarReport>/metrics/LinesOfCode}"/>
                            <Label text="CSS"/>
                            <ProgressIndicator percentValue="100" state="Success"/>
                            <Text text="{sonarReport>/metrics/type/css}"/>
                            <Label text="XML"/>
                            <ProgressIndicator percentValue="30" state="Success"/>
                            <Text text="{sonarReport>/metrics/type/xml}"/>
                            <Label text="JavaScript"/>
                            <ProgressIndicator percentValue="20" state="Success"/>
                            <Text text="{sonarReport>/metrics/type/javaScript}"/>

Desired output

I have tried with this too. It's again the same. Please suggest to align the Progress indicator same row.
enter code here <layoutData> <l:GridData span="L2 M2 S4" /> </layoutData>

Answer 1

您可以将一个类添加到进度指示器控件，并相应地重新定义样式。例如班级名称为progress-indicator。

.progress-indicator {
  margin: 0px !important;
  height: 1.25rem;
  border-radius: 1px !important;
}

.progress-indicator .sapMPIBarPositive {
  background-color: #91C8F6;
}

.progress-indicator .sapMPIBar {
  border-radius: 1px !important;
}

.progress-indicator .sapMPIBarRemaining {
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

演示：https://jsbin.com/meviqeb/edit?html,css,output