i searched through similar questions and still could not find a solution. I have a fontawesome icon that triggers an expanding form.
<div class='create-inventory-form'></div>
<div class='icon fa fa-pencil' id='form-container'>
<!-- <span>Create</span> I tried this but it only shows on the pop-up form-->
<span class='icon fa fa-close' id='form-close'></span>
<div id='form-content'>
<div id='form-head'>
<h1 class='pre'>Add New Item to Inventory</h1>
<p class='pre'>Good choice...</p>
<h1 class='post'>Thanks!</h1>
<p class='post'>I'll be in touch ASAP</p>
</div>
<form>
<input class='input name' name='user_name' placeholder='Your name please' type='text'>
<input class='input email' name='user_email' placeholder='A contact email' type='text'>
<select class='input select' name='subject'>
<option disabled=''>What shall we talk about?</option>
<option selected=''>About a new project</option>
<option>About a job opportunity</option>
<option>Let's do this over a coffee</option>
</select>
<textarea class='input message' placeholder='How can I help?'></textarea>
<input class='input submit' type='submit' value='Send Message'>
</form>
</div>
</div>
this is what i have with the code above
this is what i want to create
If you want the respective text to be vertically aligned center with the icon so you have to set a css property Vertical align : middle to your icon class.in your case
.fa-pencil:before {
content: "\f040";
vertical-align: middle;
}
Jsfiddle
.fa{
display:block;
text-align:center;
}
Related
HI I have the following html and this is part of the html.
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_16" id="klb_16" class="input-control-label">
Code
<span class="mandatory">*</span>
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<select name="kaf_16" id="kaf_16" aria-label="kaf_16" aria-required="true" data-sid="ddl_code" class="input-control" data-klookup="C_1" data-kcurrentval="" style="font-weight: bold;">
<option value="+01">+01</option>
<option value="+02">+02</option>
</select>
</div>
</div>
When clicked on drop down, the contents is showing out of the screen and I am viewing the contents in mobile view in the browser.
I tried the css as below but it is not working.
.tabularView .input-control{
position: relative;
}
I am trying to find the solution and learn in the process.
Im having issues with a script for a form that when a user clicks continue but not filled in a mandatory question the Additional Comments box becomes read only. the script for said comments box below:
<div class="ui-field-contain" id = 'additionalComment_div' style = 'display: block'>
<fieldset class="ui-grid-a">
<div class="ui-block-a" style="width: 50%">
<label for='additionalComment' id = 'additionalComment' style = '' class='labelbold, required'>Additional Comment</label>
</div>
<div class="ui-block-b" style="width: 50%">
<input type = 'Text' style='width: 100%;text-align: center; text-shadow: none !important;' data-mini='true' name='additionalCommentBox' id='additionalCommentBox' value='' class=' lightBG' >
</div>
</fieldset>
</div>
<!-- additionalComment End -->
I can type in the box before attempting to move onto the next page but not after.
Any help would be great
I want to align my drop-down to the next line placed in a table but unable to do so.
I tried break tag -
I tried div tag -
But all to no avail.
PLease help.
Here is the screenshot -
UI Drop downs image
code -
component.html
<table>
<tr>
<td>
<div style="margin-left:50px">
<div> barchart success data -
{{barChartDataKarzaEntire[0].data[0]}} </div>
<div> barchart error data
{{barChartDataKarzaEntire[1].data[0]}}
</div>
<p> Karza Success and Error
</p>
<form (ngSubmit)="viewKarzaData(karzaValue)"
[formGroup]="karzaDataForm">
<div class="form-group">
<div>
<label> Karza Bar C Name: </label>
</div>
<br>
<br>
<div>
<select style="width:240px" class="form-control"
name="viewKarzaDataName"
[formControl]="karzaDataForm.controls['viewKarzaDataName']"
[(ngModel)]='karzaValue' placeholder="Choose an Option"
(change)="viewKarzaData(karzaValue)">
<option value="">Select</option>
<option *ngFor='let i of karzaInterfaceNames'>{{i}}</option>
</select>
</div>
<br>
<br>
<div class="card">
<div class="card-header">
Karza Bar Chart
</div>
//code
</td>
</tr>
</table>
you can use css :
<table>
<tr>
<td>
<div style="margin-left:50px">
<div> barchart success data -
{{barChartDataKarzaEntire[0].data[0]}}
</div>
<div> barchart error data
{{barChartDataKarzaEntire[1].data[0]}}
</div>
<p> Karza Success and Error
</p>
<form (ngSubmit)="viewKarzaData(karzaValue)"
[formGroup]="karzaDataForm">
<div class="form-group">
<div class="label-container">
<label> Karza Bar C Name: </label>
</div>
<br>
<br>
<div class="select-container">
<select style="width:240px" class="form-control"
name="viewKarzaDataName"
[formControl]="karzaDataForm.controls['viewKarzaDataName']"
[(ngModel)]='karzaValue' placeholder="Choose an Option"
(change)="viewKarzaData(karzaValue)">
<option value="">Select</option>
<option *ngFor='let i of karzaInterfaceNames'>{{i}}</option>
</select>
</div>
<br>
<br>
<div class="card">
<div class="card-header">
Karza Bar Chart
</div>
//code
</div>
</div>
</form>
</div>
</td>
</tr>
</table>
css:
.form-group {
margin-bottom: 1rem;
display: flex;
}
.label-container{
width:10%;
}
.select-container{
width:40%
}
.card{
width:50%;
}
The code sample is:
<body>
<h4 style="position:absolute;left:200px;top:120px;">Mark skills to add</h4>
<div class=""style="position:absolute;top:170px;left:120px;width:1100px;background-color:#CCC;padding-bottom:50px;padding:20px;">
<form class="" action="AddSkills">
<h4 style="">Business Accounting Human Resources and Legal</h4>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="79" name="skill0"/> Accounting</p>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="80" name="skill1"/> Audit </p>
<h4 style="">Data Entry and Admin</h4>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="56" name="skill6"/> Article submission</p>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="57" name="skill7"/> Data entry </p>
<input type="hidden" value="<%=tot%>" name="tot"/>
<input style=""type="submit" value="Add selected skills" class="btn btn-danger">
</form>
</div>
</body>
I want the output to be like the one when using display:inline; (inside <p></p>) and the spacing to be like the one when using float:left;(inside <p></p>)
How do I do this?
P.S. -> I am fetching the contents from database on a jsp page. The code here is from the view-source
Try using display: inline-block.
Try using inline-block for paragraph and give width using percentages as below code
<body>
<h4>Mark skills to add</h4>
<div>
<form class="" action="AddSkills">
<h4 style="margin:0px;padding:0px;">Business Accounting Human Resources and Legal</h4>
<div style="width:100% !important;display:block; margin:0px; padding:0px;clear:both;">
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="79" name="skill0"/> Accounting</p>
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="80" name="skill1"/> Audit </p> </div>
<h4 style="margin:0px;padding:0px;display:block;width:100%;clear:both;">Data Entry and Admin</h4>
<div style="clear:both"> <p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="56" name="skill6"/> Article submission</p>
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="57" name="skill7"/> Data entry </p> </div>
</form>
</div>
</body>
Instead of dealing with this many div and inline styles use table add each title as one row and choices as cells of the row under it. then set the table width to 100%
I have two forms in jsp.
I want the input fields in both the forms to be center aligned and in single line.
I also hide a div which is shown when the input field studentName is clicked. If input field regNo is clicked, the div needs to be hidden. By default the div needs to be hidden
Now when I enter something in input field name, the alignment of two input fields changes badly
jsp code
<div id="mycontainer">
<form method="get" action="number" id="number">
<!-- <div id="regNoErrorMsgNumber">Only numbers are allowed</div> -->
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> <b>OR</b>
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name" >
<c:set var="salary" scope="session" value="${param.studentName}"/>
<div id="dropDown" style="display:none">
<div id="studentNameError">
<c:if test="${searchBy.hasError}">
<c:out
value="There are more than 100 results by this name. We suggest you to filter by College Name and/or Department Name" />
</c:if>
<br />
</div>
<div>
<b>Filter students by College :</b> <select id="byCollege" name="byCollege">
<c:forEach items="${uniqueCollList}" var="uniqueCollList">
<option value="${uniqueCollList}">${uniqueCollList}</option>
</c:forEach>
</select>
</div>
<br />
<div>
<b>Filter students by Department :</b> <select id="byDept" name="byDept">
<c:forEach items="${uniqueDeptList}" var="uniqueDeptList">
<option value="${uniqueDeptList}">${uniqueDeptList}</option>
</c:forEach>
</select>
</div>
<br />
</div>
</form>
</div>
css code
#mycontainer, h1, h3 {
text-align:center;
}
form{
display:inline-block;
}
JS code
$('#dropDown').hide();
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
$(document).ready(function(){
$('#regNo').click(function(event){
$('#studentName').val('');
$('#dropDown').hide();
});
$('#studentName').click(function(event){
$('#regNo').val('');
$('#dropDown').show();
});
});
Here is the code http://jsfiddle.net/7zwvcs4n/
Add vertical-align:top; to the css for the form
#mycontainer, h1, h3 {
text-align:center;
}
form{
vertical-align:top;
display:inline-block;
max-width: 49%;
text-align:left;
}
I updated your fiddle http://jsfiddle.net/7zwvcs4n/2/