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.
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
I'm not sure if SO is the right place to ask such question. Let me know if it is not so.
I'm learning the BEM CSS methodology recently and I like how it solves many of the CSS problems like specificity issues. It makes our CSS more maintainable.
As I'm new to it, I'm having a hard time creating correct HTML layout with proper BEM class. I've created a module using BEM and would like experts on opinion on what could be the correct layout according to the best practices of BEM.
Here is the screenshot of what I'm trying to using BEM CSS methodology.
Here is HTML layout that I've come up with so far, please let meknow what would be right way to achieve the same.
<section class="content">
<div class="step-nav">
<div class="step-item">
<div class="step-item__left">
<div class="step-item__progress">
<div>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<span>Step 1</span>
</div>
<div>100%</div>
</div>
<h2 class="step-item__title">General Information</h2>
</div>
<div class="step-item__right">
<i class="fa fa-angle-right" aria-hidden="true">
<span class="screen-reader-text">Next</span>
</i>
</div>
</div>
<div class="step-item"></div>
<div class="step-item"></div>
</div>
</section>
Looks about correct, but you should have just a step-nav block, and all the subsequent child components are simply elements, i.e.:
step-item should really be step-nav__item, since item is an element of step-nav
step-item__left should really be step-nav__item--left since left is a modifier. With that in mind, you should combine them so that you will be using <div class="step-nav__item step-nav__item--left"> in the same nesting level, removing that extra unnecessary level of <div> nesting
Of course, if you think step-nav is too long of a word, you can use step instead.
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.
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>
Using font icons I put
<div data-icon="r"> </div>
to have an icon display for example.
Now if I like two or more of the same icon to display next to the first one can I only use multiple divs for that like so
<div data-icon="r"> </div>
<div data-icon="r"> </div>
<div data-icon="r"> </div>
or can one somehow write
<div data-icon="r" "r" "r"> </div>
or
<div data-icon="r,r,r,r"> </div>
or something along those lines?
Naturally all these tests fails so I wonder if this is generally possible in HTML and if so how please?
How about this?
<div>
<i data-icon="r"></i>
<i data-icon="r"></i>
<i data-icon="r"></i>
<i data-icon="r"></i>
</div>
This should create 4 inline icons. Im basing this on how font awesome works.