Is this the correct format for form-group and input-group I am not getting the correct width on the txtstartIpAddr input control?
<div class="form-group" id="NewIpRangeRow">
<label>
<xsl:text>Start IP Address</xsl:text>
</label>
<div class="input-group">
<input class="form-control" id="txtstartIpAddr" style="width 100 !important;"></input>
</div>
<label>
<xsl:text>End IP Address</xsl:text>
</label>
<div class="input-group">
<input class="form-control" id="txtendIpAddr" disabled="true" style="width 100 !important;"></input>
<span class="input-group-addon btn btn-nccnBlue">
<xsl:attribute name="onclick">
<xsl:text>UpdateAccess(5)</xsl:text>
</xsl:attribute>
<i class="fa fa-save" style="color:#FFF"></i>
</span>
</div>
</div>
CSS syntax is property-name : property-value so width: 100px not width 100.
Related
'''
My problem is database values can't stored properly
In below I uploded views functions file,model file as an images. so in model there are three fields but database stored only image stored and other vlaues strored by default get null values so can you help to solving my problem..
'''
userproblem.html
<form method="POST" action="/uploadoc/" enctype="multipart/form-data" data-toggle="validator">
{% csrf_token %}
<div id="progressbarwizard">
<ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3">
<li class="nav-item">
<a href="#account-2" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
<i class="mdi mdi-account-circle mr-1"></i>
<span class="d-none d-sm-inline">Query Form</span>
</a>
</li>
</ul>
<div class="tab-content b-0 mb-0">
<div class="tab-pane" id="account-2">
<div class="row">
<div class="col-md-5">
<label class="col-md-12 col-form-label">Query Types:
<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" class="form-control" data-validate="true" name="queryn" placeholder="Enter Query Types">
</div>
</div>
<div class="col-md-5">
<label class="col-md-12 col-form-label">Description of Query:
<span class="text-danger">*</span></label>
<div class="col-md-12">
<textarea type="text" class="form-control" data-validate="true" name="querydec" placeholder="Description of Query"></textarea>
</div>
</div>
</div><!-- /.First row end --><br>
<div class="row">
<div class="col-md-5">
<label for="Emailadrress" class="col-md-12 col-form-label">Upload Your File:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<input type="file" id="img" name="img" accept="image/*">
</div>
</div>
</div>
<div class="col-md-6">
<label for="Emailadrress" class="col-md-12 col-form-label">Solutions:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<textarea type="text" name="querysol" placeholder="Solutions of Query"></textarea>
</div>
</div>
</div>
</div> <!-- /.second row end -->
</div><br>
<div class="row">
<div class="col-12">
<div class="text-center">
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Submit
</button>
</div>
</div>
</div>
</div> <!-- end col -->
</div>
</div> </div>
</form>
'[This is error and views function file my model imagespage][1]
You are trying to set c variable from userProblemModel named POSTed data in your uploadoc view.
c = request.POST.get('userProblemModel')
But in your form in html side there is no userProblemModel named input tag. That is why you are getting None value in c variable.
I am using Bootstrap modal.
The following is my code.
<!-- Modal -->
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Edit Equifax Credit Score Data</h4>
</div>
<div class="modal-body form-horizontal">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="equiFaxName"
placeholder="Name" readonly="readonly" />
</div>
</div>
<div class="form-group row">
<label for="startRangeModal" class="col-sm-2 col-form-label">Start
Range</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="startRangeModal"
placeholder="Start Range" />
</div>
</div>
<div class="form-group row">
<label for="endRangeModal" class="col-sm-2 col-form-label">End
Range</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="endRangeModal"
placeholder="End Range" />
</div>
</div>
<div class="form-group row required">
<label for="riskGradeModal" class="col-sm-2 col-form-label">Risk
Grade </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="riskGradeModal"
placeholder="Risk Range" />
</div>
</div>
<div class="form-group row required">
<label for="agentRiskGradeModal" class="col-sm-2 col-form-label">Agent
Display Grade</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="agentRiskGradeModal"
placeholder="Agent Display Grade" />
</div>
</div>
<div class="form-group row required">
<label for="hitCode" class="col-sm-2 col-form-label"> Hit
Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hitCodeModal"
placeholder="Hit Code" />
</div>
</div>
<div class="form-group row required">
<label for="hitCodeResponse" class="col-sm-2 col-form-label">
Hit Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hitCodeResponseModal"
placeholder="Hit Code Response" />
</div>
</div>
<div class="form-group row required">
<label for="approvalTypeListModal" class="col-sm-2 col-form-label">Approval
Type</label> <select id="approvalTypeListModal" class="form-control">
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary"
data-dismiss="modal">Cancel</button>
<button class="btn btn-success"
id="submitEditModalData">Save</button>
</div>
</div>
</div>
</div>
In the modal all the form inputs are inline horizontal but the select tag shows below the label and is not inline with the label.
Can someone help me in putting the select box in line and not below the label.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group row required">
<label for="approvalTypeListModal" class="col-md-2 col-sm-2 col-xs-2 col-form-label">Approval
Type
</label>
<div class="col-md-10 col-sm-10 col-xs-10">
<select id="approvalTypeListModal" class="form-control">
<option value="option1">Option1</option>
</select>
</div>
</div>
You forgot to put class col-md-* .
You can put it in select tag or can make a new div and give it to that class.
Hope this helps.
I have a html page with 3 checkboxes. Each text box has a text beside it.
The checkboxes are nested in div tags.
I would like to select the checkbox which has the text "Clean"
My Xpath is selecting 3 checkboxes.
How do I select the checkbox which has the text Clean?
It is inside the div tag with the id id="operations_edit_process_list_task_1"
My Xpath is:
//div[#id="operations_edit_process_list_task_1"]//span[text()="Clean"]//following::span[#title="Turn group off or on."]/input[1]
The HTML is:
<div id="operations_edit_process_list_task_1">
<span>
<span/>
<span>
<span title="Turn group off or on." style="">
<input type="checkbox" checked="" tabindex="-1"/>
</span>
</span>
<span/>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="overflow: hidden; display: none;"/>
</div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="2" aria-expanded="false" aria-level="1">
<div class="GJPPK2LBIF GJPPK2LBAG" style="padding-left: 0px;">
<div class="GJPPK2LBIF GJPPK2LBKF GJPPK2LBCG" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF GJPPK2LBBG" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<div>
<div id="operations_edit_process_list_task_2">
<span>
<span class="myinlineblock" title="Match"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;width:100%;">Match</span>
</span>
<span/>
<span>
<span title="Turn group off or on." style="">
<input class="" type="checkbox" checked="" tabindex="-1"/>
</span>
</span>
<span/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="3" aria-expanded="false"
aria-level="1">
<div class="GJPPK2LBIF GJPPK2LBAG" style="padding-left: 0px;">
<div class="GJPPK2LBIF GJPPK2LBKF GJPPK2LBCG" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF GJPPK2LBBG" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<div>
<div id="operations_edit_process_list_task_3">
<span>
<span class="myinlineblock" title="PossMatch"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;width:100%;">PossMatch</span>
</span>
<span/>
<span>
<span title="Turn group off or on." style="">
<input class="" type="checkbox" checked="" tabindex="-1"/>
</span>
</span>
<span/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks,
Riaz
Xpath to select the input box in the div id="operations_edit_process_list_task_2" and having the text "Clean" :
"//div[#id='operations_edit_process_list_task_2'][.//span='Clean']//input"
Or:
"//div[#id='operations_edit_process_list_task_2' and contains(.,'Clean')]//input"
In my bootstrap form there is unusual gap between rows though they have similar declarations.Also, select boxes looks bigger than what I see in examples,
Here is the problem,
Any idea what's wrong ?
Here is the code,
<div class="panel-body">
<div class="tab-content">
<div id="content_obsinfo" class="tab-pane active">
<div class="col-sm-12">
<div class="row">
<div class="panel-body form-horizontal form-padding">
<div class="form-group">
<!-- BEGIN: Logged By Name -->
<div class="col-sm-2">
<label for="pro_LoggedByName" class="col-sm-12 control-label">Logged by name</label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="pro_LoggedByName" name="pro_LoggedByName" value="" > </div>
<!-- END: Logged By Name-->
<!-- BEGIN: Manager-->
<div class="col-sm-2">
<label for="top_Manager" class="col-sm-12 control-label">Manager</label>
</div>
<div class="col-sm-4">
<div class="radio">
<label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager" value="Yes">Yes</label><label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager" value="No">No</label>
</div>
</div>
<!-- END: Manager-->
</div>
</div>
</div> <!-- End of row 1 -->
<div class="row">
<div class="panel-body form-horizontal ">
<div class="form-group">
<!-- BEGIN: Conducted On -->
<div class="col-sm-2">
<label for="pro_ConductedOn" class="col-sm-12 control-label">Conducted on</label>
</div>
<div class="col-sm-4">
<div class="input-group date" id="conductedon">
<input type="text" class="form-control" id="pro_ConductedOn" name="pro_ConductedOn" value="8-Oct-2015" >
<span class="input-group-addon">
<i class="fa fa-calendar fa-lg" title="Open Calendar"></i>
</span>
</div>
</div>
<!-- END: Conducted On -->
<!-- BEGIN: Employed By-->
<div class="col-sm-2">
<label for="top_EmployedBy" class="col-sm-12 control-label">Employed by</label>
</div>
<div class="col-sm-4">
<select data-placeholder="Select employed by" id="top_EmployedBy" name="top_EmployedBy" class="chosen-select" >
<option value=""></option><option value="Company">Company</option><option value="Maritime">Maritime</option><option value="Other">Other</option><option value="Subcontractor">Subcontractor</option><option value="Third party">Third party</option>
</select>
</div>
<!-- END: Employed By-->
</div>
</div>
</div> <!-- End of row 2 -->
<div class="row">
<div class="panel-body form-horizontal ">
<div class="form-group">
<!-- BEGIN: Confidentiality -->
<div class="col-sm-2">
<label for="pro_Confidentiality" class="col-sm-12 control-label">Confidentiality</label>
</div>
<div class="col-sm-4">
<div class="radio">
<label class="form-radio form-normal form-text form-success "><input type="radio" name="pro_Confidentiality" value="Public">Public</label><label class="form-radio form-normal form-text form-success "><input type="radio" name="pro_Confidentiality" value="Private">Private</label>
</div>
</div>
<!-- END: Confidentiality -->
<!-- BEGIN: Job Position-->
<div class="col-sm-2">
<label for="top_JobPosition" class="col-sm-12 control-label">Job position</label>
</div>
<div class="col-sm-4">
<select data-placeholder="Select Job position" id="top_JobPosition" name="top_JobPosition" class="chosen-select" >
<option value=""></option><option value="Administration">Administration</option><option value="Catering">Catering</option><option value="Client">Client</option><option value="Communication">Communication</option><option value="Deck hand">Deck hand</option><option value="Deck office">Deck office</option><option value="Drivers">Drivers</option><option value="Engineer / electrician">Engineer / electrician</option><option value="Gun mechanic">Gun mechanic</option><option value="Laborers">Laborers</option><option value="Maintenance">Maintenance</option><option value="Management">Management</option><option value="Mechanic">Mechanic</option><option value="Navigator">Navigator</option><option value="Observer">Observer</option><option value="Other">Other</option><option value="Pilot / aviator">Pilot / aviator</option><option value="Processing">Processing</option><option value="Safety - HSE / medic">Safety - HSE / medic</option><option value="Shore">Shore</option><option value="Subcontractor">Subcontractor</option><option value="Support vessel crew">Support vessel crew</option><option value="Technician">Technician</option>
</select>
</div>
<!-- END: Job Position-->
</div>
</div>
</div> <!-- End of row 3 -->
</div>
</div>
</div>
</div>
When I inspect first and second rows,clearly see the difference
Another CSS in the project maybe?
row inside col-sm?
row inside row?
I want to display the text box for phone number in the following format
(555)-555-5555.
Whenever I try to add the dashes or bracket they do not align correctly.
How can I achieve this?
Fiddle
Code:
<div class="row">
<div class="large-2 columns">
<label class="inline right">* Phone:</label>
</div>
<div class="large-3 columns">
<span>(</span>
<input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
<span>)</span> -
</div>
<div class="large-3 columns">
<input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-3 columns end">
<input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
<div class="row">
<div class="large-2 columns">
<label class="inline right">* Phone:</label>
</div>
<div class="large-6 columns">
<div class="row collapse">
<div class="large-3 columns">
<span class="prefix"> ( </span>
</div>
<div class="large-6 columns">
<input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
</div>
<div class="large-3 columns">
<span class="postfix"> ) - </span>
</div>
</div>
</div>
<div class="large-2 columns">
<input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-2 columns end">
<input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
</div>
I think this is right, you may want to change the sizes of things but it all fit's together the way I think you're after.
EDIT
Like this then?
<div class="row">
<div class="large-3 columns">
<label class="inline right">* Phone:</label>
</div>
<div class="large-3 columns">
<div class="row collapse">
<div class="large-1 columns">
<p class="">(</p>
</div>
<div class="large-10 columns">
<input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
</div>
<div class="large-1 columns">
<p class="">)-</p>
</div>
</div>
</div>
<div class="large-3 columns">
<input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-3 columns end">
<input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
</div>
Can't help but think it looks better with the post and pre fix though.