How would you conditionally remove the last <"hr> from the input of this JSON object..upon retrieving the last object inside of it?
<div class="row" ng-repeat="post in posts">
<div class="col-lg-9 col-lg-offset-2">
<!-- blog entry -->
<h1>{{post.title}} </h1>
<p><span class="glyphicon glyphicon-time"></span>{{post.time_Date}} </p>
<img ng-src="{{post.imageUrl}}" width="400" height="350">
<br>
<br>
<br>
<p>{{post.blog_Post}} </p>
<a class="btn btn-default btn-sm" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
</div>
<div class="row" ng-repeat="post in posts">
<div class="col-lg-9 col-lg-offset-2">
<!-- blog entry -->
<h1>{{post.title}} </h1>
<p><span class="glyphicon glyphicon-time"></span>{{post.time_Date}} </p>
<img ng-src="{{post.imageUrl}}" width="400" height="350">
<br>
<br>
<br>
<p>{{post.blog_Post}} </p>
<a class="btn btn-default btn-sm" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
**<hr ng-hide="$index==posts.length">**
</div>
</div>
Something like this should work
Related
I'm want to select the words "Dashboard", "Attendance", "Marcum" and "Results" and set their color to White.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
I tried to do it by :
div a[role="button"] {
color: white;
}
However, since I have other elements with role "Button", they are all changed to white which is undesirable in my case. I only need to target these four words. Is it possible? Any help is appreciated in advance.
Thanks
Use the parent elements in the selector to be more specific:
.fpstartwrap > .fpstart > .iconset > div.btn.btn-secondary a[role="button"] {
color: white;
}
Or simply apply a class to those buttons which you only use for these four buttons and use that class in your selector.
To get a CSS selector to only act on a button inside a div use > this tells CSS to get all elements that have a parent div and role=button:
div > a[role="button"] {
color: white;
}
if you really need to be specific then you can even just add a special class to the buttons you wanna act on like
<a class="whiteButton" role="button" href="https://rafiee.net/attendance" title="Attendance" alt="Attendance" target="_blank">
Then for the CSS you can do
.whiteButton {
}
or if only whiteButton inside of div's
div > .whiteButton {
}
or even
div > a > .whiteButton {
}
div > a[role="button"]{
color: white;
background: blue;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
I'm trying to make a card of ship information for a game, but for each ship there are multiple veriations. e.g "Large Clipper" and a "Festive Large Clipper".
But on the dropdown menu my list items work once, and then don't return to an inactive state.
JSFiddle
<div class="p-0">
<div class="container">
<div class="row">
<div class="col-md-12" style="">
<div class="tab-content">
<div class="tab-pane fade show active" id="adventure" role="tabpanel">
<div class="card" style="">
<div class="card-header"><img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
<h4 style="display:inline-block">Large Clipper</h4>
<div class="btn-group float-right">
<button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
<div class="dropdown-menu" aria-labelledby="variationsDropdown">
<a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
<a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="large-clipper">
<div class="card-body">
<h6 class="text-muted">
Just a big and fast clipper.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="festive-large-clipper">
<div class="card-body">
<h6 class="text-muted">
A large clipper but with fancy plating.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see what I mean when you press on the items from the "Variations" dropdown.
Apparently it's a bug, found my solution here (github).
had to add
$(".nav-pills .nav-item .nav-link:not(.nav-pills .nav-item.dropdown .nav-link), .dropdown-item").click(function()
{
$(".dropdown-item.active").removeClass('active');
});
I'm teaching myself CSS and I'm a bit stuck with my page layout. I'm trying to get my login form to be right of my slider, but nothing I do works. Here's what my layout looks like right now...
Here is my CSS for the form:
.login-body { background-color: #f1f2f7 }
.form-signin {
max-width: 330px;
//margin: 50px auto 50px;
background: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.form-wrapper { //padding-bottom: 70px }
.login-bg {
margin-top: -40px;
margin-bottom: -50px;
//background-color: #f1f2f7;
}
HTML:
<!-- Sequence Modern Slider -->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>BUSINESS TOOLS</i>
<br>
<i>FOR YOUR</i>
<br>
<i>SUCCESS</i>
</h2>
<p>
<i>Data visualized</i>
<br />
<i>to meet your needs!</i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/graph.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>RESPONSIVE VIDEO</i>
<br />
<i>SUPPORT AND</i>
<br />
<i>MANY MORE</i>
</h2>
<p>
<i>Lorem ipsum dolor amet</i>
<br />
<i>tempor incididunt ut</i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/3.png" alt="image01" />
</div>
</div>
</div>
</div>
</div>
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>USING BEST WEB</i>
</br>
<i>SOLUTIONS WITH</i>
</br>
<i>HTML5/CSS3</i>
</h2>
<p>
<i>Lorem ipsum dolor amet</i>
<br />
<i>tempor incididunt ut</i>
<br />
<i>veniam omnis </i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/1.png" alt="image01" />
</div>
</div>
</div>
</div>
</div>
<!--<nav class="da-arrows">
<span class="da-arrows-prev">
</span>
<span class="da-arrows-next">
</span>
</nav>-->
</div>
<!-- Login start -->
<div class="login-bg">
<div class="container">
<div class="form-wrapper">
<form class="form-signin wow fadeInUp" action="index.html">
<h2 class="form-signin-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
<span class="pull-right">
<a data-toggle="modal" href="#myModal"> Forgot Password?</a>
</span>
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
<p>or you can sign in via social network</p>
<div class="login-social-link">
<a href="index.html" class="facebook">
<i class="fa fa-facebook"></i>
Facebook
</a>
<a href="index.html" class="twitter">
<i class="fa fa-twitter"></i>
Twitter
</a>
</div>
<div class="registration">
Don't have an account yet?
<a class="" href="registration.html">
Create an account
</a>
</div>
</div>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModal" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="button">Submit</button>
</div>
</div>
</div>
</div>
<!-- modal -->
</form>
</div>
</div>
</div>
<!-- Login end -->
You could try to give the login form a position: relative tag and then move it to the top by giving it a negative top: property.
If the login form is displayed directly under the slider then you can give top the negative value of the height of the slider and it should work
Design your two parts in separate Div tag.
Give width in percentage and set float property to left
I have a project where a user stores product information and creates articles. On my home view i have two divs. The one on the left is a ng-repeat which retrieves the articles of the products. The one on the right is a ng-repeat also, which shows my product list.
My problem is when i GET my articles, the right one div, breaks the line and shows up on my last result of my article.
this is the position of the right div i want
this is the position of the right div i dont want
here is my home view:
<!DOCTYPE html>
<html>
<head>
<style>
.col-md-4 {
float: right;
}
</style>
</head>
<body>
<br/>
<br/>
<div class="container" ng-controller="HomeCtrl">
<br/>
<div class="row">
<div class="col-md-8" ng-repeat="article in articles" >
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left meta">
<div class="title h5">
<b>{{article.title}}</b>
</div><br/>
<ul class="list-unstyled list-inline">
<li><i class="glyphicon glyphicon-calendar"></i> {{article.published}}</li>
<li><i class="glyphicon glyphicon-user"></i> {{article._creatorname}}</li>
<li><button class="btn btn-danger btn-xs" ng-click="remove(article._id)"><span class="glyphicon glyphicon-trash"></span></button></li>
</ul>
</div>
</div>
<div class="post-description">
<p>{{article.body}}</p>
</div>
<div class="post-footer">
<div class="input-group">
<input type="text" id="userComment" ng-model="comment" class="form-control input-sm chat-input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" ng-click="addComment(article._id, comment)"><span class="glyphicon glyphicon-comment"></span> Add Comment</button>
</span>
</div>
<ul class="comments-list">
<li class="comment" ng-repeat="comment in article.comments">
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment._commentorname}}</h4>
<h5 class="time">{{comment.date}}</h5>
<div class="pull-right meta">
<button class="btn btn-danger btn-xs" ng-click="removeComment(article._id, comment._id)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
<p style="width: 350px;">{{comment.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default mail-categories">
<div class="panel-heading">
<strong><span class="fa fa-th"></span>
Resources</strong>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="resource in resources">
{{resource.name}}, Model Number: {{resource.modelno}}
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>
I want my div col-md-9 to have a height the same as the content in my first div col-md-3's contents.
I also want my div col-md-9's button inside to be the same height as the col-md-3's content.
I'd like the text on the button to fill the button also.
How do I accomplish this?
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
All you have to do is change the div with the class "row" to the height you want.
<div class="row" style="height:300px;">
<div class="col-md-3" style="height:100%">
<div class="thumbnail" style="width:100%; height:100%">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style=" background: #f0e68c;height:100%">
<div class="thumbnail" style="width:100%; height:100%;">
<a class="btn btn-primary" style="" href="#(Url.Content('~/ProjectTimer/LITL.DesktopTimer.application'))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
Are you looking for a result like this?
Codepen: link
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))" >
</a>
<div class="caption" style="height:300px;">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share" style="font-size: 300px;">LIRA</span>
</a>
</div>
</div>
</div>
Just use the btn-block class, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
The issue is that the button is 100% height when using h-100, the solution is to set the form element to 100% also.
So it'll look like this:
#using(Html.BeginForm("Action","Controller", FormMethod.Post, new { #class = "h-100" }) {
<button class="h-100">Button</button>
}