Using IMPORTXML, how can I pull out the values "237" (span class="flirblue") and "99" (span class="cents") from the following HTML?
<div class="row visible-xs text-center mobile-price-panel" style="margin-bottom: 10px;">
<div class="col-xs-12" style="padding: 7px 0px;">
<div class="col-xs-6"><span class="pricing">€</span><span class="flirblue">237,</span><span class="cents">99</span> </div>
<div class="col-xs-6"><a class="btn btn-primary main-buy-button btn-group-justified page-scroll" href="#models">VORBESTELLEN</a> </div>
</div>
</div>
I have only just started fiddling with IMPORTXML, and have gotten a number of them to work perfectly on several different websites, but I just cannot find a way to get the 237 and the 99 off one particular site, of which the above is an example of the HTML.
My last attempt on the above was:
=ImportXML("URL","//div[#class='row visible-xs text-center mobile-price-panel']//div[#class='col-xs-12']//div[#class='col-xs-6']//span[#class='flirblue']")
But it does not work, and no matter how I fiddle.
Please help.
Kind regards
Padster
Name directly the class you want.
Example for Flirblue:
=ImportXML("URL","//div[#class='flirblue']")
Some minor tweaking required, but should work.
Related
I'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.
I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains the task cards.
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
Any help, tips, suggestions, etc. Would be greatly appreciated!.
You could use columns classes to achieve what you want
<div class="task-container columns is-multiline">
<div class="card column is-half is-offset-one-quarter">
// statements
</div>
</div>
Here is the link to the official documentation: https://bulma.io/documentation/columns/options/#centering-columns
You could wrap the card div with a columns container and use the is-half class if you don't want to use the offset class.
I would like to view list of strings in default-label format of bootstrap with angular-js ng-repeat
Following is a code snippet,
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default col-md-2">{{hobby.name}}</span>
</div>
</div>
Output of above does not looks good. default label fills col-md-2 and also if list is big then it goes out of row div.
I would like to have output as following
How can I acheive following with default-label from bootstrap classes?
And I would like to use only classes/styles provided by bootstrap and NOT custom css.
You dont need the col-md-2 class on the span element:
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default">{{hobby.name}}</span>
</div>
</div>
You can read up more on the label variations on the bootstrap website
A note from the bootstrap website:
Have tons of labels? Rendering problems can arise when you have dozens
of inline labels within a narrow container, each containing its own
inline-block element (like an icon). The way around this is setting
display: inline-block;. For context and an example, see #13219.
UPDATE
If you are using the ng-repeat directive directly on a label label- you might end up with labels that do not have spacing between the labels. This is related to this question and this question
You might end up with labels looking like this:
I have created a jsfiddle to show the two results, you might need to update your HTML to fix the spacing issue.
You can use the following HTML to resolve the issue if you do not want to add a custom class with margin:
<div class="row">
<div class="col-sm-12">
<span ng-repeat="label in labels">
<span class="label label-default">{{label}}</span>
</span>
</div>
</div>
The result:
Answer by Tjaart van der Walt looks perfect.I also did work around and found following answer,
<div class="row">
<ul class="list-inline col-md-6">
<li ng-repeat="hobby in hobbies">
<span class="label label-default">{{hobby.name}}</span>
</li>
</ul>
</div>
I have three separate buttons within the same row and container, however due to the content above them, they're not all on the same horizontal line.
This is worsened on a big screen
How can I get all these buttons sitting on the same centre point?
Live URL: http://185.123.97.138/~kidsdrum/moneynest.co.uk/
HTML
<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
The problem is that you can't predict the text in the above sections will always finish at the same point so, as they currently are, it's not technically possible. There are some hacky fixes you could do, but I think the best solution would be to take the buttons out of those containers entirely, and have a separate "row" element that contains them.
That way, if the text in one of the columns gets longer for whatever reason (text added, different screen sizes), the whole "button row" will be pushed down equally and the buttons will always maintain the same baseline
Hope that makes sense
Modify the line in homepagestyle.css
#step1button {
margin-top: 21px;
}
This will fix your issue
The problem with using a seperate row was that on a mobile device all the three buttons (in the seperate row) sat away from their relevant content.
This meant it was very confusing on a mobile device to understand what the buttons took the user to, this looked like:
By adding a simple <br /> I was able to push the one odd button onto the same line as the other two buttons.
I then removed:
#step1button {
margin-top: 30px;
}
So the final HTML looked like:
<div class="container-fluid">
<div class="row">
<div class="fadein bg-3 text-center">
<h3 class="h3big">What do you need help with?</h3><br>
<div class="col-sm-4">
<img src="/img/button-1.png" alt="button-1" class="middleimages">
<div class="box-content">
<p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
<figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
<figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>
<br />
<b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>
</figure>
<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
</div>
</div>
I have some lengthy HTML which is over the 80 character limit for my project. We have a style guide which restricts the number of characters per line, which is good because right now the line runs so long that you can't see it all without scrolling right.
<div id="email-signup-container">
<div id="mc_embed_signup">
<div class="interested">
<div class="container">
<div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Help New York residents keep the heat on this winter.</h3>
DONATE
</div>
<div class="right col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Without heat? Visit our resources page.</h3>
<a class="btn-interest" href="resources">RESOURCES</a>
</div>
</div>
</div>
</div>
</div>
Unfortunately, I can't find any style guides that cover multilining HTML. I worked on one project where we newlined things by attribute, but it was controversial:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest">DONATE</a>
Some people wanted the closing carot on a new line like this:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest"
>DONATE</a>
Other people wanted the closing tag at the same level as the opening tag:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest"
>
DONATE
</a>
I kind of hate all of them. Can anyone point to any published style guides that cover this so we can just adopt one and move on?
I've been wondering this as well. The only thing I could find was the guide from GoCardless, which says:
<!-- Try using line-breaks for multiple attributes, keeping the first attribute
on the tag's opening line -->
Good:
<div custom-attribute
class="something"
role="something-else"></div>
<!-- The closing tag ^^^ can stay on the same line for empty elements-->
<div custom-attribute
class="something"
role="something-else">
··Foo <!-- Otherwise nest plz -->
</div>
Not a definite answer, but I would like to add another suggestion: indenting the attributes twice, and the content only once.
An example:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest">
DONATE
</a>
For an a tag this kind of looks weird, but for longer tag-names, as are common in Angular, it looks fine:
<my-component
attribute1="val"
attribute2="val2"
attribute3="etc">
<span>Hello :)</span>
</my-component>
How do I fill the first 11 columns with a table, but then have the last 1 column be empty?
Right now my HTML is throwing my <h4> after my <div class='col-md-11' to the right of it just squishing it into the page
my HTML:
<nav class='page_element'>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<br>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<hr>
</nav>
<nav class='page_element'>
<div class="table-responsive col-md-11">
</div>
<h4><strong>Question 3</strong></h4>
....
This all got worked out in comments, but here's an answer for good measure.
The Bootstrap classes for col-x-n really aren't meant to be used as standalone classes. They work, sometimes, but, in part because they depend on a styling of float: left, they can have some funky behavior when paired with non-col-x-n classes. It's best, whenever possible, to wrap them in rows.
In that ideal situation, it would look something like this:
<nav class='page_element'>
<div class="row">
<div class="table-responsive col-md-11">
...
</div>
</div>
<h4><strong>Question 3</strong></h4>
</nav>
If that isn't, for one reason or another, a good option, I would suggest against using those classes at all. Particularly in a situation like this, they give you a lot of functionality that you don't need, or even want, like the ability to have two columns sit next to each other.
In that case, I would suggest (and I was about to, but then my computer battery died and you beat me to it) using a good-ol'-fashioned width: x%. It's always nice to bring that kind of design implementation out from your HTML and into a CSS file, but for the sake of simplicity, a style attribute does the same thing.
<nav class='page_element'>
<div class="table-responsive" style="width: 92%">
...
</div>
<h4><strong>Question 3</strong></h4>
</nav>
I picked 92% because that's approximately 11/12, which is what col-md-11 aims for.