Question

我试图改变以下布局但没有成功，我需要的是下拉框将与第二个（RB2）单选按钮（右侧）并行而不是下方。 http://jsbin.com/xijohaqaci/1/edit?js,output

另外我需要在标题下方和单选按钮之间添加行分隔符（细线），它是如何实现的？

对于那些想知道它是什么的人来说，这是SAPUI5

在渲染器中，你应该放置Html / Css（任何原生的......）来描述控件的外观。例如为了使控件垂直，我已添加

oRm.writeAttribute('style','display:flex;flex-direction:column;align-items:flex-start');

Answer 1

不确定这是否是您正在寻找的内容，但您可以将_radioButtonGroup和_dropDownBox打包在<div>中，然后应用margin-top将下拉列表与第二个单选按钮对齐：

JS：

renderer: function(oRm, oControl) {
    oRm.write("<div");
    oRm.writeAttribute('style','display:flex;flex-direction:column;align-items:flex-start;');
    oRm.writeControlData(oControl);
    oRm.writeClasses();
    oRm.write(">");
    oRm.renderControl(oControl._title);
    oRm.write("<hr");
    oRm.writeAttribute('style','border:0;display:block;width:100%;background-color:black;height:1px;');
    oRm.write(">");
    oRm.write("<div>");
    oRm.renderControl(oControl._radioButtonGroup);
    oRm.renderControl(oControl._dropDownBox);
    oRm.write("</div>");
    oRm.write("</div>");
  }

CSS：

#__box0 {
  margin-top: 22px;
}

然后，您可以添加具有相应样式的<hr>以获得水平线。

See it on JSBin here.

如何更改单选按钮位置＆amp;添加行分隔符

1 个答案: