Set width of HTML Select (DropDownList) in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I have 2 select text boxes. based upon country it can change state

everything is ok probelm is that

initally after clicking of add button if you can look at into form state was displaying in small size

if i can change country then state can be resizing

my requirement is that i need to fix the size of state textbox after clicking of add button

could you please help me

@{
    Layout = null; 
}
<html ng-app="myApp">
<head>
    <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                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('change');
                        });
                    };

                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            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("myCntrl", ['$scope', '$http', function ($scope, $http) {
            $scope.mahesh = false;
            GetCountries();
            function GetCountries() {
                debugger;
                $scope.countries = [];
                $http({
                    method: 'Get',
                    url: '/party/GetCountry/',
                }).success(function (data, status, headers, config) {
                    $scope.countries = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            //Get State Name
            $scope.GetStates = function () {
               
            }

            //Add Party  details
            $scope.AddPartyDiv = function () {
                $scope.mahesh = true;
                GetCountries();
                $scope.Action = "Add";
            }
        }]);
    </script>
</head>
<body ng-controller="myCntrl">
    <div class="container">
        <div>
            <br />
            <br />
            <br />
            <div id="wrapper" class="clearfix" ng-show="mahesh">
                <div class="well">
                        <hr />                       
                        <div class="row">
                            <div class="col-md-3">
                                <label for="COI_Name">Country</label>
                                <select class="form-control input-sm" select2="" name="COI_Name" id="COI_Name" ng-model="COI_Name" ng-change="GetStates()" containerCssClass="all" ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled">
                                    <option value="">Select Country</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="STI_Name">State</label><br />
                                <select style="display:inline" select2="" ng-model="STI_Name" ng-disabled="!states" name="STI_Name"
                                        class="form-control input-sm" ng-options="s.STI_Id as s.STI_Name for s in states">
                                    <option value="">-- Select State --</option>
                                </select>
                            </div>
                        </div>                       
                </div>
            </div>          
            <button class="btn btn-success btn-sm " ng-click="AddPartyDiv();" >Add Party</button>
        </div>
    </div>
</body>
</html>

 

Posted one month ago

Hi mahesh213,

Set the width property of the select DropDownList.

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetCountry()
    {
        List<Country> countries = new List<Country>();
        countries.Add(new Country { COI_Id = 1, COI_Name = "Country 1" });
        countries.Add(new Country { COI_Id = 2, COI_Name = "Country 2" });
        countries.Add(new Country { COI_Id = 3, COI_Name = "Country 3" });
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetState(int id)
    {
        List<State> states = new List<State>();
        states.Add(new State { COI_Id = 1, STI_Id = 1, STI_Name = "State 1" });
        states.Add(new State { COI_Id = 1, STI_Id = 2, STI_Name = "State 2" });
        states.Add(new State { COI_Id = 3, STI_Id = 3, STI_Name = "State 3" });
        states = states.Where(x => 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; }
    }
}

HTML

<html ng-app="myApp">
<head>
    <title>Index</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                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('change');
                        });
                    };

                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            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("myCntrl", ['$scope', '$http', function ($scope, $http) {
            $scope.mahesh = false;
            GetCountries();
            function GetCountries() {
                $scope.countries = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetCountry/'
                }).success(function (data, status, headers, config) {
                    $scope.countries = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.GetStates = function () {
                var country = $scope.COI_Name;
                $http({
                    method: 'Get',
                    url: '/Home/GetState/',
                    params: { id: country }
                }).success(function (data, status, headers, config) {
                    $scope.states = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.AddPartyDiv = function () {
                $scope.mahesh = true;
                GetCountries();
                $scope.Action = "Add";
            }
        } ]); 
    </script>
</head>
<body ng-controller="myCntrl">
    <div class="container">
        <div><br /><br /><br />
            <div id="wrapper" class="clearfix" ng-show="mahesh">
                <div class="well">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="COI_Name">
                                Country</label>
                            <select style="display: inline; width: 252px;" class="form-control input-sm" select2=""
                                name="COI_Name" id="COI_Name" ng-model="COI_Name" ng-change="GetStates()" containercssclass="all"
                                ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled">
                                <option value="">Select Country</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="STI_Name">
                                State</label><br />
                            <select style="display: inline; width: 252px;" select2="" ng-model="STI_Name" ng-disabled="!states"
                                name="STI_Name" class="form-control input-sm" ng-options="s.STI_Id as s.STI_Name for s in states">
                                <option value="">-- Select State --</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-success btn-sm " ng-click="AddPartyDiv();">Add Party</button>
        </div>
    </div>
</body>
</html>

Screenshot