I have 2 buttons in a screen in Ionic 2, and I want to align them both together (one on top of the other, but together) in the middle of the screen (horizontal and vertical alignment).
I want to use ion-grid, no paddings, margins, floats or percentages.
So I have this
<ion-content>
<ion-grid>
<ion-row>
<ion-col text-center>
<button>button 1</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<button>button 2</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
With <ion-col text-center> I can align them to the center horizontally, but for vertical alignment I can´t see anything that I can apply to , so I tried this:
ion-grid {
justify-content: center;
}
But nothing happened.
I checked and this is being applied to the page, but for some reason it doesn´t work.
Any ideas?
Use this:
ion-grid {
height: 100%;
justify-content: center;
}
You can use the code below in a column (e.g.: flex-col) inside ion-grid to align centered vertically and horizontally:
.flex-col {
display: flex;
justify-content: center;
align-items: center;
}
You can use a bit more of Ionic if you do it this way, and then just apply the height in your Sass files. You also don't need the ion-col. Also, the classes have changed and are just .grid and .row
Markup
<ion-content>
<ion-grid>
<ion-row justify-content-center align-items-center>
Horizontally and Vertically Centered
</ion-row>
</ion-grid>
</ion-content>
Sass
.grid, .row {
// Force grid to fill height of content as this is not set by default
height: 100%;
}
Related
When I use this code on forums the top image(background) always shifts left instead of staying centered. The bottom image(floating text) works as is.
<div style="background-image: url('https://i.ibb.co/TmkSL8m/bg7.jpg'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name96.png" /></div>
tried setting the width to auto but it locks the background image in place and doesn't allow the text to float over it.
So I want to make 3 images over 2 columns. The left image will be 100% of the height of the flexbox and I want to 2 right side images to be stacked top to bottom and their total height to equal the height of the left image or the flexbox height itself. When responsive resizing I want to keep this ratio as well.
The problem I'm having now is that upon resizing the left image shrinks and the combined height of the right 2 gets larger than the left image.
Thanks for trying to understand my jibberish.
I've tried a number of things and nothing working.
Using Flexbox
In order to accomplish what you are describing using flexbox you will need to use two flexboxes which will require making a few changes to the HTML.
The outer flexbox should have flex-direction: row; (this is the default value so it can be omitted). This will flex its children horizontally.
The inner flexbox should have flex-direction: column;. This will flex its children vertically.
The children of the first div should have flex: 1; which will distribute the space using an even ratio amongst the children.
You then just need to set height: 50%; for each of the images in the second flexbox.
Here's an example of what your code could look like:
.container,
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
img {
object-fit: cover;
}
div {
display: flex;
}
img,
div {
flex: 1;
}
.right {
flex-direction: column;
}
.right>img {
height: 50%;
}
<div class="container">
<img src="https://source.unsplash.com/random?mountain">
<div class="right">
<img src="https://source.unsplash.com/random?city">
<img src="https://source.unsplash.com/random?cat">
</div>
</div>
Is there a way to fix the vertical layout of the PagerSettings when displayed at the bottom of a grid?
UPDATE: I am working on build 19.110.0013
I am trying to add numbers to the bottom of a grid using the PagerSettings tag described in the post Add page numbers to the bottom of Process Shipments grid. When I set the PagerVisible to bottom the numbers display vertical, but if I set the PagerVisible to top the numbers are properly displayed as horizontal.
<ActionBar PagerVisible="Bottom" DefaultAction="cmdItemDetails">
<PagerSettings Mode="Numeric" LinksCount="5" />
</ActionBar>
I could not reproduce that behavior in Acumatica version 19.106.0020 so I manually tweaked the CSS in order to reproduce that glitch.
Setting 'display: block' CSS property on GridPagerLink CSS class reproduces the same rendering.
In file '\App_Themes\Default\00_Controls.css' it is set as 'display: inline-block;'.
Inline option will make them stack horizontally so I don't have this glitch on my side.
Which exact Acumatica version are you running?
Use browser HTML inspect element feature to inspect the GridPagerLink.
Does it look like the default style below?
.GridPagerLink {
display: inline-block;
color: RGBA(0, 0, 0, 0.87);
text-decoration: none;
font-size: 15px;
font-weight: bold;
padding: 5px 10px;
height: 18px;
border: solid 1px transparent;
}
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely.
However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit.
Is there a way to make masonry more aggressive in moving elements? Or have it go over two times to make sure there are no empty spaces?
You should probably look at masonry's "big brother" Isotope here. Mind you, if you have elements that are sorted in a certain order or fixed in a certain order - and that are wider than a single column width - they can "block" a column at narrow browser widths.
EDIT Maybe this fiddle explains it a bit better. If you look at that one and - while observing the numbers in the divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, one gets a white gap. Maybe you can use Isotope's shuffle and/or reLayout methods and sacrifice ordering your elements in a strict order? Best would be a jsfiddle with your issue.
<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;
width: 100px;
height: 100px;
font-size: 3em;
font-weight: 700;
padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
border:1px dotted black;
}
article .tile.wide {
width: 200px;
}
article .tile.tall {
height: 200px;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
To expand on Dan's answer, having just had this problem myself, it seems that Packery is a more up to date; much more maintained version of Masonry - from the same author. It's not clear to me why both projects exist as separate entities, with only typos fixed in the latter.
The good news is - it's almost totally a drop-in replacement. The only change I had to make (other than names masonry->packery where used) was to remove an option, because it is the default and only option in Packery.
That was isFitWidth: true, my feeble attempt to make Masonry pack things something close to how nicely Packery does without any options at all.
Another nice change with Packery is that gutter: x applies to vertical as well as horizontal gutters. In Masonry, this was horizontal only - though trivial with margin-bottom in CSS, this felt like a needless hack.