blueprint issue - blueprint-css

I have the following layout. the first row prints just fine, but the beginning of the 2nd row starts where the 2nd div on the 2nd row should be. If I set the span of the last div in the 1st row to 3, the 2nd prints fine.
the parent div is 670 pixels and each child is 160 (including 10px right margin) All 4 should fit in a row, but they are not, whats wrong here?
I bassically want a parent div of 17 spans with rows of 4 child divs each with span of 4.
<div id="parent" class="span-17 last>
<div id="child" class="span-4">
<span>content</content>
<span> image </content>
</div>
<div id="child" class="span-4">
<span>content</content>
<span> image </content>
</div>
<div id="child" class="span-4">
<span>content</content>
<span> image </content>
</div>
<div id="child" class="span-4 last">
<span>content</content>
<span> image </content>
</div>
<!--row 2 starts -->
<div id="child" class="span-4">
<span>content</content>
<span> image </content>
</div>
<div id="child" class="span-4">
<span>content</content>
<span> image </content>
</div>
<div id="child" class="span-4">
<span>content</content>
<span> image </content>
</div>
<div id="child" class="span-4 last">
<span>content</content>
<span> image </content>
</div>
</div>

Unless you've used a compressor to change the default number of columns, Blueprint uses 24 columns by default. Plus, you should be defining a container somewhere:
<div class="container">
<div class="span-24 last">
Header Row
</div>
<div class="span-4">
Blank buffer div (to keep 24 cols)
</div>
<div class="span-4">
Content 1
</div>
<div class="span-4">
Content 2
</div>
<div class="span-4">
Content 3
</div>
<div class="span-4">
Content 4
</div>
<div class="span-4 last">
Another blank buffer
</div>
</div>
Basically, you should also ensure all columns add to 24 at all times. the last declaration does not fill in any missing columns. You mention a span-17 div with 4 span-4 children, which doesn't add up. You're missing a column in there, which can produce undefined results or at the least just look bad.
If you don't want the buffer <div>s, just use span-6 for each, which divides 4 blocks evenly into 24.

Related

can't make it look all in one line when display it on html page

vue.js
how can I make it look all in one line, next to each other?
TEMPLATE:
<div class="product">
<button #click="removeFromCart" :disabled="!inStock"> −</button>
<span>
<p v-if= "inStock == 0"> 💔 <span :class="{isRed: inStock === 0}"> {{inStock}} </span> </p>
<p v-else> ♥ {{inStock}}</p>
<button #click="addToCart" > + </button>
</span>
</div>
You can use class="row" for example in your div. Than all buttons, p-tags and so one will be shown on a row - like this:
<div class="row">
<!-- YOUR CODE IN HERE -->
</div>
To define the width of your b-button, p-tags, etc. you can use class="col-md-5 for example.. here is a link how you can define the width of a element in vue.js.
URL: https://vuetifyjs.com/en/components/grids/#order-first-and-last
Hopefully this helps you out.

Bootstrap flex-column-reverse pushes column to new line

I want to have my web layout setup like this on MD and larger:
img - content
content - img
But on a smaller screen I want the content to come first and then the image, like so:
content
img
I can do this with this line of code on my row where the row is img-content:
flex-column-reverse flex-md-row
But all of this is dependent also on how I order the HTML, I am using vue components, so I dont want to change my html order, it might add too much complexity
So I keep the HTML order consistent.
This is my code:
<div class="row p-5 flex-column-reverse flex-md-row">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title ">lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
// Next row
<div class="row p-5 flex-column-reverse ">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title "> lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
here is the setup in jsfiddle
The reverse class does reverse the order but The problem with this approach is for some odd reason, the next row that should be content-img, the image gets pushed to the next line.
Anyone got any idea why and how to have it not push to the new line?
A little bit of back n-forth found out the solution.
flex-column-reverse
-is a vertical reverseŕ,thus its always pushing it to the new line, so having it be the only one on it, our row doesn't know to change on a larger size so we add this:
flex-md-row-reverse
note the row in it, since we are setting it, horizontally
If you want content / image – content / image on small screens, then you should set the order that way. Then, to have the content and images switch place on larger screens, add order-md-first to the even lines.
I’ve modified the code from your Fiddle:
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title ">Title 1</h2>
<p class="about-p text-muted">Desc 1</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper">
<h2>MY IMAGE1</h2>
</div>
</div>
// Next row
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title "> Title 2</h2>
<p class="about-p text-muted">Desc 2</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper order-md-first">
<h2>MY IMAGE2</h2>
</div>
</div>
</div>

Slick slider - how to exclude certain divs from a slider?

I am using the slick slider from https://kenwheeler.github.io/slick/ which is quite a nice slider overall. Is there a way to slide only certain div-s which are inside the whole slick-initialized div? In other words, here is a sample structure:
<div class="sliderdiv slick-initialized slick-slider">
<div class="slick-list">
<div class="slick-track">
<div class="slick-slide">
<div class="wrapper">
<div class="not-to-slide">
<h2>Some Title</h2>
<div class="somedeeperleveldiv">
<span>some text</span>
</div>
</div> <!-- end of divs that do not have to slide //-->
<div class="slideable">
<div>
<div>
some image or text
</div>
</div>
</div>
<div class="slideable">
<div>
<div>
some image or text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The slider is initialized by:
$('.sliderdiv').slick({
some options
}).slick(slickFilter, '.slideable');
I've tried SlickFilter as in .slick(slickFilter, '.slideable'); but it gives ReferenceError: slickFilter is not defined
Is there a way to exclude the "not-to-slide" class div and everything that is inside that div from the slider? The idea here is to have only divs of class "slideable" to be used as slides.
A more general solution in case such "not-to-slide" divs appear inside divs that are to be slided would also be appreciated.

Can we use a container element inside child element

I'm new to angular flex layout, I was reading the documentation and
I wanted to know if nesting container elements inside children element \ nesting container elements inside another container element is allowed, For example:
nesting container elements inside children elements:
<div fxLayout="column">
<div fxFlex="100%"> column item A </div>
<div fxFlex="100%"> column item B
<div fxLayout="row">
<div fxFlex="100%">row item A </div>
<div fxFlex="100%">row item B </div>
</div>
</div>
</div>
nesting container elements inside another container elements:
<div fxLayout="column">
<div fxFlex="100%"> column item A </div>
<div fxFlex="100%"> column item B </div>
<div fxLayout="row">
<div fxFlex="100%">row item A </div>
<div fxFlex="100%">row item B </div>
</div>
</div>
Yes, that's working!.
Here is the Online Demo
<div fxLayout="column" fxLayoutAlign="space-evenly center">
<div>This is Column A</div>
<div>This is Column B</div>
<div>This is Column C</div>
<div fxLayout="row" fxLayoutAlign="space-evenly center">
<div >This is Row item A under Column </div>
<div>This is Row item B under Column</div>
<div fxLayout="column" fxLayoutAlign="space-evenly center">
<div>This is Column A under Row</div>
<div>This is Column B under Row</div>
</div>
</div>
</div>
Here First fxLayout="column" will be treated as root and under this root, if you add Second fxLayout="row" then it will be inherited the root component and follow the rule of First fxLayout="column" with fxLayoutAlign="space-evenly center" and further you go down the logic will be same as above and its continue, how much you deep dig into it.

Bootstrap Profile Card

I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle