CODEWITHSUNDEEP
htmlcssangularjsasp.net-mvcui-select
Ahmed All Razi
Ahmed All Razi

Reputation: 73

Required message is showing on top of page with ui-select2

When i am using required or ng-required="true" with select and ui-select2 element, it works fine. But the message is showing at top of the page not below the select element.enter image description here

Here below is my code

<div class="form-group">
                    <label class="col-sm-12  col-xs-12">Status<span style="color:red">*</span></label>
                    <select data-placeholder="Pick an Status" ng-model="Status" class="selectUI" ui-select2 ng-required="true">
                        <option value=""></option>
                        <option value="1">New</option>
                        <option value="2">Approve</option>
                        <option value="6">Recommandetion Denied</option>
                        <option value="7">Approval Denied</option>
                    </select>
                </div>

How can I solve this and show the message with the select element in my page. Thanks in advance.

Upvotes: 1

Views: 323

Answers (2)

shivani890
shivani890

Reputation: 1

Use this CSS code to customize the required message.

.selectUI[ng-required] {
    margin-top: 40px !important;
    margin-left: 100px !important;
}

Upvotes: 0

Ahmed All Razi
Ahmed All Razi

Reputation: 73

Solved this by overriding the default behavior of ui-select2 with 

    select2-offscreen,
   .select2-offscreen:focus {
        top: auto !important;
    }

Upvotes: 0

Related Questions