select box in not displaying properly - css

Select list is not displaying properly.
Please see the images..
some height is conflicting, I am using angular ui-select for select list.
<ui-select id="viewSelector" class="viewSelector input-small" ng-model="dashboard.refresh" theme="selectize" style="width: 120px;" ng-change="autoRefreshUpdated()">
<ui-select-match placeholder="Select Interval">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="interval in autoRefreshIntervals">
<div ng-bind-html="interval"></div>
</ui-select-choices>
</ui-select>
Code rendered as :
<div class="viewSelector input-small ui-select-container selectize-control single ng-valid ng-touched ng-dirty ng-valid-parse" ng-class="{'open': $select.open}" id="viewSelector" ng-model="dashboard.refresh" theme="selectize" style="width: 120px;/* height: 10px !important; */" ng-change="autoRefreshUpdated()">
<div class="selectize-input" ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}" ng-click="$select.activate()">
<div ng-hide="($select.open || $select.isEmpty())" class="ui-select-match" ng-transclude="" placeholder="Select Interval"><span class="ng-binding ng-scope">5s</span>
</div>
<input type="text" autocomplete="off" tabindex="-1" class="ui-select-search ui-select-toggle ng-pristine ng-valid ng-touched ng-hide" ng-click="$select.toggle($event)" placeholder="Select Interval" ng-model="$select.search" ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)" ng-disabled="$select.disabled" aria-label="Select box">
</div>
<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single ng-scope ng-hide" repeat="interval in autoRefreshIntervals" style="opacity: 1;">
<div class="ui-select-choices-content selectize-dropdown-content">
<div class="ui-select-choices-group optgroup" role="listbox">
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header ng-binding ng-hide" ng-bind="$group.name"></div>
</div>
</div>
</div>
<ui-select-single></ui-select-single>
<input ng-disabled="$select.disabled" class="ui-select-focusser ui-select-offscreen ng-scope" type="text" id="focusser-1" aria-label="Select box focus" aria-haspopup="true" role="button">
</div>

Related

How can i position my Add Minus in form to stay same position in my input?

I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)
I try many as it seems only ways is a position to be fixed is there another way to do it?
Here the image
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
.flex{display: flex;}
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<div class="flex">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
</div>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>

Setting error message to right side of control bootstrap and Angular Js

I am using Angular js, in which i have the below control.
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container form-horizontal" ng-show="createMenu">
<br />
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
<div class="col-sm-4">
<input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Recipient Group:<em style="color:red">*</em></label>
<div class="input-group col-sm-4" style="padding-left:10px;">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" required="" placeholder="Search the group" ng-model="searchDatalocation" ng-change="searchgroups()" name="searchValue">
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.searchValue.$error.required">Please select a Recipient group.</span>
</div>
</div>
</form>
</div>
</body>
The error message "Please enter Name" appears on right side of the textbox, however, the error message "Please select a Recipient group" appers below the control. I have tried changing the css, but it has not worked. How to set the error message to be shown on right side after the control.
Thanks
Style the .input-group div with display: inline-table; and float:left;
Please also note that there is one missing closing tag </div> for class="container form-horizontal"

Form height to increase based on content in AngularJs

I have a angularJs form, which has multiple controls. When the page loads initially, all the contents fit in the form. When the validation messages are shown, the submit button, cancel button are not shown. These buttons are getting below.
Below is the code in index.cshtml. I have only put few controls, additional controls are also there.
<body class="ng-cloak">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<ul class="nav navbar-right nav-pills">
<li ng-class="{active: createMenu}">
Create</li>
<li ng-class="{active: dashboardMenu}">
Dashboard
</li>
</ul>
</div>
</nav>
</header>
</div>
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Groups:</label>
</div>
<div class="col-sm-4 form-group">
<select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)">
<option value="">-- Select the Group --</option>
</select>
</div>
</div>
<span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<br />
<div class="row">
<div class="col-sm-6">
<label class="control-label">Start date</label>
<div class="form-group">
<div class="input-group date" id="startDatepicker">
<input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End date</label>
<div class="form-group">
<div class="input-group date" id="endDatepicker">
<input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span>
</div>
<!--/col-->
<div class="col-sm-6">
<label class="control-label">Start Time</label>
<div class="form-group">
<div class="input-group" id="startTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End Time</label>
<div class="form-group">
<div class="input-group" id="endTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
</div>
</div>
<br/>
</div>
</div>
Is it possible to fit the contents even during the validation messages are shown? i am not setting any specific class to set height. How to make sure that submit and cancel button are also visible, when the form height increases. I checked this link extending a form's height to fit the content in the form , but could not find the solution.
Adding the snippet to show the issue:
Initial load shows as :
After error message:
Thanks
For making anything auto-adjustable according to its content, you can use min-height property.
min-height:100px;
Try this, add it in your form css, like this
<form name="mainForm" id="createForm"
ng-submit="mainForm.$valid && add()"
novalidate=""
style="min-height:100px;">

ng-repeat with error message alignment

I have a ng-repeat control having textbox, textarea, and a delete image icon. I am having a required validator added for the textbox , textarea. Once the span error message is shown, the alignment is getting distorted.
Below is the code used:
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
</div>
</div>
How to set the alignment properly for span when using ng-repeat? Initial load the controls are aligned correct. If i remove any item in title or description, and click submit, the error messages are shown, but the UI is getting distorted.
Thanks
Bootstrap's row class includes "clearfix"ing. This allows row's of varying height columns to consistently start at the left. Currently your html is using a nested div within your row class div as your repeating element. If you move the ng-repeat up to the row class div the clearfixing will take effect after each set of columns, and things should look visually as expected.
Updated HTML
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row" ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
The solution provided by #haxxxton is the answer, which is:
you should move your ng-repeat up to your as this will provide the "clearfix"'ing that bootstrap columns need in order to allow for the height change of the additional span. ie <div class="row" ng-repeat="Descriptions in testsWithDescription">

CSS - Horizontal Inline Alignment

I'm developing a website (http://madworks.fr/suparis/fr/tuniques/14-syakati-tunic.html) and I'd like to align horizontally the "color" "size" "qtt" and "add to cart" button on one single line. I did my best to try modifying the display properties to inline or table-cell but that didn't work out.
Same for the social networks who should be aligned with the wishlist icon.
Can someone help me achieve that ?
Here's the source code :
<form id="buy_block" action="http://madworks.fr/suparis/fr/panier" method="post">
<!-- hidden datas -->
<p class="hidden">
<input type="hidden" name="token" value="58dbb67dab473715d793e92ac45eb820">
<input type="hidden" name="id_product" value="14" id="product_page_product_id">
<input type="hidden" name="add" value="1">
<input type="hidden" name="id_product_attribute" id="idCombination" value="68">
</p>
<div class="box-info-product">
<div class="content_prices clearfix">
<!-- prices -->
<div class="price_box clearfix">
<p class="our_price_display pull-left" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer"><span id="our_price_display" itemprop="price" content="500">500,00 €</span><meta itemprop="priceCurrency" content="EUR"></p>
<p id="old_price" class=" hidden pull-left" style="display: none;"><span id="old_price_display" style="display: none;"></span></p>
</div> <!-- end prices -->
</div> <!-- end content_prices -->
<div class="product_attributes clearfix">
<!-- attributes -->
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_1">Taille </label>
<div class="attribute_list">
<div class="selector" id="uniform-group_1" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">S</span><select name="group_1" id="group_1" class="form-control attribute_select no-print">
<option value="1" selected="selected" title="S">S</option>
<option value="2" title="M">M</option>
</select></div>
</div> <!-- end attribute_list -->
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_3">Couleur </label>
<div class="attribute_list">
<div class="selector" id="uniform-group_3" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">Noir</span><select name="group_3" id="group_3" class="form-control attribute_select no-print">
<option value="8" title="Blanc">Blanc</option>
<option value="11" selected="selected" title="Noir">Noir</option>
</select></div>
</div> <!-- end attribute_list -->
</fieldset>
</div> <!-- end attributes -->
<!-- availability or doesntExist -->
<div id="availability_statut" style="display: none;">
<span id="availability_value" class=" st-label-warning">This product is no longer in stock</span>
</div>
<div id="availability_date" style="display: none;">
<span id="availability_date_label">Availability date:</span>
<span id="availability_date_value"></span>
</div>
<!-- Out of stock hook -->
<div id="oosHook">
</div>
</div> <!-- end product_attributes -->
<div class="box-cart-bottom">
<!-- quantity wanted -->
<div class="qt_cart_box clearfix ">
<p id="quantity_wanted_p">
<span class="quantity_input_wrap clearfix">
-
<input type="text" min="1" name="qty" id="quantity_wanted" class="text" value="1">
+
</span>
</p>
<div id="add_to_cart_wrap" class="">
<p id="add_to_cart" class="buttons_bottom_block no-print">
<button type="submit" name="Submit" class="btn btn-medium btn_primary exclusive">
<span>Add to cart</span>
</button>
</p>
</div>
</div>
<!-- minimal quantity wanted -->
<p id="minimal_quantity_wanted_p" style="display: none;">
The minimum purchase order quantity for the product is <b id="minimal_quantity_label">1</b>
</p>
</div> <!-- end box-cart-bottom -->
</div> <!-- end box-info-product -->
</form>
Ideally you would reorder your HTML so that the 4 elements would be under the same parent element, like:
<div id="attributes">
<fieldset class="attribute_fieldset"></fieldset>
<fieldset class="attribute_fieldset"></fieldset>
<p id="quantity_wanted_p"></p>
<div id="add_to_cart_wrap"></div>
</div>
and they would have display: inline-block; on them, adjust any padding/spacing as necessary, etc.
But if that's not possible or too difficult, you could do it with this CSS:
.product_attributes, .attribute_fieldset, .box-cart-bottom {
display: inline-block;
}
You'll just be left with some padding and classes to adjust until you get it to one line. I would reference a CSS tutorial and look up things like padding, display, floats, etc. if you're having trouble.

Resources