I need to show two rows of data in Ionic 1 list card view but i am not been able to achieve this. I have used two div to add two rows but its not working.
<div class="row row-responsive">
<div class="col">
<div class="row row-responsive item item-divider">
<div class="col " align="center">
Last Name
</div>
<div class="col " align="center">
First Name
</div>
<div class="col " align="center">
Middle Name
</div>
<div class="col " align="center">
Address
</div>
<div class="col " align="center">
Age
</div>
<div class="col " align="center">
City
</div>
<div class="col " align="center">
State
</div>
</div>
<div class="row row-responsive item list card cardBase" ng-repeat="item in myList">
<div class = "row row-responsive">
<div class="col item-Overflow" align="center">
{{item.LName}}
</div>
<div class="col item-Overflow" align="center">
{{item.FName}}
</div>
<div class="col item-Overflow" align="center">
{{item.MName}}
</div>
<div class="col item-Overflow" align="center">
{{item.Address}}
</div>
</div>
<div class = "row row-responsive">
<div class="col item-Overflow" align="center">
{{item.Age}}
</div>
<div class="col item-Overflow" align="center">
{{item.City}}
</div>
<div class="col item-Overflow" align="center">
{{item.State}}
</div>
</div>
</div>
</div>
Where cardBase class is
.cardBase {
margin: 15px 0;
padding: 16px;
width: 100%;
height: 150px;
resize: none;
}
After doing this still data is shown in one single row. Please help me to show data in following format
As simple as this:
<ion-content>
<div class="card">
<div class="row">
<div class="col">John</div>
<div class="col">Dev</div>
<div class="col">Peter</div>
<div class="col">Washington, DC</div>
</div>
<div class="row">
<div class="col">23 Years</div>
<div class="col">Tucson</div>
<div class="col">USA</div>
</div>
</div>
</ion-content>
Check ionic grids for more.
Related
I am iterating ngFor in angular 6. When i am clicking on button a div should open beside row of that particular button but it is opening below ngFor like this
I want to make it open for that partcular row and below that.
<app-filter></app-filter>
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
Now it is coming like this
Desired behavior will be like this It's like accordian on click it should open below that row and rest of below rows will be shifted downwards
The problem resides into openLayout variable that is shared for all your rows.
You need one openLayout for each row. you can add it dinamically to your data like this:
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
At the beginning it will be false because undefined is like false.
I don't know what happened but I build a modal for Shopping-Cart Page.
When I try to click the title of Item in modal, and the modal will hide and link can not affect as normal. I don't know why and how to solve it.
It makes me so frustrated.
My Bootstrap4 Version is 4.1.3
Is this bug caused by this version?
Here is my code:
<div id="modalCart" class="modal fade" tabindex="-1" role="document">
<div class="modal-dialog bg-light" role="document">
<div class="modal-header">
<h5 class="modal-title text-center"><i class="fas fa-shopping-cart pr-1"></i>購物車</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form class="form-group">
<div class="media cart-item mt-3 mb-3">
<img class="mr-3" src="img/NOIMAGE.png" style="width: 120px; height: auto;">
<div class="media-body">
<h5 class="mt-0">商品1</h5>
<div class="price-group">
<div class="form-inline">
<span class="price mr-1" style="width: 4em;">500元</span>
<span class="multiple mr-4"><i class="fas fa-times"></i></span>
<div class="input-group mr-2">
<div class="input-group-prepend">
<a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-left"></i></a>
</div>
<input type="text" class="form-control" value="1" style="width: 5em; text-align: center;">
<div class="input-group-append">
<a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-right"></i></a>
</div>
</div>
<a class="btn btn-danger" href="#"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer text-center">
關閉購物車
<i class="fas fa-cart-arrow-down pr-1"></i>結帳
</div>
</div>
</div>
You are missing modal-content level. It should be structured in the following way (schematically):
.modal
.modal-dialog
.modal-content
.modal-header
.modal-body
.modal-footer
And you did it like this:
.modal
.modal-dialog
.modal-header
.modal-body
.modal-footer
When you fix html structure everything will work fine.
I'm a beginner in Ionic 3.
I have a 4 text in same color, I'm trying to make when I click on the 4 text at for time I want to change color.
Example
I click on 1st text, then I want to change it black color
I click on text 2, then I want to change black color and 1st text is set a default color,
Please help me to fix this issue
<div class="row">
<div class="col right-border">
<div text-center>
<h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
</div>
</div>
<div class="col bottom-border">
<div text-center>
<h2 class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
</div>
</div>
</div>
<div class="row">
<div class="col top-border">
<div text-center>
<h2 class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
</div>
</div>
<div class="col left-border">
<div text-center>
<h2 class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
</div>
</div>
</div>
</div>
You can use [ngClass] attribute to achieve this. This can be used to dynamically return the class name as per the last clicked text. The code will be something like below.
<div class="row">
<div class="col right-border">
<div text-center [ngClass]="getTextColor('text1')" (click)="setSelectedText('text1')">
<h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
</div>
</div>
<div class="col bottom-border">
<div text-center [ngClass]="getTextColor('text2')" (click)="setSelectedText('text2')">
<h2 class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
</div>
</div>
</div>
<div class="row">
<div class="col top-border">
<div text-center [ngClass]="getTextColor('text3')" (click)="setSelectedText('text3')">
<h2 class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
</div>
</div>
<div class="col left-border">
<div text-center>
<h2 class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
</div>
</div>
</div>
In controller
private selecteTextId :string;
setSelectedText(textId:string) {
this.selecteTextId = textId;
}
getTextColor(textId:string):string{
return this.selecteTextId == textId? "highlight-color" : "";
}
In scss file
.highlight-color {
color:blue;
}
I am a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.
Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>
i've added a inline-form to my page, in the main area,
the form is a bit to wide, i would like that it collapse at 991px,
but the rest of the page can collapse at 767px
i understand it can be done with mediaquery but not sure on what to code.
i'm stuck here!
what can i do?
i copied the inline form originally from a navbar of a file, the button is working fine.
it look like this:
<div class="container">
<div class="text-center">
<button
class="btn btn-default form-toggle"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"> <span class="sr-only"> Toggle navigation</span> Reservations
</button>
</div>
<div id="collapseExample" class="navbar-collapse collapse">
<div class="text-center ">
<form class="form-inline navbar-form" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
</div>
</div>
</div>
thank you for your help,
ok actually i'm almost there.
i like the solution using the bootstrap grid, i've added the media queries but it's not showing as i want, from 992 above it should show only the form, not the button
<div class="container">
<div class="text-center">
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#myForm"> Reservations
</button>
</div>
<br>
<form class="collapse collapse-class" role="form" id="myForm">
<div class="col-lg-2">
<p>
<input type="email" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="password" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<button type="submit" class="btn btn-default">Button</button>
</div>
</form>
</div>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
You can do your on custom collapsing with a simple media query and css class. Simply toggle the CSS display from inline-block to block. Here, at 1000px and under, the two selects of the the second td will stack vertically; horizontally above 1000px.
CSS:
.collapse-it {
display: inline-block;
}
#media (max-width: 1000px) {
.collapse-it {
display:block;
}
.mobile-view:after {
content:"mobile view vertical stacking";
}
}
HTML:
<table style="border: 1px solid black;">
<tbody><tr>
<td style="border: 1px solid black;">
<div style="margin:5px;">credit card expiration</div>
</td>
<td style="border: 1px solid black;">
<div style="margin:5px;">
<div class="form-group collapse-it">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
<div class="form-group collapse-it">
<select>
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</div>
</div>
</td>
<td class="mobile-view" style="border: 1px solid black;"></td>
</tr>
</tbody></table>
View Demo on Bootply
If you just want it to go away at 992px but keep the button, put a class on what you want to collapse, and leave the button outside it. Then write a media query to display: none at 992px like so:
<form class="form-inline navbar-form collapse-class" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
There may be a more elegant way to do this, but I'm having a hard time figuring out exactly what you want, so I'm trying to be general.