ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Set width of HTML Select (DropDownList) in ASP.Net MVC<p>Hi&nbsp;<a class="username" rel="mahesh213">mahesh213,</a></p> <p>Set the&nbsp;width property of the select DropDownList.</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult GetCountry() { List&lt;Country&gt; countries = new List&lt;Country&gt;(); countries.Add(new Country { COI_Id = 1, COI_Name = &#34;Country 1&#34; }); countries.Add(new Country { COI_Id = 2, COI_Name = &#34;Country 2&#34; }); countries.Add(new Country { COI_Id = 3, COI_Name = &#34;Country 3&#34; }); return Json(countries, JsonRequestBehavior.AllowGet); } public ActionResult GetState(int id) { List&lt;State&gt; states = new List&lt;State&gt;(); states.Add(new State { COI_Id = 1, STI_Id = 1, STI_Name = &#34;State 1&#34; }); states.Add(new State { COI_Id = 1, STI_Id = 2, STI_Name = &#34;State 2&#34; }); states.Add(new State { COI_Id = 3, STI_Id = 3, STI_Name = &#34;State 3&#34; }); states = states.Where(x =&gt; x.COI_Id == id).ToList(); return Json(states, JsonRequestBehavior.AllowGet); } public class Country { public int COI_Id { get; set; } public string COI_Name { get; set; } } public class State { public int STI_Id { get; set; } public string STI_Name { get; set; } public int COI_Id { get; set; } } }</pre> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html ng-app=&#34;myApp&#34;&gt; &lt;head&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link href=&#34;//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css&#34; /&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; var app = angular.module(&#34;myApp&#34;, []); app.directive(&#34;select2&#34;, function ($timeout, $parse) { return { restrict// Code goes here : &#39;AC&#39;, require: &#39;ngModel&#39;, link: function (scope, element, attrs) { console.log(attrs); $timeout(function () { element.select2(); element.select2Initialized = true; }); var refreshSelect = function () { if (!element.select2Initialized) return; $timeout(function () { element.trigger(&#39;change&#39;); }); }; var recreateSelect = function () { if (!element.select2Initialized) return; $timeout(function () { element.select2(&#39;destroy&#39;); element.select2(); }); }; scope.$watch(attrs.ngModel, refreshSelect); if (attrs.ngOptions) { var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1]; // watch for option list change scope.$watch(list, recreateSelect); } if (attrs.ngDisabled) { scope.$watch(attrs.ngDisabled, refreshSelect); } } }; }); app.controller(&#34;myCntrl&#34;, [&#39;$scope&#39;, &#39;$http&#39;, function ($scope, $http) { $scope.mahesh = false; GetCountries(); function GetCountries() { $scope.countries = []; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetCountry/&#39; }).success(function (data, status, headers, config) { $scope.countries = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.GetStates = function () { var country = $scope.COI_Name; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetState/&#39;, params: { id: country } }).success(function (data, status, headers, config) { $scope.states = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.AddPartyDiv = function () { $scope.mahesh = true; GetCountries(); $scope.Action = &#34;Add&#34;; } } ]); &lt;/script&gt; &lt;/head&gt; &lt;body ng-controller=&#34;myCntrl&#34;&gt; &lt;div class=&#34;container&#34;&gt; &lt;div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div id=&#34;wrapper&#34; class=&#34;clearfix&#34; ng-show=&#34;mahesh&#34;&gt; &lt;div class=&#34;well&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;label for=&#34;COI_Name&#34;&gt; Country&lt;/label&gt; &lt;select style=&#34;display: inline; width: 252px;&#34; class=&#34;form-control input-sm&#34; select2=&#34;&#34; name=&#34;COI_Name&#34; id=&#34;COI_Name&#34; ng-model=&#34;COI_Name&#34; ng-change=&#34;GetStates()&#34; containercssclass=&#34;all&#34; ng-options=&#34;c.COI_Id as c.COI_Name for c in countries&#34; ng-disabled=&#34;disabled&#34;&gt; &lt;option value=&#34;&#34;&gt;Select Country&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;label for=&#34;STI_Name&#34;&gt; State&lt;/label&gt;&lt;br /&gt; &lt;select style=&#34;display: inline; width: 252px;&#34; select2=&#34;&#34; ng-model=&#34;STI_Name&#34; ng-disabled=&#34;!states&#34; name=&#34;STI_Name&#34; class=&#34;form-control input-sm&#34; ng-options=&#34;s.STI_Id as s.STI_Name for s in states&#34;&gt; &lt;option value=&#34;&#34;&gt;-- Select State --&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;button class=&#34;btn btn-success btn-sm &#34; ng-click=&#34;AddPartyDiv();&#34;&gt;Add Party&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/QNNJ7gC.gif" alt="" width="302" height="248" /></span></strong></p>https://www.aspforums.net:443/Threads/165053/Set-width-of-HTML-Select-DropDownList-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/165053/Set-width-of-HTML-Select-DropDownList-in-ASPNet-MVC/Thu, 18 Jul 2019 03:02:18 GMT