How to change radio button place & add line separator


Tags: javascript,html,css,css3

Problem :

I've tried to change the layout of the following without success, what I need is that the dropdownbox will be in parallel to the second (RB2)radio button (on the right side) and not below. http://jsbin.com/xijohaqaci/1/edit?js,output

In addition I need to add line separator(thin line) between below the title and before the radio buttons,how it can achieved?

for those who wonder what it is ,this is SAPUI5

https://github.com/SAP/openui5/

In the renderer you should put the Html/Css(any native...) which is describe how the controls will look like. e.g. for the control to be vertical i've added

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


Solution :

Not sure if this is what you're looking for, but you could wrap the _radioButtonGroup and _dropDownBox in a <div>, then apply a margin-top to align the dropdown with the second radio button:

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;
}

Then you can add an <hr> with the appropriate styles to get a horizontal line.

See it on JSBin here.


    CSS Howto..

    How to make a table-cell have the same width as its height?

    How to center a div and keep the alignment to its nested floating divs?

    How to exclude css files from auto formatting in IntelliJ

    How to create custom buttons with arrows for twitter bootstrap?

    How to avoid an unknown height sticky footer to overlap content with CSS only?

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How to set ribbon on image by stacking it in a div?

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to create a three-column website background using CSS?

    How to remove the extra space between two span elements?

    How to process which button is selected in an HTML form?

    How to add a border-bottom-image with css

    How to create pentagon shape for avatar image?

    How to align vertical text horizontally center?

    CSS Grid Layout Module Level 1 - How long does it usually take from candidate recommendation to final spec?

    list-style-type no showing

    Ruby on Rails: (Beginner) How can I make my style sheet (in public/stylesheet folder) be used by my layouts?

    how can I set the opacity of the background of a span, but not the text? [duplicate]

    CSS how to change text color of disabled option inside a select?

    CSS Animation: how to trigger the reverse animation?

    How to target CSS module classes after they are hashed?

    How to make a div box with display:flex clickable like display:block?

    Is this how CSS LESS and SimpLESS work? [closed]

    How to apply StyleSheet to MVC3 website?

    How to have two items be placed next to each other in HTML?

    how to save responsive menu open/close value?

    how can I shape the image size according to its nested box

    CSS - How to prevent the DIV without content from shrinking

    How to render a template with dynamic CSS?

    How to add CSS class to the HTML5 picture element