I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>
So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.
Related
JSFiddle
Hey! I've decided to use Masonry, which I find completely awesome.
Although I've ran into the issue where when I use it in a collapsible, it only works on the first collapsible when it's open. I can't seem figure out a way to get it to work when the collapsible is closed and then opened.
I would think it's because when the page loads the images aren't shown/don't exist. I've tried using Juery on click methods for when the collapsible is clicked to load Masonry. That didn't seem to work so I scratched that. I've tried using another on click method to reload Masonry when it's open. That also didn't seem to work correctly.
I am fairly new to JavaScript so I wouldn't be surprised if I had done something wrong. But any help would greatly appreciated. Especially considering I've been banging my head for the last few days on this.
I hope this is enough! Thanks in advance!
HTML :
<ul class="collapsible popout">
<li class="active">
<div class="collapsible-header">
<h1 class="bodyFont noMargin">
Landscapes
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes1" name="Landscapes1">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link to album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes2" name="Landscapes2">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
<li>
<div id="secondCategory" class="collapsible-header">
<h1 class="bodyFont noMargin">
Potraits
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="card deep-purple lighten-4" id="Butterflies" name="Butterflies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Bees" name="Bees">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="RollyPolies" name="RollyPolies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Ants" name="Ants">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
</ul>
CSS:
.grid {
margin: 0%;
}
.card,
.grid-sizer {
width: 31.3%;
margin-top: 5px;
margin-bottom: 5px;
}
.gutter-sizer {
width: 2%;
}
JS:
$(".collapsible").collapsible();
var $grid = $(".grid");
$grid.masonry({
itemSelector: ".card",
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
percentposition: true,
horizontalOrder: true
});
$grid.imagesLoaded().progress(function() {
$grid.masonry("layout");
});
I have a project that needs a CSS menu bar with panel of overview panels on the right side of HTML page. My issue is the that the CSS menu bar style sheet menu does not render. Attempting to get this CSS menu bar working, then extend code functionality for content links, login, dashboard, etc.
Code: tag
<header class='header'>
<div class='header_top-bar'>
<div class='top-bar_title'>
<a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
<div class='ajax-loader' id='ajax-loader'>
<div class='ajax-loader_animator'></div>
</div>
</div>
<div class='top-bar_toggle' id='menu_toggle'>
<span></span>
<span></span>
<span></span>
</div>
<!-- <div class='top-bar_share' id='share_toggle'>
<span class='underline--white'>
SHARE
</span>
</div> -->
<div class='top-bar_menu' id='overlay_menu'>
<ul class='menu_container'>
<li class='menu_item'>
<span>.01.</span>
<a class='link-ajax' href='/'>Home</a>
</li>
<li class='menu_item'>
<span>.02.</span>
<a class='link-ajax' href='/project'>Athena Customers</a>
</li>
<li class='menu_item'>
<span>.03.</span>
<a class='link-ajax' href='/wines'>Athena Services</a>
</li>
<li class='menu_item'>
<span>.04.</span>
<a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
</li>
<li class='menu_item'>
<span>.05.</span>
<a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
</li>
</ul>
<div class='language-chooser menu_item'>
<div class='masi-agricola_wrapper hide-on-mobile'>
<a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
<img src='images/agricola.png' data-image='images/agricola.png'/>
</a>
</div>
<p class='text--subtitle'>select your language</p>
<span class='language-link'><a class='' href='/en/'>Eng</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/es/'>Esp</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/it/'>Ita</a></span>
</div>
</div>
</div>
</header>
Code: content section
<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">
<section class="main-content clearfix homepage">
<div class="main-content_background">
<div class="half_screen full-height-desk" id="biggest_block">
<a href="project" class="">
<div class="text-block">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena Intelligence Earth's Essential Data
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena Intelligence Login
</strong>
</div>
<img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
</div>
</a>
</div>
<div class="half_screen full-height-desk">
<a href="wines">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena: Many industries: all use Land, Food, Energy, Water
</h1>
<strong class="page-header_subtitle text--subtitle">
The Gods: Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
</div>
</div>
</a>
<a href="sustainability" class="">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Sustainability
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena : Dedication To Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
</div>
</div>
</a>
<a href="hospitality">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Hospitality
</h1>
<strong class="page-header_subtitle text--subtitle">
Land, Food, Energy, Water: That Welcomes You
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
</div>
</div>
</a>
</div>
</div>
</section>
Code: title bar wrapper tag
<div class='out-loader_wrapper'>
<div class='out-loader'>
<div class='filler' id='filler'>
<img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
<div class='filler-bar'></div>
<p class='text--title' id='loader_text'>0</p>
</div>
</div>
</div>
Given you did not post the complete HTML I cannot tell if you are linking the stylesheet correctly. Nothing in your HTML looks out of place, which means that if you can't see the styles rendered then either the stylesheet was not linked correctly to the document or you did not import it correctly if you're using a preprocessor like SASS or LESS.
However, you can try the following:
Make sure you're linking it correctly in your document's <head> like <link href="path/to/your/menu-stylesheet.css rel="stylesheet">.
If you're linking multiple stylesheets, make sure to link them in the correct order. This means that if you reference classes or styles that are declared in another stylesheet, you must ensure to link the stylesheet that is referenced before the stylesheet that makes the reference.
If you're using a preprocessor, make sure you imported the stylesheet correctly like #import 'path/to/stylesheet.less (mind the correct extension whichever your case.
If you're using a task runner like grunt or gulp, you can concatenate your stylesheets into one single stylesheet.
I'm attempting to create a profile website.
However I seem to have hit a brick wall; I'm unable to figure out a way of making my carousel center itself in my section.
Does anyone have any advice on what I could do?
Here is a codepen with the code:
https://codepen.io/Todai/pen/RRPGwZ
And here is my .html:
<html>
<head>
<link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/flipCardCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="container-fluid">
<header id="banner">
<div class="container">
<div class="col-md-2">
<!-- <span id="link"> -F </span> -->
<img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg">
</div>
<div class="col-md-10">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<nav id="navbar" role="navigation" class="collapse navbar-collapse" aria-expanded="false">
<ul class="nav navbar-nav navbar-right">
<li class="active">
About
</li>
<li class>
Portfolio
</li>
<li class>
Contact
</li>
</ul>
</nav>
</div>
<a id="top" name="home"> </a>
</header>
<main >
<header class="row customClass">
<div class="intro-text col-md-8" >
<p class="text-right">
My name is <strong> J</strong>oakim <strong>K</strong>akaei, I'm a Software Engineer with knowledge of most main-stream languages as well as some more obscure. I have experience working with c++, c#, java amongst many other; working knowledge of project management and methodologies.
</p>
<hr class="star-bright">
</hr>
<span class="skills">
Software Engineer - Web Developer - Security Hobbyist
</span>
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/todai/image/upload/v1464900561/12976795_10208023281372738_6826518550098825642_o_e2brh3.jpg" alt>
</div>
</header>
<section id="Portfolio">
<h2> Portfolio </h2>
<hr class="star-dark"/>
<div class="container center">
<div class="prev">Prev</div>
<div class="carousel">
<div class="item a">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item b">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item c">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item d">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item e">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item f">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
</div>
<div class="next">Next</div>
</div>
</section>
</main>
</div>
</div>
</div>
</body>
</html>
<script src="resources/scripts/carousel.js"> </script>
This is an easy way to horizontally center a relatively positioned element:
.carousel {
position: relative;
margin: 0 auto;
}
So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.
This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!
I want to repeat items as shown in the image. I have done repeating by using ng-repeat. All contents are repeated but not in a structure that is shown in the image. how to split the contents like this.. ???
<div class="activityCon" ng-repeat="activity in activity1">
<!--image-->
<div class="n-col erpSub"> <a class="link brand erp-display-block fk-uppercase erp-text-center" href="#">
<div class="bg-gradient"> <span class="fa fa-chevron-down"></span> </div>
<p class="title erp-font-15">{{ activity }}<br>
<span></span></p>
</a>
</div>
<!--image-->
<div class="clearfix"></div>
<!--1st content wrap-->
<div class="col-md-6 warpLine1 msg-time-chat" ng-class="$odd ? 'col-md-6' : '' " >
<!--message content - 1 -->
<div class="message-body msg-in" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap" > <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
<!--message content - 1 -->
</div>
<!-- <div class="col-md-6 WarpLine2 msg-time-chatRight">
<div class="message-body msg-in" ng-if="$odd" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap"> <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
</div> -->
<!-- <div class="col-md-6"></div> -->
<div class="clearfix"></div>
</div>
I think Your condition is wrong. You checked like this...
ng-class="$odd ? 'col-md-6' : '' "
Instead u can Change as
ng-class="{'pull-left':($index %2 ==0),'pull-right':($index %2 ==1)}"