I am using ionic and wanted vertical span elements to have a certain distance between.
Here is a demo:
http://play.ionic.io/app/8682286f77a8
<ion-item class="item item-avatar icon-row">
<img src="img/sale_icon.jpg">
<span style="color:#078d00;font-size:22px; margin-bottom: 1opx"> {{ '36,000' }}</span>
<br>
<span style="color:#4b4b4b;font-size:18px"> Sale</span>
</ion-item>
However, margin-bottom is not working at all.
I could use another br between these spans and that works but it create more distance than I really want to.
What does really look wrong with it in above piece of code?
Just add display: inherit; property to span. It will work.
Plus, whenever you add some styling in ionic framework, don't forget to add !important with styling, because elements in ionic directives inherit styling from parent element.
Add display:inline-block to the span. It will make them respect the margin-bottom property.
<ion-item class="item item-avatar icon-row">
<img src="img/sale_icon.jpg">
<span style="color:#078d00;font-size:22px; margin-bottom: 10px;display:inline-block;"> {{ '36,000' }}</span>
<br>
<span style="color:#4b4b4b;font-size:18px;display:inline-block"> Sale</span>
</ion-item>
I've updated your code -
span {
display: list-item;
list-style-type: none;
}
now margin-bottom works well!!
Full Code -
<ion-item class="item item-avatar icon-row">
<img src="img/sale_icon.jpg">
<span style="color:#078d00;font-size:22px; margin-bottom:10px;"> {{ '36,000' }}</span>
<span style="color:#4b4b4b;font-size:18px;"> Sale</span>
</ion-item>
/* CSS */
span {
display: list-item;
list-style-type: none;
}
Working Demo, with display: list-item you don't need to add <br> after the span.
Related
I have a modal
<div class="modal fade editModal in" data-backdrop="static" style="display: block; padding-left: 15px;">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/solidfood.png"><br><br><br>
<input type="time" value="14:25" name="updatedAt" width="100%" height="80">
<br><br>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<br><br>
</div>
<br>
<button onclick="updateLog('7873')" class="btn btn-option btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog('7873', 'solidfood')" class="btn btn-option btn-danger btn-block">Delete</button>
</div>
</div>
</div>
CSS
.btn-option {
width: 100%;
height: 80px;
}
I have no idea why the buttons is not extended to the end!
It stopped at 95%.
How do I debug this and make it take a full width ?
The cause
The problem was caused by the margin-right: 10px;.
.btn, .btn:hover {
color: white;
margin-right: 10px;
}
A solution
So, what should you do? Setting margin-right: 0px; would produce the result you can see below. This is not what you want because there's no space in-between these two elements.
You need to set margin-right: 0px; only to the right (i.e., last) element. You can do this by adding this:
.btn:last-child, .btn:last-child:hover {
margin-right: 0px;
}
This will produce the result you can see below.
Try removing those two <br> tags inside the <div>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<!-- Try removing these -->
<br><br>
</div>
I don't think you'll need them inside a flexbox anyways.
Or maybe it's the padding-left:14px on the parent div that's causing this.Try changing that too and this should fix it.
I opened your code provided and unchecked "margin-right:10px;" and it removed the margin on the right side of the button so that the buttons take up the full width of the row (parent element) and both buttons are taking half of the row. See image: CSS code highlighted in yellow and Fixed App
There are multiple ways to skin this cat.
The bootstrap way:
This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.
<div class="row">
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
</div>
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
</div>
Result:
It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.
Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.
Custom CSS way:
If you want more control over the gap between the buttons, bootstrap may not be your best bet.
This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.
Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.
HTML:
<div class="double-btn">
<button onclick="updateLog('7997', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7997', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.
CSS:
.double-btn {
display: flex;
}
.double-btn .btn {
margin: 0;
}
.double-btn .btn:first-child {
margin-right: 5px;
}
.double-btn .btn:last-child {
margin-left: 5px;
}
Result:
From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.
It looks like you have margin-right on those two buttons, because your buttons have width of 100% and there is space between them and at the end of that div.
Try adding margin: 0; on .btn-option.
If this doesn't do the trick try setting white-space: normal; on parent div.
I’m working with a mat-tree in my Angular 7 application. It looks like this:
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
<mat-tree-node *matTreeNodeDef="let node">
<li>
<span *ngFor="let item of getArrayForIndenting(node)"> </span>
<button mat-icon-button disabled></button>
{{ node.name }}: {{ node.value }}
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<div>
<span *ngFor="let item of getArrayForIndenting(node)"> </span>
<button mat-icon-button matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
{{ node.name }}
</div>
<ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</mat-nested-tree-node>
Notice that each node is spaced really far apart vertically. This is what I’m trying to adjust.
I’ve tried everything. I’ve tried styling the height of various elements in the above markup, the line-height, the margins, the padding, etc., but nothing works.
According to this site:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_compact_css
I should be able to set the line-height on the ul element, but I tried that and it doesn’t work.
Can anyone tell what I’m supposed to do? Thanks.
EDIT: Here's the CSS:
.example-tree-invisible {
display: none;
}
.example-tree li,
.example-tree ul {
list-style-type: none;
}
Note that I removed the "mat-tree-node" class 'cause it didn't exist.
There's also a reference to fonts.googleapis.com in my index.html file:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
...which is probably what mat-icon-rtl-mirror comes from.
Hope that helps
Yes, you are right you should be able to set line height of ul or li elements. However, you have not pasted the css for the above code. Please give us css or create https://plnkr.co/
so that we can debug and help you. It is also possible that you may have margin or padding in ul or li element, check that as well.
just use .css to override min-height, e.g.
.mat-tree-node {
min-height:1.6rem; //min-heigth:0 if you want the min heigth possible
}
The only working way I found with angular 8 on a nested element (and nested tree) is
.mat-tree-node {
min-height: 1.2em !important;
height: 1.2em;
}
Ionic 2 app - I have a list of items, I use text-wrap to avoid text cutting off when i increase font size however when text-wrap attribute is used the font seems to go back to what I assume is the default size for text-wrap attribute. How do I change text-wrap (default) font size?
Font size increased - without text-wrap:
Font size increased - with text-wrap:
HTML
<ion-list text-wrap>
<div *ngFor="let item of menuItems">
<button ion-item (click)="goToPageFn(item)" class="app-font-25">
<b>{{item.name}}</b>
</button>
</div>
</ion-list>
CSS: [edit]
text-wrap {
font-size: 25px;
}
.app-font-25 {
font-size: 25px;
}
Ionic2 have in built css for button which makes it to not wrap the text content. If you want to alter the size of the text and as well to wrap it, modify your code as below
<ion-list>
<div *ngFor="let item of menuItems">
<button ion-item (click)="goToPageFn(item)" class="app-font-25">
<b>{{item.name}}</b>
</button>
</div>
</ion-list>
Your CSS:
.app-font-25 ion-label{
white-space: inherit;
font-size: 25px;
}
text-wrap is not required both in your html and css.
THE SITUATION:
In my Ionic 2 app I need to have the menu button on two lines: icon and text.
The problem is that somehow the ion-button directive force the button to be on one line.
I need the ion-button directive to be sure the button has always the proper formatting and positioning responsively.
I just need that button to be on two lines.
This the html and css of my attempt:
THE HTML:
<ion-header>
<ion-navbar>
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
<br />
<p class="menuSubTitle">MENU</p>
</button>
<ion-title>
HomePage
</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="person"></ion-icon>
<br />
<p lass="menuSubTitle">LOGIN</p>
</button>
</ion-navbar>
</ion-header>
THE CSS:
.menuSubTitle {
font-size: 0.6em;
float:left;
display: block;
clear: both;
}
THE QUESTION:
How can I make a ion-button on two lines?
Thanks!
You are along the right lines. A slight modification is needed for it to work.
Here is my markup:
<button ion-button block color="menu-o">
<div>
<ion-icon name="flash"></ion-icon>
<label>Flash</label>
</div>
</button>
The inner <div> inside the <button> is the trick. The only thing needed for this markup is to set the <label> element to display: block.
Since <p> is already a block level element. It may just work as is.
This will do the trick:
.button-inner {
flex-flow: column;
}
This will change the element ordering from horizontal to vertical.
You have to change the button height if you want it a bit prettier. (e.g. with icon margin)
.button-icon-top {
height: 5em;
.button-inner {
flex-flow: column;
.icon {
margin-bottom: 10px;
font-size: 2em;
}
}
}
Just add the class name to your button.
<button ion-button full large class="button-icon-top">
<ion-icon name="logo-twitter"></ion-icon>
<span>Click me</span>
</button>
HTML:
<p>
<a href="#">my
<span>favorites</span>
</a>
(13)
</p>
I want "favorites" to drop after "my", and then to separately style "(13)", which should be on the same line as "favorites".
I tried with the above markup and the following CSS but (13) also drops:
p span a { display: block; }
(13) should stay on the same line as "favorites" so it looks like
my
favorites(13)
How about this?
my<br>favorites<span>(13)</span>
The longer version (more flexibility)
If you don't want a line break, you could use a block element. Now, since block elements aren't allowed inside inline elements (<a>), you should use span tags and style them as block elements.
<a href="#">
my
<span class="second-line">
favorites <span class="count">(13)</span>
</span>
</a>
And the CSS:
a .second-line {
display: block;
}
a .count {
color: #888888;
}
Would this work for you?
<p>
<a href="#">my
<p>favorites <span>(13)</span></p>
</a>
</p>