If I want to put header tag h1..h5 into p it render HTML in wrong way:
slim
p
h3 Header here
span Just text
expected
<p>
<h3>Header here</h3>
<span>Just text</span>
</p>
in real it render
<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>
looks like nothing special but in this case I can't bind CSS style because structure renders in broken way.
Is it a bug? Or I can solve this in some way?
You can not define tags like h3 and span inside the p tag.
See HTML5 specification for more information.
Slim itself doesn’t care about the tags, and renders your code as you expect:
$ slimrb
p
h3 Header here
span Just text
produces:
<p><h3>Header here</h3><span>Just text</span></p>
which matches what your expected code, except for whitespace.
This isn’t valid HTML though, so when the browser parses it it will correct it to something valid. For example the Chrome inspector will show:
<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>
Where the browser has closed the p element before the next h3 element.
If you want this to work in the browser, make sure you are generating valid HTML. Perhaps use a div instead of a p?
Related
I want to retrieve the value of Test Services code
<p>
<span class="floatLeft w30p">Test Services code:</span>
<span> <strong>F603YPW</strong> </span>
</p>
The rest of the page will really affect what selector(s) you would need to use to get that text, however given only the HTML specified you can use the css adjacent sibling selector to get the element
value = find(:css, 'span.floatLeft.w30p + span').text
if there are a bunch of other elements with the floatLeft and w30p classes then you could get more complicated using xpath selectors and do something along the lines of
value = find(:xpath, XPath.descendant(:span)[XPath.string.n.is('Test Services code:')].next_sibling).text
or with multiple finds
value = find(:css, 'span', text: 'Test Services code:').find(:xpath, XPath.next_sibling).text
If you are able to edit the HTML to
<p>
<span class="floatLeft w30p">Test Services:</span>
<span class="your_class"> <strong>F603YPW</strong> </span>
</p>
(so by adding a class to the span),
you will be able to find its value doing
value = page.find('.your_class').text
If you are not able to edit the HTML, do
value = find(:css, 'the css selector').text
I'm setting a data element of an image in my html.erb file:
<img src="<%=image%>" data-description="<%= auto_link(step.description)%>"/>
The issue is that there there are sometimes quotes in my step.description that interfere so that data-description is not set correctly, such as:
<img src="..." data-description="<pre><code class=" language-java"="" style="width: 193px; height: 257px; margin-left: -96.5px; margin-top: -128.5px; opacity: 1;">
How can I remove conflicting quotes in my erb file?
There's a helper method called j or escape_javascript that will escape quotes in a string and make it possible to add a string with quotes to an attribute on an element like you're trying to do. More info here
So, change your code to:
<img src="<%=image%>" data-description="<%=j auto_link(step.description)%>"/>
Just adding that j will do it for any sort of string with quotes.
If you're also putting HTML inside an HTML attribute you will have to escape html too with the html_escape helper:
<img src="<%=image%>" data-description="<%=h j(auto_link(step.description))%>"/>
h is short for html_escape. That should escape the tags inside the attribute and not break your layout.
I've got problem with this line:
<div class="TrescPotwierdzTresc">#Model.Article</div>
The problem is with "br" tag inside #Model.Article wont work. I can see this tag after page load, but text is still in the same line. WHen i do something like this:
<div class="TrescPotwierdzTresc">#Model.Tresc br #Model.Tresc</div>
The br tag between "#Model.Tresc" elements work fine. Do You have any idea why is that happening ?
Try this:
<div class="TrescPotwierdzTresc">#Html.Raw(Model.Article)</div>
Html.Raw returns markup that is not HTML encoded.
I'm trying to get the src value of a block of HTML. I am specifically trying to achieve this using the at_css and not using XPath.
So far all I'm getting is either nil or a blank string.
This is the HTML:
<div class="" id="imageProductContainer">
<a id="idLinkProductMainImage" href='URL'>
<img id="productMainImage" src="SRC.jpg" alt="alt" title="A Title" align="left" class="product_image_productpage_main selectorgadget_selected">
</a>
</div>
The code I have is:
item = page.doc.at_css("#productMainImage img").text.strip unless page.doc.at_css("#productMainImage img").nil?
puts item #prints blank
item = item["src"]
puts item #prints blank
Where page.doc is the Nokogiri HTML element.
If you need the src attribute, you can do it like this:
pace.doc.at_css('#idLinkProductMainImage img').attr('src')
Also, I believe the problem is the way you are getting the img tag. You are trying to get all img tags inside #productMainImage, but this id is the image itself, so it will find nothing.
If you use the link id #idLinkProductMainImage, then you have a img tag to search inside it.
I want to select the first sibling of a tag from an HTML element. Lets say I want to get the <a> that follows this <span>:
<span id="unique"></span>
<a href="#">
This can easily be done with the following Xpath:
//div[#id="unique"]/following-sibling::a
This, however, is very specific in a way that it looks for an <a> tag. How can I make it more generic that it would find any tag as long as it is the first sibling to the element I selected?
Write as below
//span[#id="unique"]/following-sibling::*[1]
Here is a sample HTML :
<div>
<span id="unique"></span>
<p>foo</p>
<p>bar</p>
</div>
XPATH expression:
//span[#id="unique"]/following-sibling::*[1]
output
<p>foo</p>