This question already has answers here:
<select> placeholder with angular/bootstrap not working
(2 answers)
Closed 7 years ago.
I have a select box, Pretty basic, shown below
<div ng-if="field.field_type == 'select'">
<p><strong>{{field.field_name}}:</strong></p>
<div class="form_field"><label class="fontawesome-pencil" for="login_Custom"></label>
<div class="input-group col-xs-8">
<style media="screen">
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em;
}
</style>
<select class="selectpicker form-control" default-option="Test" name="cusdropdown" ng-model="testInfo" ng-options="i.val as (i.nam) for i in field.options" style="width:450px"></select> <span class="input-group-addon buttonlike" ng-click="removeRegistrationfield($index)"><i class="fa fa-trash"></i></span></div>
</div>
</div>
I'm wanting the field.field_name as the placeholder, I know how to do this in html, Which is like this
<select>
<option value="" disabled selected hidden>Please Choose</option>
<option value="0">Open when powered (most valves do this)</option>
<option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
However how can i do this inside angular?
Thanks
You can use ng-options and add yourself a placeholder at the same time.
Duplicate : <select> placeholder with angular/bootstrap not working
Related
I'm trying to use the Bootstrap input-group-prepend with react-select, however react-selects' styling doesn't seem to be the current bootstrap/reactstrap and so doesn't want to work together.
The select box doesn't merge with the prepend element (radius 4px on all corners instead of just right corners), also the box shadow on the element is totally different to what bootstrap 4 uses, this creates an annoying consistency issue.
This gives the desired look and feel, and stays the same when using .map for the options.
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText><FaBriefcaseMedical /></InputGroupText>
</InputGroupAddon>
<Input type="select" name="select" id="ConsultantSelect">
<option value="" value disabled selected>Select Consultant</option>
<option>Roland Deschain</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</InputGroup>
This however is using react-select doesn't display as expected/desired
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText><FaHSquare /></InputGroupText>
</InputGroupAddon>
<Select
options={this.state.hospitals}
name={this.state.hospitals}
/>
</div>
Iconography is important for what I'm doing due to the target audience.
EDIT:
a janky work around is to give the react-select className="form-control" and then then style it to match Bootstrap4.
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText><FaHSquare /></InputGroupText>
</InputGroupAddon>
<Select className="form-control"
options={this.state.hospitals}
name={this.state.hospitals}
/>
</InputGroup>
.css-2b097c-container {
padding: 0px;
}
.css-yk16xz-control {
background-color: #ffffff00 !important;
border-style: none !important;
}
.css-1pahdxg-control {
border-color: #80bdff !important;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
But this is clearly not a ideal solution.
The CCS changes result in the below, which now has the drop down appearing the same as a normal select input, and also matches the other inputs such as the text inputs.
What worked for me was to wrap the Select in a div with the class "form-control". It also needs a zero padding.
<div className="react-select form-control p-0">
<Select />
</div>
The first div inside Select also needs a -1px margin.
.react-select > div {
margin: -1px;
}
I have the same use case as you. Only I've been wrapping Select in a div with a % width style defined.
However, this has to be set for a screen size. It will cause the right side to be misaligned if the % is too small, or will create a new line if the % is too large.
<InputGroup className='mt-1'>
<InputGroupAddon addonType="prepend">
<InputGroupText>Select</InputGroupText>
</InputGroupAddon>
<div style={{width: '80%'}}>
<Select isMulti name='subjects'
options={optionsArray}
placeholder="Click or type"
/>
</div>
</InputGroup>
Can someone help with sample of embedding the lightning-icon inside a lightning-input in LWC
<lightning-input type="search" name="To Address" label="To"
class="slds-input-has-icon_right slds-m-bottom_small">
<lightning-icon icon-name=action:email>
</lightning-icon>
</lightning-input>
I have also tried the below Approach which doesn't work
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<lightning-icon icon-name="utility:adduser" size="medium">
</lightning-icon>
<input type="text" id="text-input-id-1" class="slds-input" />
</div>
Here is the solution!!
<lightning-button-icon class="btnIconOverlay" icon-name="utility:adduser">
</lightning-button-icon>
<lightning-input type="search" name="To Address" value={toAddress}>
</lightning-input>
Add the below CSS to the lightning-button-icon, which assist in overlaying the icon.
.btnIconOverlay {
position: absolute;
z-index: 1;
margin: 0.5% 0 0 92%;
}
Here is my HTML input tag on which I have created conditional ng-class
<input type="text" class="form-control" placeholder="label" name="label"
ng-required="true" ng-class="{ missing: $ctrl.flag=='true'}"
ng-model="$ctrl.DataToSend.label[$ctrl.language]" />
And here is my CSS
.missing {border: solid 1px red;}
When my $ctrl.flag is true ng-class should get applied but it's not happening. Why?
You have to put the class which you want to apply in quotation marks. Otherwise it looks for an AngularJS variable where the string for the class name is contained.
Also make sure your condition is not always false. In your case the $ctrl.flag variable might store a boolean value. So change your condition to: $ctrl.flag
Updated Code:
<input type="text" class="form-control" placeholder="label" name = "label" ng-required="true" ng-class="{ 'missing': $ctrl.flag }" ng-model = "$ctrl.DataToSend.label[$ctrl.language]"/>
You can try this snippet.
Jsfiddle link
Snippet:
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.flag = true;
$scope.toggleClass = function() {
$scope.flag = !$scope.flag;
};
});
.missing {border: solid 1px red;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='ctrl'>
{{flag}}
<input type='text' class='form-control' ng-model='test' ng-class="{'missing': flag}" />
<button ng-click='toggleClass()'>
Change
</button>
</div>
</div>
This will work
I found the Issue with my code there is some other CSS which is overriding to my 'missing' css when changed the overridden CSS its started working fine.
input[type="text"].missing {border: 1px solid #ff0000;}
Previously it was
input[type="text"] {border: 1px solid #ddd;}
I found 'md-position-mode' directive, but it works only with menu('md-menu'), help me please to find something similar for inputs dropdown
If by "inputs dropdown" you mean md-select you can use the md-container-class attribute with some CSS - CodePen
Markup
<md-input-container>
<label>State</label>
<md-select id="mySelect" ng-model="ctrl.userState" md-container-class="selectList">
<md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}" ng-disabled="$index === 1">
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
CSS
.selectList {
margin-left: 100px;
margin-top: 50px;
}
md-select documentation
I wanted to make simple form, without awesome div's and CSS - it structure is like:
<form id="cform" action="/" method="post">
<fieldset>
<label class="first" for="name">Nazwa firmy: </label><input id="name" name="name" type="text" />
<label class="first" for="email">Email: </label><input id="email" name="email" type="text" />
</fieldset>
</form>
CSS
#cform input, #cform textarea, #cform label, #cform select
{
float: left;
}
label.first, #cform input[type="submit"]
{
margin-bottom: 10px;
width: 150px;
float: left;
clear: both;
}
#cform textarea
{
width: 400px;
height: 250px;
margin-bottom: 10px;
}
In FF, IE8, Chrome and Opera it looks good. But in IE7 inputs are looking, like they don't have float at all. How to fix it? (version without adding divs please)
Aww, forgot link
http://site.amm.siedlce.pl/front/page/get/79/
IE7 doesn't support the attribute selector, input[type="submit"].
Reference them by class.