When I set columns of an element within another column, it uses the total number of columns not the number of columns in the parent. e.g.
<div class="therow">
<div class="acolumn">
<div class="achildcolumn">
<!-- my content goes here -->
</div>
</div>
</div>
$total-columns: 12 ;
.therow {
#include grid-row();
.acolumn {
#include grid-column(9);
.achildcolumn {
#include grid-column(7);
}
}
}
So I want .achildcolumn to take up 7/9 columns, but it seems to be 7/12.
This is the expected result. Each sub-grid also uses $total-columns. This prevents you from having to add up columns as you nest them.
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-6 columns">
50% width
</div>
<div class="small-6 columns">
50% width
</div>
</div>
</div>
</div>
If you want to get more granular with your nested columns one option would be to change $total-columns to 24, or even 36. Then you would have ultra-fine control over sub-columns.
Related
I am trying to scrape multiple elements with the same class names but each has a different number of children. I am looking for a way to select specific elements using the xpath(this would make it easiest for my loop).
const gameTimeElement = await page.$$('//*[#id="section-content"]/div[2]/div[1]/div/div['+ i + ']');
const gameTimeString = await gameTimeElement[j].$eval('h3', (h3) => h3.innerHTML);
This currently does not work.
After I select the element, I grab the h3 tag inside and evaluate it to get the innerHTML.
Is there a way to do this utilizing xpath?
<div id="section-content" style="display: block;">
</div>
<div class="matches">
<div class="day day-28-1" data-week="1" style="display: block;">
<h4>Sat, March 28, 2020</h4>
<div class="day-wrap">
<div class="match region-7-57d5ab4-9qs98v" data-week="1">
<h3 class="time">2:00PM
<span>(Central Daylight Time)</span>
<span class="fr">Best of 7</span>
</h3>
<div class="row ac ">
<div class="col-xs-3 ar">
<img class="team-logo" src="url"></div>
<div class="col-xs-2 al">
<h4 class="loss">(NA)<br>
<span class="team-name">Team1</span>
<br>
<span class="win spoiler-wrap">0</span>
</h4>
</div>
<div class="col-xs-2">
<img class="league-logo" src="url">
<h4> V.S.</h4>
</div>
<div class="col-xs-2 ar">
<h4 class="">(NA)<br>
<span class="team-name">Team2</span>
<br>
<span class="win spoiler-wrap">4</span>
</h4>
</div>
This is a sample of what I am working with for HTML on the website.
Yes, div class="day-wrap" could have a different number of childs. But I don't think that's a problem.
You want to get game times of all Rocket League matches. As you've noticed, games times are located within h3 elements. You can access it directly with one of the following XPaths :
//div[#id="section-content"]//h3
//div[#class="day-wrap"]//h3
//div[contains(#class,"match region")]//h3
If you want something for a loop then you can try :
(//div[#class="day-wrap"]//h3)[i]
where i is the number to increment (from 1 to x).
Side notes : your sample data looks incorrect (according to your XPath). You have a closing div line 2 and it seems you omit div class="row middle-xs center-xs weeks" before div class="matches".
The question is simple but I don't have enough practice for this case :)
How to get price text value from every div within "block" if we know that we need only item_promo elements.
<div class="block">
<div class="item_promo">item</div>
<div class="item_price">123</div>
</div>
<div class="block">
<div class="item_promo">item</div>
<div class="item_price">456</div>
</div>
<div class="block">
<div class="item_promo">item</div>
<div class="item_price">789</div>
</div>
<div class="block">
<div class="item">item</div>
<div class="item_price">222</div>
</div>
<div class="block">
<div class="item">item</div>
<div class="item_price">333</div>
</div>
You could use the xpath :
//div[#class='block']/*[#class='item_promo']/following-sibling::div[#class='item_price']/text()
You look for div elements that has attribute class with value item_promo and look at its following sibling which has an attribute item_price and grab the text.
This XPath,
//div[div/#class='item_promo']/div[#class='item_price']
will return those item_price class div elements with sibling item_promo class div elements:
<div class="item_price">123</div>
<div class="item_price">456</div>
<div class="item_price">789</div>
This will work regardless of label/price order.
I'm trying to create a three column grid, and have the columns evenly distributed across the row.
My markup is simple:
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
My scss is also pretty straight-forward.
.row {
#include outer-container ;
}
.service {
#include span-columns(4) ;
}
However the result is a mess:
That's close to what I want. But the blocks are all over the place.
They aren't evenly distributed either horizontally or vertically.
What could be going on here?
How can I get a simple three-column grid with even distribution of blocks?
You would need to use the omega mixin here. Try this:
.row {
#include outer-container ;
}
.service {
#include span-columns(4);
#include omega(3n);
}
Some more information here:
http://thoughtbot.github.io/neat-docs/latest/#omega
How do I properly align my <div class="small-6 columns"> (callout) to the right (on large screen) inside the <div class="row"> in Foundation 6? I am using Sass.
<div class="row">
<div class="small-6 columns">
<div class="callout large">
<p>This is my callout</p>
</div>
</div>
</div>
Just a class large-offset-6 to small-6 columns, it will move six columns to right.
For more information see http://foundation.zurb.com/sites/docs/grid.html
<div>
<div class="header">
<p>name 1</p>
</div>
<div class="content">czx</div>
<div class="content">dsczx</div>
<div class="content">czsadx</div>
<div class="content">cz34x</div>
<div class="content">4czewtwex</div>
<div class="header">
<p>name 2</p>
</div>
<div class="content">czx</div>
<div class="content">czsadx</div>
<div class="content">cz34x</div>
<div class="content">4czewtwex</div>
<div class="header">
<p>name 3</p>
</div>
<div class="content">czx</div>
<div class="content">czsadx</div>
<div class="content">cz34x</div>
<div class="content">4czewtwex</div>
</div>
Hi folks!
I've got a problematic structure like that. I'd like to create an xpath which will get all <div> elements below given <p> which got class 'content', BUT if there's any other element with class 'header', elements below 'header' will be omitted.
//div/p[text() = 'name 1']/../following-sibling::div[#class = 'content']
for //div/p[text() = 'name 1']/../following-sibling::div[#class = 'content'] output should be:
<div class="content">czx</div>
<div class="content">dsczx</div>
<div class="content">czsadx</div>
<div class="content">cz34x</div>
<div class="content">4czewtwex</div>
for //div/p[text() = 'name 2']/../following-sibling::div[#class = 'content'] output should be:
<div class="content">czx</div>
<div class="content">czsadx</div>
<div class="content">cz34x</div>
<div class="content">4czewtwex</div>
for //div/p[text() = 'name 3']/../following-sibling::div[#class = 'content'] output should be:
<div class="content">czx</div>
<div class="content">czsadx</div>
<div class="content">cz34x</div>
<div class="content">4czewtwex</div>
It's little bit complicated (I'm sure it is possible to do it more nice). Notice 'name X' is used in 3 places (you will need to replace it as well 3 times).
Take all elements from bottom to 'name 3'
/div/div[preceding-sibling::div/p='name 3']
Give total number of elements in our sub list
count(/div/div[preceding-sibling::div/p='name 3'])
Return first position of DIV with class Header, if none found, it returns 0.
count(/div/div[preceding-sibling::div/p='name
3'][#class='header']/following::div)
Now we have a list, total amount of elements into it, and position of first DIV with class Header (or 0 otherwise). Now we can count how many position we really need
total amount of our sublist minus number of elements we want to delete
from list.
xPath (wokring solution):
/div/div[preceding-sibling::div/p='name 3'][position()<count(/div/div[preceding-sibling::div/p='name 3'])+1-count(/div/div[preceding-sibling::div/p='name 3'][#class='header']/following::div)][#class='content']