I am new to ionic framework
I need to get this view done
I have tried this thing
<div class="row">
<div class="col col-80">
<div class="row">
<img src="{{jobDetails.category.name}}.png" class="col col-10" width="30">
<span class="heading col col-10" ng-bind="jobDetails.category.name"></span>
(<span ng-bind="jobDetails.subcategory.subCategoryName" class="heading"></span>)
</div>
</div>
</div>
But i am unable to get the correct view there
Any help would be appreciated
I hope to help you with my answer below:
<div>
<div class="row">
<div class="col col-10">
<img src="" alt="not available">
</div>
<div class="col col-90">
<span>
Text goes here
</span>
</div>
</div>
<p>If the text extends in the first row ..</p>
</div>
Related
I am trying to make it like an admin panel thingy. and for that, I am going for a pannel look and since I want it to be a little irregular I want the size of cards to vary. This is what I want to fix:
I don't want the space that I have crossed out with red and I want the thing on the right to extend beyond its row, and I don't know how to do that?
My code(I am using Django and Materialize and a custom styling sheet for colours):
<div class="container">
<div class="row">
<div class="col s3">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Networth</span>
<h3 class="center-align cardVtext">{{net_worth}}</h3>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Balance</span>
<h3 class="center-align cardVtext">{{balance}}</h3>
</div>
</div>
</div>
<div class="col s2">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">% Increase</span>
<h3 class="center-align cardVtext">{{percentage_increase}}</h3>
</div>
</div>
</div>
<div class="col s4">
<div class="card right ">
<div class="card-content Vgrey white-text">
<table class="highlight centered responsive-table">
<thead>
<tr>
<th>Company</th>
<th>Stocks Owned</th>
</tr>
</thead>
<tbody>
{% for stock in portfolio %}
<tr>
<td>{{stock.stock_ticker}}</td>
<td>{{stock.stocks_owned}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div> <!--First row ends here-->
<div class="row">
<div class="col s8">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Networth</span>
<canvas id="myChart"> </canvas>
</div>
</div>
</div>
</div> <!--second row ends here-->
</div><!--Container ends here-->
This was answered very well by a user on Reddit by the name of jonassalen.
You just need another column layout in this example.
First a row with 2 columns: In that first column you put the block
with the 3 columns and the bigger block beneath. In the second column,
you put the block on the right.
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>
I am trying to simply center text in ionic list-inset. I tried adding row-center as some answers suggest. I also tried writing custom CSS like the one mentioned here. None of them have worked for me so far.
My code is below. Where should I go from here?
<ion-content ng-controller="DashboardCtrl">
<div class="card">
<div class="list list-inset">
<div class="item item-divider">
<div class="row row-center">
<div class="col col-25">Ticker</div>
<div class="col col-25">Price</div>
<div class="col col-25">Shares</div>
<div class="col col-25">Value</div>
</div>
</div>
<label class="item" ng-repeat="item in sData">
<div class="row row-center">
<div class="col col-25">{{item.ticker}}</div>
<div class="col col-25">{{item.price}}</div>
<div class="col col-25">{{item.shares}}</div>
<div class="col col-25">{{item.value}}</div>
</div>
</label>
</div>
</div>
</ion-content>
Instead of row-center try text-center
I am new to bootstrap.I want to place an image tag and two elements inside a div so that image tag and elements should be in side by side.
code:
<div class="container">
<div class="row">
<div class="col-xs-2">
<img class="img-responsive" src="../Content/Images/App/image1.png" style="height:50px; float:left" />
<p>Employee ID</p>
<p>EmployeeName</p>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
Expected Output:
I want Image and employee details parallely.(Employee id and Employee Name one below the other)
can anyone help?
Thanks in advance!
Hope this helps:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="../Content/Images/App/image1.png" style="height:50px;"/>
</div>
<div class="col-xs-4">
<p>Employee ID</p>
</div>
<div class="col-xs-4">
<p>EmployeeName</p>
</div>
</div>