I am using Materialize-CSS in my React app with CSS-Modules.
I would like to use the default styling for input fields but when I try to apply the "browser-default" as indicated by the documentation linked below, the input fields still do not revert back to browser default styles.
https://materializecss.com/helpers.html#browser-default
import mStyles from 'materialize-css/dist/css/materialize.min.css';
<Field
label="EMAIL"
name="email"
inputStyle={`${styles.input} ${mStyles['browser-default']}`}
/>
The only solution I've found that comes close is to overwrite all the styles with !important. Obviously, this is inconvenient and hacky.
.input:focus {
border-bottom: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Any suggestions for a workaround or what I could be doing wrong?
Just give classname: browser-default to <label> and <input> tag and it'll become just like a default text-field.
CodeSandbox - Input Field Demo {.browser-default}
<label className="browser-default">First Name</label>
<input
placeholder="Enter name"
type="text"
className="browser-default"
/>
Related
The solution I found is installing Date picker plugin in react (npm install rc-datetime-picker) and using it on place of input html field having default date picker.
I cannot possibly go with this solution because I will have to make changes to every existing date picker in the project.
can you'll help me get a better solution to my problem.
<Input style ={{width:165, fontFamily:"Arial,sans-serif", fontSize:"13px",fontFamily:'Arial,sans-serif',margin:" 0px 0px 0px 20px"}}
type="date"
placeholder="Enter Verification Date"
value={r.doneDateAdminDisplay==null?"2020-01-01":r.doneDateAdminDisplay}
min="2020-01-01"
max={currentDate}
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onChange={(e) =>
this.onDoneDateChange(e, index, r.subCategoryID, r.implementationStatus)
}
readOnly={localStorage.getItem("userRole") == USER_ROLE.KLISM ? true : false}
/>
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>
I've got an issue with the Angular validation classes. I've got three classes in my css with three different images, that shows if the field is required, if the user has filled in correct or not. E.g. I have one input field where the user types in a personal number, and I look it up in a service and fills the model with firstname, lastname, address etc. which also populates the input fields.
I made a simple example
HTML
<div ng-app="ebu" ng-controller="search">
<button id="search-apparentice" ng-click="addName()">Search apprentice</button>
<hr>
<input id="username" type="text" ng-model="user.name" required>
</div>
JS
angular.module('ebu', []).
controller('search', function($scope) {
$scope.user = {};
$scope.addName = function()
{
$scope.user.name = "Kasper";
}
})
CSS
input[required].ng-invalid
{
border: 1px solid red;
}
input[required].ng-valid
{
border: 1px solid green;
}
input[required].ng-pristine
{
border: 1px solid blue;
}
[FiddleJS][1][1]: http://jsfiddle.net/kaspergantzhorn/z1wg6tko/9/
It's still pristine because pristine means it has never had focus. The user is not clicking on it, therefore it never gets dirty. If this isn't a user-modified field, pristine is not the right thing to use.
Additionally, in the ng-change of the input, you should be able to use $setDirty.
<input type="text" ng-change="formName.inputName.$setDirty()" />
For you code above:
<div ng-app="ebu" ng-controller="search">
<button id="search-apparentice" ng-click="addName(); myForm.name.$setDirty()">Search apprentice</button>
<hr>
<form name="myForm">
<input name="name" id="username" type="text" ng-model="user.name" required>
</form>
</div>
I'm new to AngularJS and needing help on how to toggle classes on form elements if the input is valid or invalid.
I have noted that most validation is done within the DOM - see here: https://scotch.io/tutorials/angularjs-form-validation
However, I'm wanting to avoid using the dom to handle validation. I want to use a custom directive to handle if a input is valid or invalid based upon validation rules.
Here is my HTML / Angular markup so far:
<fieldset ng-class="{error: loginForm.username.$invalid}">
<div class="form-input-error" ng-show="loginForm.$error">
Username is too short.
</div>
<div class="vfnz-fieldWrapper">
<input
type="text"
id="username"
ng-model="username"
class="vfnz-input--text"
placeholder="Username"
ng-minlength="3"
ng-maxlength="8" />
<label for="name" class="vfnz-input-label">
Username
</label>
</div>
</fieldset>
Here is a JSFIDDLE of my code so far
Basically when a input is invalid - add class to the fieldset. If the input is valid add class to fieldset.
from angular 1.3.x they came up with ng-messages ,i think you should try this. The advantages of using it is it will show the appropiate error if your input contains multiple error's.Add your class to the validation div
the below example checks for required and number .
<form name='cliForm'>
<input ng-model="vm.formData.newCreditLimit" type="text" name="changeCreditLimit" ng-pattern="/^[0-9]{1,15}$/" required />
<div class="highlight" ng-messages="cliForm.changeCreditLimit.$error" ng-if="cliForm.$submitted">
<div ng-message="required">* This field is required!</div>
<div ng-message="pattern">* Not a valid number!</div>
</div>
</form>
before using this include the ng-messages script since its in different module and inject the ng-messages to your angular module
I'm also looking for a solution to this issue, but the (lazy) answer I'm opting for right now is just to let some directives determine whether the element is valid or invalid, and just let angular handle the css classes. What I'm doing is to just add the ff to my css file:
.ng-invalid {
border-color: #e51c23;
color: #e51c23 !important;
}
.ng-error {
border-color: #e51c23;
color: #e51c23 !important;
}
.ng-valid {
border-color: #4CAF50;
color: #4CAF50 !important;
}
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.