Javascript - Nest select dropdown inside text

Question

I am trying to have a container such as:

<div class="container">
    <div class="row">
        <h2 style="text-align:center;">Option 1: {{ dropDown1}} Option 2: {{ dropDown2 }}</h2>
        //submit button
    </div>
</div>

Where I have two 'select' dropdowns inside my single line of text. I can have it working in the following manner for functionality:

<div class="container">
    <div class="row">
        <h2 style="text-align:center;">Select your configuration options:</h2>
        <select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
        <select data-ng-options="o.name for o in options2" data-ng-model="selectedOption"></select>
    </div>
</div>

Using two individual dropdown boxes (I am using angular), but these will show up below my text and not achieve the desired result I want. Any idea how I can nest these dropdowns in between text?

Mykybo · Accepted Answer · 2016-12-11 16:59:36Z

1

Your first select isn't closed.

To get them on the same line, give them css: 'display: inline-block' or 'float: left'. (There are more ways to do this using css, you should really learn css if you want to work with html).

answered Dec 11, 2016 at 16:59

Mykybo

1,5091 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2016-12-11 17:37:39Z

0

To have the <select> elements flow inside the <h2> header, use <span> elements to contain the text:

<h2 style="text-align:center;">
    <span>Option 1:</span>
    <select data-ng-options="o.name for o in options"
            data-ng-model="selectedOption">      
    </select>
    <span>Option 2: </span>
    <select data-ng-options="o.name for o in options"
            data-ng-model="selectedOption">      
    </select>
</h2>

edited Dec 11, 2016 at 17:37

answered Dec 11, 2016 at 17:30

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Javascript - Nest select dropdown inside text

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related