How do I align text/images on bottom/right/center/middle of a container using the blueprint css framework? - vertical-alignment

Is there some easy way to align stuff in div containers to the right or bottom:
<div class="span-24 align-right last">Text appears on the right side of the layout</div>
or:
<div class="span-2" id="lots-of-content"></div><div class="span-22 last bottom">Appears at bottom of container</div>
or:
<div class="span-24 vertical-middle last">Middle of the container</div>
Here's a sample of what I'm working with trying to position the "topnav" below:
<div class="container">
<div class="span-16">
<h1>Header</h1>
</div>
<div class="span-8 last vertical-middle">
<div id="topnav" class="align-right"><input type="button" id="register" class="ui-button ui-state-default ui-corner-all" value="Register" /> or <button type="button" id="signin" class="ui-button ui-state-default ui-corner-all">Sign in</button></div>
</div>
<hr />
...
</div>

Use position: absolute. For example:
.align-right {
position: absolute;
right: 0;
}
/* Or, alternatively, */
.align-right {
float: right;
}
.bottom {
position: absolute;
bottom: 0;
}
.vertical-middle {
position: absolute;
top: 50%;
}
Note that for vertical-middle, this will center the top edge of the content, no the content itself.
Make sure that the containing DIV is position: relative to force it to become the offset parent (which the position of the children are relative to) EDIT: In other words, add the following rule:
.container {
position: relative;
}

Related

css page-break-after:always works on first page but not on the others.All i want to fill half of all pages

Here is my html:
<div class="rack-label" *ngFor="let product of productsToPrint;let indexOfElement=index;let l=count; " >
// Showing barcodes here
<div *ngIf="(indexOfElement+1)%12==0" class="row-footer">
// And i want to page-break-after works here
// cuz i am showing barcodes
</div>
</div>
`
And here is my css to print page:
#media print {
#page{
margin:3mm 0mm 2mm 3mm;
border: 1px solid red;
/* height: 210mm;
width: 148.5mm; */
size:A4;
margin: 0;
}
html{
border: 1px solid yellow;
}
body
{
width: 210mm;
height: 297mm;
display: grid;
grid-template-columns: 9cm 9cm 9cm;
grid-template-rows:auto auto auto;
}
.row-footer{
clear: both; page-break-before: always;
page-break-inside: avoid;
}
}
Or is there anyway to fix this issue ? Actually all i want to do print 3 col 4 rows barcode to an A5 page.But its not working on ng-print.So i want to do set is as A4 and let space to half of page.
The problem seems to be that absolute positioned elements don't take up any space. Chromium seems to be considering the page essentially blank, so a new page is not necessary.
I've address the issue by giving a minimal size to the relative positioned elements that contain the absolute positioned elements.
I cannot reproduce your example, because I do not know what you are inserting for the barcodes, and your non-printing styles may also be impacting it, but here is an example that produces the problem, and a solution.
Problem, the HTML below will all print on the same page (sometimes, it breaks after first page):
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>
The divs with relative positioning are all zero size, and the absolute positioned elements inside of it don't impact the size. Adding a 1mm width and height, gives proper page breaks
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>

CSS How do I make my div elements lineup perfectly so that collectively they make up a perfect rectangle?

While I am open to any solution, counting tables, Bootstrap and Flexbox, a purely CSS solution using just div elements is greatly appreciated.
HTML
<div class="sentence-summary">
<div class="stat bookmarked">
<i class="fas fa-bookmark"></i>
<span class="count">999</span>
</div>
<div class="stat upvotes">
<i class="fas fa-thumbs-up"></i>
<span class="count">999</span>
</div>
<div class="stat downvotes">
<i class="fas fa-thumbs-down"></i>
<span class="count">999</span>
</div>
<div class="main">
<p>{{ $sentence->body }}</p>
</div>
</div>
SCSS
.sentence-summary {
div {
display: inline-block;
}
.stat {
width: 40px;
text-align: center;
span {
display: block;
font-size: 10px;
}
&.bookmarked {
background-color: red;
}
&.upvotes {
background-color: blue;
}
&.stat.downvotes {
background-color: pink;
}
}
.main {
background-color: green;
}
}
Current Result
Desired Result
I would recommend using a grid layout for this. You can specify that the first three columns (stats) should be 40px wide. And then use '1fr' to say that the 'main' sections should take up the remaining space. Using a grid means that the heights will stay the same.
You can use 'grid-column-gap' to specify the amount of space you would like between each column. Something like this:
.sentence-summary {
display: grid;
grid-template-columns: 40px 40px 40px 1fr;
column-gap: 5px;
grid-auto-rows: 40px;
}
Make sure you use the appropriate browser prefixes as this syntax isn't supported by all browsers. I usually use this auto-prefixer.
Update: Adding grid-auto-rows: 40px; makes sure your 'stats' stay square!

Negative margin-left to hide left side of element

I need to use a left negative margin so that my element left side would disappear on the left side of the screen.
I tried using position relative but it doesn't work...
<div class="card" id="historyCard">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" id="historyBtn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
היסטוריה
<img src="images/clock.png" id="hamNavHistoryImg" width="87" height="87"/>
</button>
</h5>
</div></div>
#historyCard {
background-color: #ffb59b;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
padding: 30px 0 80px 0;
margin-top: 10px;
z-index: 5;
margin-left:-50px;
}
screenshot

How to apply MDL button style to a filePicker?

I would like to know if there is a way to apply the Material Design Lite button style to a file picker, i.e. a component created on an HTML page via:
<input type="file" id="filePicker" />
I would like the "Browse" button of the component to have the look of a Raised button (with ripple if possible). See http://www.getmdl.io/components/#buttons-section.
Thanks!
Using CSS, do you mean something like this?
<style>#file { display: none }</style>
<input type="file" id="file">
<label for="file" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">+</i>
</label>
https://jsfiddle.net/sj838cLg/
Currently, there's no "official" way of doing that. According to the discussion on this issue, the reason is that there's no Material Design specification for that component, so they don't have a guideline to style it. On that same page, the user kybarg provided a CSS/JavaScript code to style a file picker which kind of matches the Material Design specification, so you can use that code:
HTML:
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" />
<label class="mdl-textfield__label">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text"/>
<label class="mdl-textfield__label">Position</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
<input class="mdl-textfield__input" placeholder="File" type="text" id="uploadFile" readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
</div>
</div>
</form>
CSS:
html {
width: 100%;
}
body {
background: #f5f5f5;
margin: 50px auto;
width: 512px;
}
.mdl-button--file {
input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
}
.mdl-textfield--file {
.mdl-textfield__input {
box-sizing: border-box;
width: calc(100% - 32px);
}
.mdl-button--file {
right: 0;
}
}
JavaScript:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.files[0].name;
};
But as there's no official specification, you probably won't find an official implementation from the MDL team for now.

I can not click div with the item class on jquery masonry

I am using the Masonry. I have the fallowing code after masonry loads the page:
<div id="main_container">
<div id="container" class="masonry" style="position: relative; height: 655px; width: 1128px;">
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">
<img class="images" src="http://www.elektriklihafifticari.com/ca_images/small/67923429.jpg">
<p class="note"></p>
</div>
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 282px;">
<img class="images" src="http://www.elektriklihafifticari.com/ca_images/small/30446134.jpg">
<p class="note"></p>
</div>
</div>
I want to add a new div to the body as i click on any of these 'item masonry-brick' classes.
And i use the fallowing code to make this:
$(".item.masonry-brick").click(function(){
var body_m=$('body');
var blur_div=$('<div></div>');
blur_div.attr('class','blurred');
body_m.prepend(blur_div);
});
Unfortunately it does not work. I tried many diffrent solutions but could not succeed. I realised that if i change the code as:
$("#container").click(function(){
var body_m=$('body');
var blur_div=$('<div></div>');
blur_div.attr('class','blurred');
body_m.prepend(blur_div);
});
i got what i want as i click on the div with the id=container.
Any ideas?
Thanks.
Edited.
Now there is a new problem about the situation:
the html code is:
<div id="container" class="masonry" style="position: relative; height: 335px; width: 846px;">
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">
<img class="images" src="http://www.dostahediye.com/ca_images/small/230352553.jpg" data-id="1000014037951491000">
<p class="note">teşekkürler</p>
</div>
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 282px;">
<img class="images" src="http://www.dostahediye.com/ca_images/small/660575147.jpg" data-id="1000014037951491001">
<p class="note">5 kişi lütfen</p>
</div>
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 564px;">
<img class="images" src="http://www.dostahediye.com/ca_images/small/474047220.jpg" data-id="1000014037951491002">
<p class="note">7 kişi lütfen</p>
</div>
When i use the code below to recognise which div.item.masonry-brick is clicked, always the first data-id '1000014037951491000' is alerted.
$("#container").on("click",".item.masonry-brick",function(){
var data_id=$('img',this).data('id');
alert(data_id);
Any ideas?
Thanks in advance.
I guess the .item.masonry-brick elements are added dynamically.
You cannot attach events on dynamically generated elements like this,
Use on instead.
$("#container").on("click",".item.masonry-brick",function(){
var body_m=$('body');
var blur_div=$('<div></div>');
blur_div.addClass('blurred');
body_m.prepend(blur_div);
});

Resources