The code inside the signing container something look like this
the label is not moving or getting hide after start typing in the text field
<div className="container">
<form className="while" onSubmit={this.onSubmit}>
<h5 className="grey-text text-darken-3"> Sign In</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={this.onChange} />
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={this.onChange} />
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Login</button>
</div>
</form>
</div>
Try adding class="active" to the label. it works for me!
Make sure the label comes AFTER the input, as per the documentation.
https://materializecss.com/text-inputs.html
just add this hook in your project!
useEffect(() => {
window.M.updateTextFields()
},[])
it is activate the text fields every time when
component first loading
you can add active className on label
but this
Related
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
I am using Angular Js, in which I am using bootstrap css. I have a ng-repeat added to the form. I have a submit button at the end of page. I have added a required field validation to each of the controls being created in ng-repeat. On click of submit button, if the data is not available in any of the rows in ng-repeat, I am showing a error message. This works fine. However, if there are 20 rows in ng-repeat, and if all are left empty, clicking on submit button is dragging the page, thereby the submit button becomes invisible. I have used the below code:
<link href="/Content/bootstrap.css" rel="stylesheet" />
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="row" ng-repeat="Descriptions in seasonsWithDescription ">
<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>
<br />
</div>
<br/>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
Adding screenshot to explain in more:
As you can see, the buttons are getting invisible when the error messages are shown. Is this the correct way to use css and span in ng-repeat. I have tried with setting
style="min-height:100px;"
in the form, but that did not solve it. How to fix this?
Thanks
It could work, but it's much more complicated than it needs to be. Check out angular forms (link below)
<div class="form-group col-md-5">
<textarea name="descriptionValidate_{{$index}}" class="form-control input-md noresize" required="" maxlength="500" ng-model="Descriptions.Description" noresize=""></textarea>
<span style="color: red;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
It will turn into (styling excluded)
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
https://angular.io/docs/ts/latest/guide/forms.html
There are a number of validation rules built into an Angular input
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
More on input validation usages: https://docs.angularjs.org/api/ng/directive/input
Hopefully this helps simplify some of your code
I am doing a school project and I need to make a sign in page. I have found this code, but it is not showing up in the center of the page. It is showing up on the left side of the page. Well, the first part is showing up on the left side and the second part is showing up on the right side. I need the right side below the left side after it is centered.
Here is my code:
<div class="container">
<div class="row">
<!-- left half of the page -->
<div class="col-xs-6">
<form class="form-signin" method="post" action="login.php">
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="text" name="emailaddress" id="inputEmail" class="form-control" placeholder="Email address" value="" required autofocus>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<!-- right half of the page -->
<div class="col-xs-6">
<h3>Not a member yet?</h3>
Join our club, it's the best!
</div>
</div>
</div>
What am I doing wrong? Should I add more code? Why is it showing up on the left side of my screen?
In the class part of the div element you want to center, write "centered".
For example, if you want to center the row, change
<div class="row">
to
<div class="row centered">
This is usually a preset style class in Bootstrap. If this doesn't work, you can also use a style setting:
<div class="row" style="text-align: center">
Simple solution:
<center>[code]</center>
Also <div class="centered"> is fine.
I am trying to get the Bootstrap datepicker working under a tab and it seems like some issues with it using with ng-required attribute. It is not updating the model value. Seems like a bug but not sure. If you take out ng-required attribute everything would work just fine.
Any help would be helpful.
plunker: http://plnkr.co/edit/NFcm0Bpu0y45LsrzVtpr?p=preview
$scope.data = {
opened: false,
record:
{
"Date of Birth": "2005-10-29T00:00:00"
}
<form name="mainForm" novalidate>
<div class="container" ng-form="subForm">
<tabset>
<tab>
<div class="row">
<div class="col-sm-3">
<div class="form-group" ng-class="{'has-error': subForm['test'].$invalid}">
<label class="control-label">Date of Birth</label>
<p class="input-group">
<input type="text" name="test" class="form-control" datepicker-popup="dd-MMM-yyyy" ng-model="data.record['Date of Birth']" is-open="data.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-disabled="false" ng-click="openDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</form>
It is working with Angular 1.2.16. The problem is when using with Angualar 1.3.0. Logged an issue with Angualr-ui.
I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>