I'm pretty new to rails and I'm getting a weird issue when I try to render a partial. Instead of just rendering the HTML, it's adding a blank space surrounded by quotes above the partial's content.
> View (index.html.erb)
<div>
<%= render 'shared/rightColumn' %>
</div>
> Partial (_rightColumn.html.erb)
<div>
Some Content...
</div>
> Result...
<div>
""
<div>
Some Content...
</div>
</div>
This causes the content of my partial to be shifted down in the view because the browser is accounting for that blank space. If I add one comment before the call to render and another at the start of the partial's content, the blank space is added between the two comments.
I'd rather not add negative margins to try and hack my way around this. And Rails is used heavily enough that I'm sure this is my fault. I just can't figure a way around it. Should I not be using render? Or am I misusing it?
Thanks.
Make sure your CSS is reset.
* {
margin: 0;
padding: 0;
}
Related
In a page, I have a rendering with a placeholder, Offcanvas.cshtml
<div data-ads-offcanvas-id="#Model.Id" class="ads-offcanvas #Html.GetCssStyles()">
#{
<a data-ads-offcanvas-trigger-id="#Model.Id" class="ads-close-button" href="#0">X</a>
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
}
and inside that rendering, I plan to put another rendering with a placeholder named Modal.cshtml
<div data-ads-modal-container="#Model.Id" class="ads-modal-container">
<div class="ads-modal-dialog">
<div class="ads-close-box">
<a data-ads-modal-id="#Model.Id" href="#0">X</a>
</div>
<div class="ads-modal-content">
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
</div>
</div>
So it looks like:
-Offcanvas
+-Modal
++-Text content
When I put text content inside the Modal rendering, the content is not rendered. I'm guessing that it only renders that first few renderings and fail to do so when the renderings became highly nested.
Is there a solution to render components to the very-most child?
Thanks guys!
EDIT:
Here's the code for GetPlaceholder:
public static string GetPlaceholder(string name, Guid id)
{
return $"{name}_{id}";
}
Dynamic placeholders are a bit more complicated than generating a unique placeholder key. The generated key still needs to resolve back to a real placeholder that is defined in Sitecore.
Check out the Integrated Dynamic Placeholder module.
This will provide an Html helper similar to your current implementation:
#Html.Sitecore().DynamicPlaceholder("[Placeholder Name]")
How I can display columns with space between them? by default they are all following each other and I can't find a way to change that.
Here is an example from youtube:
Depends on how much spacing do you want... when you use a frontend framework sometimes you need to make some tradeoff, development speed vs "not too customized". The sample you take from youtube has less spacing than default column gutter of the framework, so your affirmation of "by default they are all following each other", I think is not quite precise; they have spacing, if you want to remove, just use row collapse as the class of the columns container.
Now, if you want more spacing than the default, you still have options:
You can leave a column between each element, just a matter to add one column offset to each one.
You can change the column gutter size on framework settings (if you're using the CLI version or customized, not the prebuilt)
You can also write some CSS to increase spacing for an specific column container (I won't recommend to do so globally because you could mess with the framework).
Your solution is to use a framework such as Bootstrap or Foundation. in foundation, every 'column' is inside padded, so you're able to display a grid such as this.
Read here for more info: http://foundation.zurb.com/sites/docs/grid.html
This post is tagged with Zurb Foundation, so I will solve it using their classes with what is a little bit of a workaround. For example, if you want three columns with the ability to keep adding items and have it automatically wrap you could have the following simple example with the block grid:
<div class="grid-x small-up-3">
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
</div>
and the following CSS
.small-up-3 > .cell {
width: calc(33.33333% - 4px);
margin-left: 2px;
margin-right: 2px;
}
.small-up-3 > .cell:nth-of-type(n+4) {
margin-top: 2px;
}
The calc is needed to subtract your margin from the width of each cell to prevent the wrapping you are seeing when just adding normal margin.
Now I'm biulding a django project with jinja2 dealing with templates. Some page contents are submited by the client with wysiwy editor, and thing's going fine with the detail pages.
But the list pages are wrong with the slice of the contents.
My code:
<div class="summary ">
<div class="content">{{ question.content[:200]|e}}...</div>
</div>
But the output is:
<p>what i want to show here is raw text without markups</p>...
The expected result is that the html markups like <p></p> <section>.... are gone (filtered or eliminated) and only the raw text shows!
So how can I fix it? Thanks in advance!
Use striptags filter:
striptags(value)
Strip SGML/XML tags and replace adjacent whitespace
by one space.
<div class="content">{{ question.content|striptags}}...</div>
Jinja2 striptags filter test will also help you to understand how it works.
Hope that helps.
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
I have a problem with TinyMCE in Joomla 2.5.4. I have tried for a few days now to add a link to a div section (like <div> something< </div> ) but failed, the anchor is stripped from the HTML section because TinyMCE sees that as being wrong in HTML4. After a 3 days research I gave up and instead of a div i used a unordered list.
Now when i try to add a link to a list item (like <li> <p> something </p> </li> ) TinyMCE rearranges everything and moves the anchor inside of the list item (like <li> <a href="#"> <p> something </p> &=lt;/a> </li>).
I have tried pretty much everything from valid_elements : "[]" to text filter: No Filtering but i ran low on ideas.
Can anyone please help me?
Try playing around with TinyMCE's html5 options: http://www.tinymce.com/tryit/html5_formats.php
Hit "view source" to see how they're doing it. It's mainly this option inside tinyMCE.init:
schema: "html5",