I am trying to figure out how to line my contact boxes up to fit properly. The problem I am running into is with my loop using the cfoutput query. I need to start a row only every three loops. This is never a set number and pulls straight from the database. How can I have <div class="row"> show up the first loop then skip the 2nd and 3rd but come back on the 4th loop then skip 5 and 6 and continue so on?
<div class="wrapper wrapper-content animated fadeInRight">
<cfoutput query="grab_contacts">
<div class="row">
<!-- Insert Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=#grab_contacts.employee_number#">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
<cfif len(grab_contacts.phone_extension)>
<div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
</cfif>
</div>
</div>
<div class="col-sm-8">
<h4><strong>#grab_contacts.firstname# #grab_contacts.lastname#</strong></h4>
<h5>
<strong>#grab_contacts.position#</strong><br><br>
<i class="fa fa-map-marker"></i> #grab_contacts.department# Department<br>
MCTC #grab_contacts.branch# Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here --></cfoutput>
</div>
</div>
Rows should look like:
1 2 3
4 5 6
7 8 9
EDIT: Still Having Issues
<div class="wrapper wrapper-content animated fadeInRight">
<cfoutput query="grab_contacts">
<cfif CurrentRow mod 3 eq 1>
<div class="row">
</cfif>
<!-- Insert Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=#grab_contacts.employee_number#">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
<cfif len(grab_contacts.phone_extension)>
<div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
</cfif>
</div>
</div>
<div class="col-sm-8">
<h4><strong>#grab_contacts.firstname# #grab_contacts.lastname#</strong></h4>
<h5>
<strong>#grab_contacts.position#</strong><br><br>
<i class="fa fa-map-marker"></i> #grab_contacts.department# Department<br>
MCTC #grab_contacts.branch# Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<cfif CurrentRow mod 3 eq 1>
</div>
</cfif>
</cfoutput>
</div>
How rows look now:
1
2 3 4
5 6 7
8 9
<cfif CurrentRow mod 3 eq 1>
<div class="row">
</cfif>
and then
<cfif CurrentRow mod 3 eq 0 or CurrentRow eq grab_contacts.recordCount>
</div>
</cfif>
at the end as well.
Related
I am struggling to get the layout sorted using the code below.
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 columns">
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-8 columns">
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-2 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
It produces the following.
I am trying to line up the bottom input with the one above (Project management).
Any ideas where I am going wrong?
Thanks,
John
Okay John,
It's a couple of things, first of all your bottom input is using 4 columns and the top input is only using 3 columns and secondly you are collapsing the gutters in your first row, but not collapsing them in the second.
You have a two rows, and within the top row you have nested smaller rows. You haven't nested any smaller rows in the bottom row that you have created. To get a little mathematical on you, the container for the first dollar sign is actually 1/6th of 1/3rd the screen width wide (or 1/18th), because you've nested a 2/12 column inside a 3/12 column. The second dollar sign is in a column 1/6th the width of the screen because it's in a 2/12 column. The reason that the top dollar sign doesn't fit in the second dollar sign 3 times has to do with extra width added by gutters.
But this will get it looking how you like:
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 large-offset-3 columns"><!-- add 'large-offset-3' to avoid any weirdness with this lining up in the future -->
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns"><!-- this row will take up nine columns -->
<div class="row collapse"><!-- collapsing this row will make it line up with the above collapsed row -->
<div class="small-12 columns"><!-- setting this to 12 will have it fill all of the parent 9 columns -->
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
</div>
</div>
<div class="large-3 columns"><!-- this takes up three columns and essentially matches the code for the the above row -->
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
Give that a go, be sure to read the comments I left in the html explaining everything. But basically you need to make sure that your using the same number of columns if you want things to line up, and if you collapse a row, you will need to collapse other rows that you want to line it up with.
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'd like to put 3 images next to one image in a responsive row layout but I can't figure out how to make the contents of this row to be equal in height. I can make the images any dimension if it's as simple as "The large image should be 900x1200px, the 3 small ones should be 300x500px" I am also using foundation4 for this as well. The images could be cropped or stretched a little too.
http://jsfiddle.net/uEyCF/2/
<div id="image_box">
<div class="col">
<img src ="http://placehold.it/200x100" />
<img src ="http://placehold.it/200x100" />
<img src ="http://placehold.it/200x100" />
</div>
<div class="col">
<img src ="http://placehold.it/200x350" />
</div>
</div>
This should get you started:
<div id="image_box" class="row">
<div class="small-6 large-6 columns left-col">
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
</div>
<div class="small-6 large-6 columns">
<img src="http://placehold.it/200x340" />
</div>
</div>
<style type="text/css">
.left-col img { margin-bottom:20px; float:right;}
</style>
I am having problems with my ColdFusion code returning "Element AUTHOR is undefined in FORM." whenever I submit my form. I've tried using <cfparam> to set comment.author but it didn't work either. I'm fairly new to ColdFusion so any reasoning comments would be great too!
<cfparam name="form.submitted" default="0" />
<cfset blogPost = EntityLoad('BlogPost',url.id,true) />
<cfif form.submitted>
<cfset comment = EntityNew('BlogComment') />
<cfset comment.author = form.author />
<cfset comment.comment = form.comment />
<cfset comment.createdDateTime = now() />
<cfset blogPost.addComment(comment) />
<cfset EntitySave(blogPost) />
</cfif>
<cfimport taglib="customTags/" prefix="layout" />
<layout:page section="blog">
<!-- Content Start -->
<!--Card -->
<div id="content">
<div class="card-pattern">
<!-- blog -->
<div id="blog">
<div class="clr">
<div class="top-bg1">
<div class="top-left">
<div><h1>Blog</h1></div>
</div>
</div>
<div class="clr">
<div class="pat-bottomleft"> </div>
<div class="pat-bottomright"> </div>
</div>
</div>
<div class="blog-top">
<div class="clr">
<cfoutput>
<div class="left">
<!-- Blog Title -->
<h2 class="big">
#blogPost.title#
</h2>
<!-- Date Published -->
<h5>
<strong>Date Posted</strong>: #dateformat(blogPost.dateposted,'mm/dd/yyyy')#
</h5>
<!-- Blog Body -->
#blogPost.body#
<!-- Blog Export -->
<p>
<img src="assets/images/export_pdf.png" border="0"/>
</p>
<!-- Blog Comments Section -->
<h3>
Comments #arrayLen(blogPost.getComments())#
</h3>
<div class="clr hline"> </div>
<div class="clr comments">
<ul>
<!-- Start Comment -->
<cfloop array="#blogPost.getComments()#" index="comment">
<li>
<p>
<strong>Posted On:</strong> #dateFormat(comment.createdDateTime,'mm/dd/yyyy')# at #timeformat(comment.createdDateTime,'short')# By #comment.author#
</p>
<p>
#comment.comment#
</p>
<div class="clr hline"> </div>
</li>
</cfloop>
<!-- End Comment -->
</ul>
</div>
<h3>
Post Comment
</h3>
<div class="clr hline"> </div>
<div class="clr postComment">
<form action="BlogPost.cfm?id=#blogPost.id#" method="post" id="form">
<div>
<label>Name <span class="font-11">(required)</span></label>
<input name="contactname" type="text" class="required" />
</div>
<div class="textarea">
<label>Comment <span class="font-11">(required)</span></label>
<textarea name="comment" rows="6" cols="60" class="required"></textarea>
</div>
<div>
<input id="submitBtn" value="Submit" name="submit" type="submit" class="submitBtn" />
</div>
<input type="hidden" name="submitted" value="1" />
</form>
</div>
</div>
</cfoutput>
<div class="right" >
<h2>Categories</h2>
<!-- Blog Specific Categories -->
<div id="categories" align="center">
<ul>
<li>ColdFusion</li>
<li>Development</li>
</ul>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div> <!--blog end -->
</layout:page>
The error is telling you what is wrong. There is no author element in your form OR there is no form scope at all. Here is the form code that you posted:
<form action="BlogPost.cfm?id=#blogPost.id#" method="post" id="form">
<div>
<label>Name <span class="font-11">(required)</span></label>
<input name="contactname" type="text" class="required" />
</div>
<div class="textarea">
<label>Comment <span class="font-11">(required)</span></label>
<textarea name="comment" rows="6" cols="60" class="required"></textarea>
</div>
<div>
<input id="submitBtn" value="Submit" name="submit" type="submit" class="submitBtn" />
</div>
<input type="hidden" name="submitted" value="1" />
</form>
It only contains 4 elements: contactname, comment, submit and submitted. This means that after the form is submitted ColdFusion will have access to: form.contactname, form.comment, form.submit and form.submitted. I presume that you are trying to set your comment.author variable to the contactname form field.
You could either change your code where you are setting the variable, like this:
<cfset comment.author = form.contactname />
Or you could change your code where the form field is defined, like this:
<input name="author" type="text" class="required" />
Either way, the references to the form scope must match the names that you give them in your HTML form. For what it's worth, you can always dump the form scope after it is submitted to see what is available, like this:
<cfdump var="#form#">
Also remember to sanitize all data that you receive from the client.
How can I sanitize user input but keep the content of <pre> tags?
Agreed, undefined because it doesn't exist in the form.
And definitely sanitize all form and url data. One example below:
<cfset myVar = ReReplaceNoCase(#FORM.formfield#,"<[^>]*>","","ALL")/>
I am testing foundation 3 framework and was wondering how i can set a row with five articles.
Does anyone have an idea to fix that?
One solution is to use columns of two and mark the last column as the end.
If your row doesn't have a count that adds up to 12 columns, you can
tag the last column with class="end" in order to override that
behaviour. [source]
<div class="row">
<div class="two columns">
article 1
</div>
<div class="two columns">
article 2
</div>
<div class="two columns">
article 3
</div>
<div class="two columns">
article 4
</div>
<div class="two columns end">
article 5
</div>
</div>
Alternatively if you need to use all the space you can use a block grid:
Block grids are made from a ul.block-grid with #-up styles chained to
it. You control how many you have in your Scss setting file or the
customizer. These are ideal for blocked-in content generated by an
application, as they do not require rows or even numbers of elements
to display correctly.
<ul class="block-grid five-up">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
<li>article 4</li>
<li>article 5</li>
</ul>
This should work in Foundation 5 (maybe 3 as well). The trick is to offset the first column and end the last.
<nav>
<div class="row">
<div class="column small-2 small-offset-1">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2 end">
<a>Link</a>
</div>
</div>
</nav>
Hope it helps someone, or a future me.