The below html was provided inside a <cfdocumentitem type="header"> block.
But the output is empty.
<div class="grid">
<div class="span5">
<div class="span5">
Label1
</div>
<div class="span5">
Data1
</div>
</div>
<div class="span5">
<div class="span5">
Label2
</div>
<div class="span5">
Data2
</div>
</div>
<div style="clear:both"></div>
</div>
But when I remove the nested 'class="span5"' divs and put some content there, it is working fine. Is there any problem with nested float in cfdocument???
Unfortunately, CSS support in CFDOCUMENT is kind of hit or miss.
2 rules to follow that might help:
Make sure your HTML validates as XHTML 1.0 Transitional
Import your style sheets using
<style type="text/css" media="screen">#import "style.css";</style>
This same information can be found here: http://rip747.wordpress.com/2007/09/10/cfdocument-it-works-if-you-know-how/
Related
I have downloaded the template : http://keenthemes.com/preview/megakit/
On the index page there is a parallax :
<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
<div class="container g-text-center--xs g-padding-y-80--xs g-padding-y-125--sm">
<p class="text-uppercase g-font-size-14--xs g-font-weight--700 g-color--white-opacity g-letter-spacing--2 g-margin-b-50--xs">Testimonials</p>
<div class="s-swiper js__swiper-testimonials">
<!-- Swiper Wrapper -->
<div class="swiper-wrapper g-margin-b-50--xs">
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
</div>
<!-- End Swipper Wrapper -->
<!-- Arrows -->
<div class="g-font-size-22--xs g-color--white-opacity js__swiper-fraction"></div>
<!-- End Arrows -->
</div>
</div>
</div>
The Parallax image is basically defined with properties in the line :
<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
Now to use the same in django I changed the url of the image to following:
<div class="js__parallax-window" style="background: url({% static 'img_events/1920x1080/04.jpg' %}) 50% 0 no-repeat fixed;" >
The only problem the parallax is not working properly in this case, the parallax image size should only be 50% but it causes a mismatch in the height and placement of the testimonials and the background image whereas the same code works in the template
The only problem here was that <!DOCTYPE html> was not included at the beginning of the page.
In prestashop 1.7, the checkout template file themes/classic/templates/checkout/checkout.tpl uses its own html structure instead of extending page.tpl, like every other checkout pages (cart, order confirmation, etc).
Why is that? Is there any security flaw we should be aware of?
I've overriden checkout.tpl in my own theme {extends file='page.tpl'} and I want to make sure that everything's alright:
{extends file='page.tpl'}
{block name='content'}
<section id="content">
<div class="row">
<div class="col-md-8">
{block name='cart_summary'}
{render file='checkout/checkout-process.tpl' ui=$checkout_process}
{/block}
</div>
<div class="col-md-4">
{block name='cart_summary'}
{include file='checkout/_partials/cart-summary.tpl' cart = $cart}
{/block}
{hook h='displayReassurance'}
</div>
</div>
</section>
{/block}
Thanks!
Florian
I am trying to keep text generated with Django template language which is contained within a Bootstrap 4 badge together with some additional text that is not contained in the badge.
Here is my code:
<span>Submitted by: <span class="badge badge-primary">{{
user.username }}</span></span>
I want all the words in the phrase "Submitted by USER" to always be on the same line, but the code above does not achieve that. Any idea what is wrong?
Add the class text-nowrap to the outer <span> element and remove the unnecessary .
text-nowrap in Bootstrap 4 prevents wrapping as the name suggests.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 bg-success">
<span class="text-nowrap">Submitted by: <span class="badge badge-primary">Usernameverylongusernameevenlongerthanthat</span></span>
</div>
</div>
</div>
I'm working with Foundation 5, none of my own custom styles. I'm linking, in order, app.css, modernizr.js, jQuery, Fastclick, and foundation.min.js.
I have followed instructions in my tutorial ("Lynda: Up and Running With Foundation") and on the Zurb website for creating a nested row, but there's a problem: the last cell in the row always jumps itself over by a small amount, throwing off not just the text flow but the entire page layout. On mobile devices, this small nudge means that the page can be swiped side to side.
Here's a screenshot of what I'm talking about.
My HTML is
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
What have I done wrong? I can't see any information on Google or StackOverflow about this, I've gone over the code carefully, I've torn it down and rewritten it from scratch following code samples... I just don't get what I've missed.
So, although using large-3 columns approximates the correct output you need a little bit different structure. There are many ways to do things, but the thing to remember, is that if you are using a grid or a nested grid, all the columns must add up to 12 columns total. In your case you have a nested grid that adds up to 6. This will give you inconsistant output unless you intent for part of the column to be empty. In that case you can use the .end presentational class to force it to float left.
Here is a set of nested grids that approximates what I think you are going for.
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file