I have inputs and labels in inside info class and I want each label and input to align by 1:3 on a single row no matter what the screen size is, plus I won't mind using flex classes, I just want a solution. Cheers
css
.info {
border: 2px solid steelblue;
border-radius: 10px;
padding: 10px;
}
.info input[type = 'text']{
margin: 10px;
padding: 5px;
border: 2px solid orange;
border-radius: 10px;
}
JSX
<div className = 'form'>
<h3 id = 'intro'>Join Us Here</h3><hr/>
<div className = 'info'>
<div>
<label>Business Name:</label> <input type='text' placeholder='Business Name' />
</div>
<div>
<label>Owner Name:</label> <input type='text' placeholder='Owner Name' />
</div>
<div>
<label>Receptionist Name:</label> <input type='text' placeholder='Receptionist Name' />
</div>
</div>
</div>
Although I agree on comments that you should do at least some research and this is simplest flex layout ever it's simple as adding display:flex on parent div and adding flex: 1 and flex: 3 on components.
I am sending you a working solution on codesandbox
https://codesandbox.io/s/wo6z1j23ll
Related
I needed a dropdown with multiple rows of text like this:
I used react-select with custom components:
import Select from 'react-select';
import DropDownOptions from './DropDownOptions';
import DropDownValueContainer from './DropDownValueContainer';
<Select
placeholder="Select Value"
options={options}
defaultValue={options[0]}
onChange={handleChange}
components={
{
Option: DropDownOptions,
ValueContainer: DropDownValueContainer
}
}
isSearchable={true}
/>
DropDownValueContainer
import React from "react";
import { components } from "react-select";
const DropDownValueContainer = ({ children, ...props }) => {
return (
<components.ValueContainer {...props}>
<div>
<div>{props.selectProps.value.label}</div>
<div>{props.selectProps.value.value}</div>
//There could be more html in here
</div>
</components.ValueContainer>
);
};
export default DropDownValueContainer;
Issue 1: This is causing a problem with tab-accessibility. The Select is not accessible with tab key anymore.
Issue 2: The Select is not searchable anymore.
If I remove the custom ValueContainer, then above two issues do not occur. I have already used this implementation in my project but I need to make it accessible.
Generated HTML code using custom component:
<div class=" css-1s2u09g-control">
<div class=" css-319lph-ValueContainer">
<div class=" css-qc6sy-singleValue">Header1</div>
<div class=" css-6j8wv5-Input" data-value="">
<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false"
tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-3-listbox"
aria-owns="react-select-3-listbox" role="combobox" value=""
style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"/>
</div>
</div>
Generated HTML code without custom component:
<div class=" css-1s2u09g-control">
<div class=" css-319lph-ValueContainer">
<div>
<div>Header1</div>
<div>value1</div>
</div>
</div>
Please help me understand what am I missing to make the input field work. Thanks.
I Was trying to create a login form. But while focusing the input field the whole page flickers. Below is the render code,
render() {
return (
<div>
<div className="row">
<div className="col-md-8 login-image"/>
<div className="col-md-4">
<div className="login-form">
<h2 className="mb-5">Form login</h2>
<form>
<p className="h5 text-center mb-4">Sign in</p>
<Input label="Email"
icon="envelope-open" group type="email"
validate error="wrong"
success="right"/>
<Input label="Password" icon="lock" group
type="password" validate/>
<div className="text-center">
<Button>Login</Button>
</div>
</form>
</div>
</div>
</div>
</div>
);
};
CSS Code
.login-image {
background: url("../../resources/coming-soon2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.login-form {
min-height: 100%;
min-height: 100vh;
padding: 50px;
}
I am getting the below output as expected but onFocus of thetextfield the whole webpage starts to flicker. It is happening only on chrome
login
Did You try to add also onBlur event? I've copied Your code, add onBlur event and it's working correct, without flickering.
I'm doing contact form here all name, email, phone number validations are working fine. but when I click to submit button alert is not working here I use ngMessage directive for validation.I just start learning angularjs.So, Is there any other alternate way for validation which is simple and have less code.
Help will be appreciated..
this is my code.
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});
body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<button type="submit"
ng-submit="Testform.$valid && submitForm()">Submit</button>
</form>
</body>
ng-submit should be on form tag instead of button
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});
body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg" ng-submit="submitForm()">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<button type="submit"
>Submit</button>
</form>
</body>
In submit button Instead of ng-submit use ng-click.
Demo link
You can use below code,
<form name="Testform" ng-controller="nameController" class="formbg" ng-
submit="submitForm()">
.
.
<button type="submit">Submit</button>
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
if($scope.Testform.$valid == true)
{
alert('Form submitted');
}
else
{
alert('Form submit failed');
}
};
});
hi i am new to angular js i have an aspx page in which i have a div tag which consists of login div and other div tags
i have set ng-app and ng-controller to main div tag and i have used update panel and scriptmanager and above this there is a form tag.
But when i try to show a div on a invalid pattern the div does not get displayed
below is my html
<body onload="heightpx()">
<form name="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="chatwindow" ng-cloak ng-app="s" ng-controller="sChat" class="col-md-4 col-xs-12" style="height: 100%; position: absolute; padding: 0px; float: right; bottom: 0px; right: 0px; z-index: 10001; background: #FFF; border: 1px solid #898989">
<div id="loginform" class="col-md-11 col-xs-11" ng-show="Islogin==false && ExistingCustomer==true" style="margin-top: 5px;">
<div class="form-group">
<input type="text" ng-model="Name" name="Name" placeholder="Name" class="form-control" id="uname" onkeyup="euname();" required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" />
<div class="custom-error" ng-show="form1.Name.$error.pattern">Not a valid subnet, should be i.e. 10.x.y. (3 bytes only)</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Your Form1 is outside the scope of angular. Therefore angular compiler doesnt read that form.
You can create form tag(loginForm) inside angular app and then use loginForm.Name.$error.pattern. It should work
I am trying to show and hide a value based on the radio button selection. I am doing this on ng-click of radio button. It is not working for me
Here is the HTML and Angular js code
**HTML Code:**
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHideTest=true">Show
<input type="radio" name="showHideExample" ng-model="showHideExample" value="multi" ng-click="showHideTest=false">hide
<div ng-snow="showHideTest" ng-model="showHideTest">Test hide and show</div>
</div>
**Angular JS Code:**
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
});
The reason your code doesn't work is there is a typo - ng-snow instead of ng-show.
You can also do this by binding the radio buttons to a boolean model (using ng-model), and use this variable to directly control the visibility of the div (using ng-show). Then you don't need any ng-click
HTML:
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideTest" ng-value="true">Show
<input type="radio" name="showHideExample" ng-model="showHideTest" ng-value="false">hide
<div ng-show="showHideTest">Test hide and show</div>
</div>
JS:
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
});
Fiddle
One Simple Answer without even using js.. https://codepen.io/SusanneLundblad/pen/iBhoJ
<div ng-app="">
<div class="wrap">
<h1>Hello there!</h1>
<p>Push the radio buttons to change the content!</p>
<form>
<label for="first">Show first content</label>
<input id="first" type="radio" name="content" ng-model="content" value="first">
<br />
<label for="other">Show other content</label>
<input id="other" type="radio" name="content" ng-model="content" value="other">
</form>
<div class="wrapper">
<p ng-show="content == 'first'">This is the first content!</p>
<h2 ng-show="content == 'other'">This is the other content!</h2>
</div>
</div>
</div>
CSS: (just for clarity i used)
html, body {
background-color: #ecf0f1;
margin: 20px auto;
display: block;
max-width: 600px;
height: 100%;
}
body {
padding: 20px;
position: relative;
}
label,h1,p,h2 {
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
}
h1 {
margin-bottom: 1.5em;
color: #3498db;
}
h2 {
color: #2980b9;
margin-bottom: 9px;
margin-top: 0;
font-size: 20px;
background-color: white;
text-align: center;
padding: 16px;
z-index: 15;
border-radius: 4px;
transition: all 2s ease-out;
}
.wrap {
width: 320px;
margin: 0 auto;
display: block;
}
label {
display: inline-block;
width: 180px;
line-height: 2
}
form {
margin-bottom: 2em;
}
.wrapper {
border: 1px dashed #95a5a6;
height: 56px;
margin-top: 16px;
border-radius: 4px;
position: relative;
font-size: 12px;
}
.wrapper p {
line-height: 31px;
text-align: center;
}
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHide(true)">Show
<input type="radio" name="showHideExample" ng-model="showHideExample" value="multi" ng-click="showHide(false)">hide
<div ng-snow="showHideTest" ng-model="showHideTest">Test hide and show</div>
</div>
**Angular JS Code:**
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
$scope.showHide = function(param){
$scope.showHideTest = param;
}
});
simple and fast solution, the ng-init="yourmodel='val1'" is to set the initial value
<input type="radio" name="name" ng-click="yourmodel='val1'"
ng-checked="yourmodel=='val1'" ng-model="yourmodel"
ng-init="yourmodel='val1'" > val 1
<input type="radio" name="name" ng-click="yourmodel='val2'"
ng-checked="yourmodel=='val2'" ng-model="yourmodel" > val 2
<div ng-if="yourmodel=='val1'"> Radio 1 clicked </div>
<div ng-if="yourmodel=='val2'"> Radio 2 clicked </div>
HTML Code Code:
Try this example, it will work.
<div ng-app="ssbApp" ng-controller="ssbCtrl">
<input type="radio" name="showHideExample" ng-model="showHideExample" ng-value="true">Show
<input type="radio" name="showHideExample" ng-model="showHideExample" ng-value="">hide
<div ng-snow="(showHideExample ==true)?true:false">Test hide and show</div>
</div>
Angular JS Code:
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
// $scope.showHideTest = false;
});