I have a div inside a form that is loading within the form on desktop but jumps out of the form tag when it is loaded on mobile. here is the code:
<div class="small-12 medium-5 large-3 columns end">
<form id="video-filter" class="video-filter" method="post">
<h2>Filter by</h2>
<div class="select-videospage">
<label for="sort" class="select-wrapper select-dark select-dark--videos">
<select name="filterby">
<option value="new">Most recent</option>
<option value="views">Most viewed</option>
<option value="likes">Most liked</option>
</select>
</label>
<label for="sort" class="select-wrapper select-dark--time">
<select name="time">
<option value="all">All</option>
<option value="week">Weekly</option>
<option value="month">Monthly</option>
<option value="year">Yearly</option>
</select>
</label>
</div>
<div class="video-filter__choosen">
<ul>
<!-- checkbox values will be appended here -->
</ul>
<button id="clear">Clear all</button>
</div>
</form>
</div>
The div that is loading outside of the form is "select-videospage". I cant figure out why the template would load differently on the two.
Related
I am developing a form in AMP, within this form, there is a register of students for enrollment. Users (parents) will be able to add two more students to the same registration. However, when I click to add another student, with all required forms filled out, amp-moustache displays the success message before clicking the submit button. When the new student is added by the user, the form is also required.
Sorry for my bad english.
<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- required fields -->
<div class="form-group">
<label for="" class="label-forms">Name 1: *</label>
<input name="" type="text" class="" required>
</div>
<br/>
<button id="add-2" class="button" hidden on="tap:e2.hide,add-2.hide,remove-2.show, AMP.setState({customvalue: ''})">Remove Name 2...</button>
<button id="remove-2" class="button" on="tap:e2.show,remove-2.hide,add-2.show, AMP.setState({customvalue: 'true'})">Add Name 2...</button>
<div id="e2" hidden>
<input name="" type="text" class="" [required]="customvalue">
<div id="div-edu2" class="form-group">
<select name="" class="input-default" [required]="customvalue">
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
<button id="add-3" class="button" hidden on="tap:e3.hide,add-3.hide,remove-3.show, AMP.setState({customvalue2: ''})">Remove Name 3...</button>
<button id="remove-3" class="button" on="tap:e3.show,remove-3.hide,add-3.show, AMP.setState({customvalue2: 'true'})">Add Name 3...</button>
<div id="e3" hidden>
<input name="" type="text" class="" [required]="customvalue2">
<div id="div-edu3" class="form-group">
<label class="label-forms" for="">Select 3: *</label>
<select name="" class="input-default" [required]="customvalue2">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
</div>
</div>
</div>
<!-- ... -->
<div class="col-10 mx-auto">
<input type="submit" value="Send">
</div>
<div submit-success>
<template type="amp-mustache">
<p class="text-center">Success!</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p class="text-center">Fail.</p>
</template>
</div>
IMG 1 - FORM
IMG 2 - ON CLICK ADD BUTTON
IMG 3 - AMP MESSAGE
I simply solved this problem by changing the html tag from <button> to <a></a>. Solved it, but I still haven't figured out the reason for the problem with the button.
I am working with angular and I am having the issue that when my page loads, some of my text just does not display at all. Only after resizing the window makes it appear or , after refreshing a few times. It also does this with button text but in this example with the <b> tags. Below are two images, the first one is the one when the text does not laod, the second one is when i resize the window and the third one if I put ? in front of each value in the methods
Thanks for helping!
html code:
<div id="title">
<span>Stagevoorstellen</span>
</div>
<div class="dropdowns">
<div id="one">
<b>Status voorstel</b>
<select #selectedStatus class="form-control" (change)="checkStatus(selectedStatus.value)">
<option value="ToApprove">Nog te keuren</option>
<option value="Rejected">Afgekeurd</option>
</select>
</div>
<div id="two">
<div>
<b>Afstudeerrichting</b>
<select #selectedSpecialisation class="form-control" (change)="checkSpecialisation(selectedSpecialisation.value)">
<option value="EVERYTHING">Alles</option>
<option value="AON">Applicatieontwikkeling</option>
<option value="SWM">Softwaremanagement</option>
<option value="SNB">Systemen en netwerkbeheer</option>
</select>
</div>
</div>
<div id="three">
<div>
<b>Reviewer</b>
<select #reviewerYesOrNo class="form-control" (change)="checkReviewerForNull(reviewerYesOrNo.value)">
<option value="notAssigned">Niet toegekend</option>
<option value="assigned">Toegekend</option>
</select>
</div>
</div>
</div>
try this : add ? mark before each .value
<div id="title">
<span>Stagevoorstellen</span>
</div>
<div class="dropdowns">
<div id="one">
<b>Status voorstel</b>
<select #selectedStatus class="form-control" (change)="checkStatus(selectedStatus?.value)">
<option value="ToApprove">Nog te keuren</option>
<option value="Rejected">Afgekeurd</option>
</select>
</div>
<div id="two">
<div>
<b>Afstudeerrichting</b>
<select #selectedSpecialisation class="form-control" (change)="checkSpecialisation(selectedSpecialisation?.value)">
<option value="EVERYTHING">Alles</option>
<option value="AON">Applicatieontwikkeling</option>
<option value="SWM">Softwaremanagement</option>
<option value="SNB">Systemen en netwerkbeheer</option>
</select>
</div>
</div>
<div id="three">
<div>
<b>Reviewer</b>
<select #reviewerYesOrNo class="form-control" (change)="checkReviewerForNull(reviewerYesOrNo?.value)">
<option value="notAssigned">Niet toegekend</option>
<option value="assigned">Toegekend</option>
</select>
</div>
</div>
</div>
I'm new to angular2
I want to create a function that when user choose an option the required form wil be show.
This is my html code
<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
<select class="form-control" id="select" name="select" size="1">
<option *ngFor="let obj of zone" value={{obj.id}} ngDefaultControl>
{{obj?.name}}</option>
</select>
</div>
Let's say a user chooses Zone 1, then a form for Zone 1 appears. If a user selects Zone 2, then a form for Zone 2 appears. And so on. How can I create those functions in Angular2? I want the form to appeared in the same html page.
You can simply do this with switch cases like below.
My HTML file:
<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
<select class="form-control" id="select" name="select" size="1" [(ngModel)]="selected">
<option *ngFor="let obj of zone" value={{obj.id}} ngDefaultControl>
{{obj?.name}}</option>
</select>
</div>
<div [ngSwitch]="selected">
<div *ngSwitchCase="1">
<p>1st Form</p>
</div>
<div *ngSwitchCase="2">
<p>2nd Form</p>
</div>
<div *ngSwitchCase="3">
<p>3rd form</p>
</div>
</div>
My TypeScript file
zone:Array<Object>=[
{id:1,name:"Name One"},
{id:2,name:"Name Two"},
{id:3,name:"Name Three"}
];
selected:number=0;
You can do this:
- Delare a property in component class to hold selected zone
- Then use ngIf base on above property
<label class="col-md-3 form-control-label" for="select">
<div *ngIf="selectedid==1">
Zone1
</div>
<div *ngIf="selectedid==2">
Zone2
</div>
</label>
<div class="col-md-9">
<select class="form-control" id="select" [(ngModel)]="selectedid" name="select" size="1">
<option *ngFor="let obj of zone" value={{obj.id}} ngDefaultControl>
{{obj?.name}}</option>
</select>
</div>
i am trying to align html controls next to each other without giving huge space and I try to override the bootstrap .css but no luck.
here is my screen looks like:
I have created JSFiddle and also below is my html code.
JSFIDDLE
<div class="row">
<div class="col-xs-4">
<div class="form-group1">
<label class="col-xs-5 control-label" for="">Rows per page:</label>
<div class="col-xs-4">
<form action="/SystemAdmin" id="form_header_pager" method="post" name=
"form_header_pager">
<select class="form-control" data-val="true" data-val-number=
"The field PageSize must be a number." data-val-required=
"The PageSize field is required." id="PageSize" name=
"PageSizeSelect">
<option selected="selected" value="10">
10
</option>
<option value="25">
25
</option>
<option value="50">
50
</option>
<option value="ALL">
ALL
</option>
</select>
</form>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<div>
<b>Total records:</b> 0
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group1">
<label class="col-xs-5 control-label" for="">Show Records:</label>
<div class="col-xs-7">
<form action="/SystemAdmin" id="form_header_show_records" method="post"
name="form_header_show_records">
<select class="form-control" id="ShowRecords" name="showrecords">
<option value="all">
Show All Records
</option>
<option value="invalid">
Show Invalid Records
</option>
<option value="valid">
Show Valid Records
</option>
</select>
</form>
</div>
</div>
</div>
</div>
The big spaces within your layout are caused from using the grid column widths. Bootstrap provides inline form element styling and it's recommended to use that instead of the grid columns.
The additional CSS adjustment I had to make was your totals area. Since it didn't have an input or select element, the vertical alignment was slightly off. If you had a row of inputs (as show in Bootstrap's documentation), you wouldn't need any additional CSS here.
You can view this corrected code snippet below. Please note that you must run it in "Full Page" mode to view it correctly. By default the form-inline tool only works in viewports greater than 768px.
.record-results {
display: inline-block;
margin-bottom: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="form-group">
<form action="/SystemAdmin" id="form_header_pager" method="post" name="form_header_pager">
<label for="PageSize">Rows per page:</label>
<select class="form-control" data-val="true" data-val-number="The field PageSize must be a number." data-val-required="The PageSize field is required." id="PageSize" name="PageSizeSelect">
<option selected="selected" value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="ALL">ALL</option>
</select>
</form>
</div>
<div class="form-group ">
<span class="record-results"><strong>Total records:</strong> 0</span>
</div>
<div class="form-group">
<form action="/SystemAdmin" id="form_header_show_records" method="post" name="form_header_show_records">
<label for="showrecords">Show Records:</label>
<select class="form-control" id="ShowRecords" name="showrecords">
<option value="all">Show All Records</option>
<option value="invalid">Show Invalid Records</option>
<option value="valid">Show Valid Records</option>
</select>
</form>
</div>
</div>
JSBIN
your layout is confused me. So I did another to achieve.
The key code:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Rows per page:</label>
<select name="" id="" class="form-control">
<option value="1">test</option>
<option value="1">test</option>
<option value="1">test</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail2">Total records:</label>
<span class="text-danger">99</span>
</div>
<div class="form-group">
<label for="exampleInputName2">Show Records:</label>
<select name="" id="" class="form-control">
<option value="1">test</option>
<option value="1">test</option>
<option value="1">test</option>
</select>
</div>
</form>
The form below is connected to a database and I would like the first two inputs in the form to display the data from the database in the form of a drop-down menu. Right now, all three inputs in the form have text entry inputs. I am still learning how to work around HTML and I would like to apologize in advance if this is too trivial of a question. I have searched around the web but couldn't find a clue to my question. Please find the HTML code below:
<div id="demo">
<div class="ui inputs">
<div class="ui icon input">
<input type="text" value="" placeholder="Sending From" class="form-control"/><i class="icon-user"></i>
</div>
<div class="ui icon input">
<input type="text" value="" placeholder="Sending To" class="form-control"/><i class="icon-envelope"></i>
</div>
<div class="ui icon input">
<input type="text" value="" placeholder="Weight" class="form-control"/><i class="icon-envelope"></i>
</div>
</div>
<div class="bus">Quote</div>
</div>
You would use a select tag with option subtags instead of using an input tag:
<select>
<option value="">Sending To</option>
<option value="5">Blah</option>
</select>
Instead of a placeholder, you would use an option with its value attribute set to a blank string. That way, when validating your form you can tell if the person filling out the form did not choose an option.
jsFiddle
You must use the <select> tag.
Take this as an example:
<div id="demo">
<div class="ui inputs">
<div class="ui icon input"> <i class="icon-user"></i>
<select class="form-control">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="ui icon input"> <i class="icon-envelope"></i>
<select class="form-control">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="ui icon input">
<input type="text" value="" placeholder="Weight" class="form-control" /><i class="icon-envelope"></i>
</div>
</div>
<div class="bus">Quote
</div>
Of course your <option> tags will be generated dynamically from your database values.
Here's a JS Fiddle to play with the code: http://jsfiddle.net/leniel/Dd4m8/
Use select tag for the purpose.
See following link http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3