I'm using "display: flex;" to align the sentences in my radio buttons but it looks weird using iPhone. Please see screenshot:
If I removed "display: flex;" the radio button looks fine but the text sentences are not aligned on the screenshot.
This is only happening in all iPhones not in android. Please see this example code below (run it please in iPhone and you'll see the weird radio button sizes)
.form-check label {
margin-bottom: 10px;
font-size: 18px;
width: 300px;
display: flex;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
label.form-check-label input {
margin-right: 10px !important;
}
<div class="form-check">
<label class="form-check-label">
<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" number="1" aria-label="..." value="I have my own ecommerce business"> I have my own ecommerce business (or want to build one)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio2" number="2" aria-label="..." value="I work for an ecommerce company"> I work for an ecommerce company
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio3" number="3" aria-label="..." value="I'm a freelancer / solo consultant doing marketing for ecommerce clients"> I'm a freelancer / solo consultant doing marketing for ecommerce clients
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio4" number="4" aria-label="..." value="I run or work for a marketing agency"> I run or work for a marketing agency
</label>
</div>
What should be done?
I added a min-width for the input radio:
Related
https://ibb.co/3M8TjjY
Codepen
https://codepen.io/shon-lucky/pen/WNozGRe?editors=1100
Trying to center this form and its beating me up. So far i have used margin: auto. But everytime i do the form centers but the input elements are not centered in the form. I have used positioning where i made the parent container relative and made the form absolute but the everything dissapears before i even try to move it. Can someone help me with this plz
<form action="">
<div class="firstrow">
<label for="How Many People">How Many People</label>
<input type="text">
</div>
<div class="firstrow">
<label for="date">Date</label>
<input type="text">
</div>
<div class="firstrow">
<label for="time">Time</label>
<input type="text">
</div>
<br style="clear:both">
<div class="secondrow">
<label for="name">Name</label>
<input type="text" placeholder="Your full name">
</div>
<div class="secondrow">
<label for="email">Email</label>
<input type="text">
</div>
<div class="secondrow">
<label for="Phone">Phone</label>
<input type="text" placeholder="You phone">
</div>
</div>
</form>
</section>
.section4{
width:100%;
height: 380px;
background-color: #374a5c;
}
.section4 .wrapper{
width:80%;
height:380px;
margin:auto;
border: 1px solid red;
}
form{
}
label,input{
display:block;
}
.firstrow{
float: left;
}
.secondrow{
float:left;
}
Thank you for the Codepen! Here is a fix to center the form elements:
Link to the edited pen : https://codepen.io/pathiout/pen/YzpaLdR?editors=1100
Here is the css I used :
.firstrow {
display: inline-block;
margin: 10px auto;
}
.secondrow {
display: inline-block;
}
Basically I removed the "float left" attributes that prevents any centering from parent. Is this an acceptable solution for you ?
Have you tried text-align? Sometimes in HTML, the text align can center html element other than text, I've used it many times already.
<div style="text-align: center"><input type="text"> ....
Can any one help me centering a search bar in the center of the screen for different screen size, just like the googles search bar?
I have tried many ways but nothing worked.
<form class="form input-group" role="search">
<div class="form-group center-block input-group-btn col-xs-12 col-sm-12 col-md-12col-lg-12">
<div class="center-block" style="width: auto;">
<div class="center-block ">
<input type="text" class="form-control text-center" style="width: auto;" id="exampleInputAmount" placeholder="Search">
<button type="submit" class="btn btn-default"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</div>
</div>
</div>
</form>
This CSS will centre your content both vertically and horizontally, which I think is what you are wanting to achieve.
position: absolute;
left: 50%;
top: 50%;
I have popup component in which I want to insert form validation on input element for name (required field and minlength 3 characters).
Is is possible to do it without setting up complete code in form tag?
<div class="scenario-div">
<label style="font-size: 1.4rem; font-weight: 400; margin-bottom: 10px;">{{context.header}}</label>
<div class="" style="width: 90%; margin-bottom: 10px; align-self: center;">
<div style="display: flex; flex-direction: column; margin-bottom: 10px;">
<label style="font-size: 1.2rem; font-weight: 500;">Name</label>
<div style="display:flex; flex-direction:row;">
<input type="text" [(ngModel)]="context.name" placeholder="enter Name" style="color: #569bd2; margin: 0px; width: 50%" minlength="3" required/>
<select *ngIf="context.showOptionDropdown" class="custom-select-project" style="width:50%" #optionSelect (change)="context.option.value">
<option disabled>Select type</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</div>
</div>
<div style="display: flex; flex-direction: column; margin-bottom: 10px;" *ngIf="!context.hideDescription">
<label style="font-size: 1.2rem; font-weight: 400;">Description</label>
<textarea rows="4" [(ngModel)]="context.description" cols="50" maxlength="250" placeholder="Enter text here" style="color: #569bd2; resize: none; font-weight: 400; font-size: 1.2rem;"></textarea>
</div>
</div>
<div>
<button class="btn-main" (click)="confirm(context)" style="width: 15%;">Confirm</button>
</div>
'Validation' based on ngModel
<input type="text" required name="title" [(ngModel)]="titleModel">
<span style="color:red" *ngIf="titleModel?.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!titleModel">
required
</span>
<button [disabled]="titleModel?.length > 10 || !titleModel">OK</button>
DEMO
'Validation' based on local template variable:
<input type="text" (keyup)='0' #title>
<span style="color:red" *ngIf="title.value.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!title.value">
required
</span>
<button [disabled]="title.value.length > 10 || !title.value">OK</button>
DEMO
You need to use FormControl from the reactive forms API, which can be used with a standalone <input> that's not wrapped into a <form> tag.
Component({
...
template: `<input type="text" [formControl]="name">`
})
class MyComponent {
name = new FormControl('',
[Validators.required, Validators.minLength(3)]);
}
I'm using sky-form library and bootstrap 3 to render my forms.
I have 3 inputs that I would like to wrap together.
I know that this requires custom css rules but I can't make it work as expected.
Please see attached image to better understand my need.
10x
Here's a start. You may want to fiddle with the focus highlights a bit.
http://jsfiddle.net/isherwood/vqkma/
<style>
.joined-left {
margin-right: -10px;
}
.joined-right {
margin-left: -10px;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control joined-left" id="exampleInputEmail2" placeholder="Enter email" />
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control joined-right" id="exampleInputPassword2" placeholder="Password" />
</div>
Let's say I have 10 input fields and before the input fields on the left side I have span tag that holds the text to indicate what the user should enter into the field. I did some stuff but I am unsure how to add space in between the span tag and the input field regardless of how big the text is?
Like this:
2019 answer:
Some time has passed and I changed my approach now when building forms. I've done thousands of them till today and got really tired of typing id for every label/input pair, so this was flushed down the toilet. When you dive input right into the label, things work the same way, no ids necessary. I also took advantage of flexbox being, well, very flexible.
HTML:
<label>
Short label <input type="text" name="dummy1" />
</label>
<label>
Somehow longer label <input type="text" name="dummy2" />
</label>
<label>
Very long label for testing purposes <input type="text" name="dummy3" />
</label>
CSS:
label {
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
width: 400px;
line-height: 26px;
margin-bottom: 10px;
}
input {
height: 20px;
flex: 0 0 200px;
margin-left: 10px;
}
Fiddle DEMO
Original answer:
Use label instead of span. It's meant to be paired with inputs and preserves some additional functionality (clicking label focuses the input).
This might be exactly what you want:
HTML:
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
CSS:
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
jsfiddle DEMO here.
This can be accomplished using the brand new CSS display: grid (browser support)
HTML:
<div class='container'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
When using css grid, by default elements are laid out column by column then row by row. The grid-template-columns rule creates two grid columns, one which takes up 1/4 of the total horizontal space and the other which takes up 3/4 of the horizontal space. This creates the desired effect.
JS-FIDDLE
You can use a table
<table class="formcontrols" >
<tr>
<td>
<label for="firstName">FirstName:</label>
</td>
<td style="padding-left:10px;">
<input id="firstName" name="firstName" value="John">
</td>
</tr>
<tr>
<td>
<label for="Test">Last name:</label>
</td>
<td style="padding-left:10px;">
<input id="lastName" name="lastName" value="Travolta">
</td>
</tr>
</table>
The result would be:
You can also used below code
<html>
<head>
<style>
.labelClass{
float: left;
width: 113px;
}
</style>
</head>
<body>
<form action="yourclassName.jsp">
<span class="labelClass">First name: </span><input type="text" name="fname"><br>
<span class="labelClass">Last name: </span><input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
You can always use the 'pre' tag inside the label, and just enter the blank spaces in it, So you can always add the same or different number of spaces you require
<form>
<label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre>
<input type="text"></label>
<label>Last Name :<pre>Now Enter enter number of spaces to match above number of
spaces</pre>
<input type="text"></label>
</form>
Hope you like my answer, It's a simple and efficient hack