angularjs how to make dropdown size same as inputbox in a div

Question

I am trying to make a html page in my angularjs application. I have a input box and one dropdown side by. My Input box has size and i want to make the dropdown expansion with same size as my input box.

My Html Code,
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<fieldset style="border:1px solid black;">
    <legend>Data</legend>
  <span style="float:right">Check4: <input type="input" id="input"
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/>
  <select id="dropdown">
    <option value="1">True</option>
    <option value="2">False</option>
    <option value="3">Edit</option>
  </select>
  </span>
</fieldset>  
 </body>

And Controller code,
$scope.string = [
    {"_attributes":{"name":"comments"},"_text":"comments"},
    {"_attributes":{"name":"check"},"_text":'Some Content Here'},
    {"_attributes":{"name":"value"},"_text":123}
    ]

I also made a plunkr to demonstrate where the current layout is like this, with some gap between inputbox and dropdown. I tried to remove space by padding:0 and margin:0 but no success.

And what is want is,

And on click on dropdown the options should come beneath the input box with same size, like below

Also if user select True/false , the input box should become readonly. It should be editable only if the Edit option is selected.

Please suggest , how this can be achieved. Many thanks in advance.

Dhananjay C · Accepted Answer · 2018-04-27 07:58:54Z

1

You can use something like following to select option:

 <select id="dropdown" ng-model="selectedOption">
    <option ng-repeat="option in options" value="{{option.isEditable}}">{{option.value}}</option>
 </select>

And use this value as ng-disabled as follow:

<input type="input" id="input"
    ng-repeat="x in string | filter : 'check'" 
    ng-disabled="{{selectedOption}}"
    ng-model="x._text"/>

Hope this helps!

answered Apr 27, 2018 at 7:58

Dhananjay C

5979 silver badges36 bronze badges

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

1 Comment

usersam Over a year ago

Thanks @Dhananjay. But This is not working for some unknown reason. Also suggest something for length of options.

Collectives™ on Stack Overflow

angularjs how to make dropdown size same as inputbox in a div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related