I am trying to align the bottom picture to the right of the table. I know that i am missing a small setting here, but cant seem to find it. At the bottom code it is the saleForMonth element that I want to align it to the right.
<mat-sidenav-container>
<mat-sidenav-content style="height:99vh;">
<div style="float:left; margin:22px 0px 0px 32px;">
<div style="text-align:center;">
</div>
<button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;" (click)="sidenavOpen('sale',sidenav)">
<b>SALE</b>
</button>
<button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;margin-left:2px;" (click)="sidenavOpen('upgrade',sidenav)">
<b>UPGRADE</b>
</button>
<div style="margin-top:53px">
<div>
<salesByPackage></salesByPackage>
</div>
<div style="margin-top:240px;">
<salesByCampaign></salesByCampaign>
</div>
</div>
</div>
<div class="container" style="margin-top:20px;float:right">
<div class="col-lg-9">
<mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
<mat-tab label="SALES">
<orders></orders>
</mat-tab>
<mat-tab label="UPGRADES">
<upgrades></upgrades>
</mat-tab>
</mat-tab-group>
</div>
<!-- Change to this -->
<div class="col-lg-3">
<div>
<salesForMonth></salesForMonth>
</div>
</div>
</div>
</mat-sidenav-content>
<div class="row" style="float:right">
<div class="col-lg-3">
<salesForMonth></salesForMonth>
</div>
</div>
Or you can use empty div at the left side and set it with col-lg-9
<div class="row">
<div class="col-lg-9">
</div>
<div class="col-lg-3">
abc
</div>
</div>
If your component salesForMonth is not of full width, Try this CSS -
<div style='width:100%; float:right'>
<salesForMonth></salesForMonth>
</div>
else just put float:right on your element.
<div class="container col-lg-9" style="margin-top:20px;float:right">
<mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
<mat-tab label="SALES">
<orders></orders>
</mat-tab>
<mat-tab label="UPGRADES">
<upgrades></upgrades>
</mat-tab>
</mat-tab-group>
</div>
<!-- Change to this -->
<div class="container col-lg-3">
<div>
<salesForMonth></salesForMonth>
</div>
</div>
put those 2 blocks into container and partition them as col-lg-9 and col-lg-3
Related
I am trying to display 4 similar cards in a grid. I am able to create the columns however the card actions only apply to the first one. (On click, an overlay appears with a 'view details' button and a further description about the product).
On hovering over the other 3 cards, nothing happens. Only the first one works.
<div class="container_grid">
<div class="row">
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What could be the problem?
Link to the full JFiddle https://jsfiddle.net/5yoerguh/1/
The problem is you use id for div, need change it to class
or use this selector $('.col-3 > div').hover(function(){}
https://jsfiddle.net/viethien/2nesgtLy/1/
I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)
I have a ng-repeat that has a variable height.
If I use a fixed height everything looks good. But I need the height of the parent panel to adjust automatically according to the ng-repeat child elements, otherwise I have overflow problems.
Is there any way to do this?
With Fixed height (see overflow at the bottom):
Without Fixed Height:
The code of the panels:
<div class="my-panel" ng-repeat="x in month.days">
<div class="panel-today" ng-show="x.today">
TODAY
</div>
<div class="panel" ng-class="x.panel_class">
<div class="panel-heading {{x.weekend}}">{{x.day}} {{x.date | date : 'dd-MM'}}</div>
<div class="panel-body my-panel-body">
<div ng-show="x.suspension != ''" style="width: 100%; text-align: center">
<b>{{x.suspension}}</b>
</div>
<div ng-show="x.suspension == ''">
<div class="well well-sm day-well">
<div class="day_period">
<div class="pull-right">
{{x.times.day.from}}<br/>
{{x.times.day.to}}
</div>
<div class="day_head">DAY</div>
</div>
<div ng-repeat="grade in x.staff.day.m">
<div class="letterCircleM">
{{grade.code}}
</div> S SIPHO
</div>
<div ng-repeat="grade in x.staff.day.f" class="letterCircleF">
{{grade.code}}
</div>
</div>
<div class="well well-sm day-well">
<div class="day_period">
<div class="pull-right">
{{x.times.night.from}}<br/>
{{x.times.night.to}}
</div>
<div class="day_head">NIGHT</div>
</div>
<div ng-repeat="grade in x.staff.night.m">
<div class="letterCircleM">
{{grade.code}}
</div> S SIPHO
</div>
<div ng-repeat="grade in x.staff.night.f" class="letterCircleF">
{{grade.code}}
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="panel-suspend" ng-show="x.suspension != ''">
SUSPENDED
</div>
<div ng-show="x.suspension == ''">
{{x.contract}}
</div>
</div>
</div>
</div>
If fixed height works for you, why don't you add it to the parent based on the length of the data you are repeating in ng-repeat via ng-style?
ng-style="{
'height': 30 * RepeatData.length + 'px'
}
30 is the height of one "repeated" block
I am usually able to do this. But for some reason everything I've tried just isn't working.
I've tried
<div class="row">
<div class="col-md-8">
<button>Toronto</button>
<button>Markham</button>
<button>Petawawa</button>
</div>
<div class="col-md-4">
<p>date</p>
<p>date</p>
<p>date</p>
</div>
</div>
And similar variations, but I can't seem to get the date and the event location to line up.
The code where the issue is occuring:
<div id="Location">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12 aboutCopyContainer">
<p class="copyHeader" style="font-family: testFont;">Locations</p>
<p class="faqContent">Fall for the FEAST at an event near you!</p>
<div class="row">
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Toronto.html'">Toronto</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">14</p>
<hr style="margin:0px;" />
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Petawawa.html'">Petawawa</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">7</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Markham.html'">Markham</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">22</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the JS Fiddle of what's happening:
JSFiddle
and this is the website (under Locations section) to give you a better idea of what I'm trying to do (css styling etc applied).
Oktoberfeast Locations
Any suggestions are greatly appreciated! thank you for your time
You added fixed width inside bootstrap column child. And that width together with other element width exeeded bootsrap column width, so the class locationDateCont appeared underneath:
So, in your CSS file, remove that width from that class, and add this:
.btnLocationCont {
width: auto;
}
Hope this helps!
You probably don't want to do this that way. Reason being is on mobile devices they won't match up.
To keep them together and display on desktop and mobile you could do something like this:
<div class="row">
<div class="col-md-4">
<button>Toronto</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Markham</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Petawawa</button>
<p>date</p>
</div>
</div>
Fiddle:
https://jsfiddle.net/8t5mjhf8/4/
EDIT: To make sure the p's stay next to the buttons you need the following CSS. You will want to assign a class to the p's as to no interfere with other paragraphs.
p {
display: inline;
}
I want to switch to div with class="col-md-x" depending upon the number of student object i am receiving.
E.x: Sample
if i am getting only one JSON object then i want to a div with class should be like(class="col-md-12").
if am getting two JSON object then i want to switch to a div with class="col-md-6".
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" class="col-md-12">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-6">
<div calss="thimbnail col-md-">
<div class="Option div 2">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-4">
<div calss="thimbnail col-md-">
<div class="Option div 3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use ng-class like below,
ng-class="{class}[condition]"
In your case ,
ng-class="{1:'col-md-12', 2:'col-sm-6'}[vm.students.length]"
For your reference, Detailed explanation
You have calss instead of class in the example code. I hope that is a typo.
To address to your problem you can make use of ng-class where you can assign classes based on conditions
More document on ng-class
Code Snippet:
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" ng-class="{col-md-12:vm.students.length === 1,col-md-6:vm.students.length === 2">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>