AngularJS - Expandable rows not working with ng-repeat - css

I have hard-coded two expandable rows which work fine. However, when I try to introduce ng-repeat the rows will no longer expand.
Working version: https://jsbin.com/tiwufiz/3/edit?html,js,console,output
ng-repeat version: https://jsbin.com/tiwufiz/5/edit?html,js,console,output
In the ng-repeat version all I have done is delete the second row, introduced ng-repeat and done ng-binding on the title...
<div class="row" ng-repeat="tut in demo.tutorials">
<div class="col-md-2"></div>
<div class="col-md-8">
<button class="collapsible">{{tut.title}}</button>
<div class="content">
<video class="video-js vjs-big-play-centered" controls preload="false" width="640" height="264"
style="display:block; margin: 0 auto">
<source src="resources/comercial.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<div class="mt10 mb10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
</div>
</div>


FIXED
I wrapped the for loop inside a $timeout (zero secs)

Related

Set columns at the same height

I have an issue about to set height of col2 and col3 at 70% respect of 100% col1, and col4 and col5 at 30%, I tried set this height's with some styles but so far I have had no luck.
Some recommendation?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 border">
<h1>Col1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col">
<div class="row">
<div class="col-12" style="height:70%">
<div class="row">
<div class="col border">
<h1>Col2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col border">
<h1>Col3</h1>
</div>
</div>
</div>
<div class="col-12" style="height:30%">
<div class="row">
<div class="col border">
<h1>Col4</h1>
</div>
<div class="col border">
<h1>Col5</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

If you set the column heights to a fixed height (either a percentage or 100% of its parent), then there’s no way for the setup to expand if, in the future, your Col 5 content is larger than you expect.
If you need more flexibility, you could setup the right-side column as a flex container and set the upper row to expand while the lower row stays the same. You won’t get an exact 70/30 split, but it will have a similar visual effect with the ability to have the lower row container more information without overflowing the space.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12 col-sm-3 border" style="padding: 0 15px">
<h1>Col1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-12 col-sm-9">
<div class="container-fluid d-flex flex-column" style="min-height: 100%;">
<div class="row flex-grow-1">
<div class="col-12 col-sm-6 border">
<h1>Col2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-12 col-sm-6 border">
<h1>Col3</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 border">
<h1>Col4</h1>
</div>
<div class="col-12 col-sm-6 border">
<h1>Col5</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, sunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-info mt-1 pt-5">
<p class="text-center">next section</p>
</div>

.fill-height {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-3 border">
<h1>Col1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col">
<div class="row fill-height">
<div class="col-12" style="height:70%">
<div class="row fill-height">
<div class="col border fill-height">
<h1>Col2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col border fill-height">
<h1>Col3</h1>
</div>
</div>
</div>
<div class="col-12" style="height:30%">
<div class="row fill-height">
<div class="col border fill-height">
<h1>Col4</h1>
</div>
<div class="col border fill-height">
<h1>Col5</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to make a div flush with the left margin when inside a Bootstrap container

I am trying to make a shader to go all the way to the left (or right) depending on my page. The problem comes with using the container.
What I want:
HTML:
<div class="container">
<div class="col-xs-5">
<div class="shader" style="margin-top: 500px;">
<h3>Super cool title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</div>
And the following CSS:
.shader {
background-color: rgb(254, 254, 254);
background-color: rgba(254, 254, 254, 0.85);
padding: 15px;
border-radius: 5px;
}
The problem is, if I put it inside the container, it won't go to the side. If I put it outside the container, It won't stop after the col block.
I have tried this with a fluid container, but it still won't go all the way to the side. I also have to do a lot of trickery to align things out properly.

Two problems:
All col divs need to be in a row div. You're missing a row div.
Both types of container divs have 15px of padding. If you want content inside of it flush with the edge you need to either:
Remove the padding from the container class so everything in the container touches the edges or
Give your shader a negative margin so the other elements in the container do not to touch the edge.
Example below assumes you only want the shader to touch the edge. I also added an image placeholder as the background so you can see the shader touches the edge. You only need the change to the shader class:
body {
background: url(http://placehold.it/1000x1000);
background-size: cover;
}
.shader {
background-color: rgb(254, 254, 254);
background-color: rgba(254, 254, 254, 0.85);
padding: 15px;
margin-left: -15px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<div class="shader" style="margin-top: 500px;">
<h3>Super cool title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
<div class="col-xs-7">
</div>
</div>
</div>

Image over Bootstrap NavBar, fading out when scrolling

I am looking for a solution for the following scenario. I am using the Bootstrap NavBar. Further I managed to display a full-width image on top of the NavBar, see the screenshot below.
On the left hand side there normally is another figure. See this JsFiddle for both the HTML and CSS code, the following listing provides an excerpt of the relevant code.
#header {
width: 100%;
background-image: url(http://s23.postimg.org/9ym003hd7/headbg.png);
background-repeat: repeat-x;
height: 185px;
position: fixed;
}
#header img {
margin-top: 20px;
margin-left: 20px;
}
.navbar-fixed-top {
top: 140px;
padding-right: 20px;
}
.wrap > .container {
padding: 210px 15px 20px;
}
I want the following behaviour: When the content is long enough, scrolling down should move both NavBar and header upwards, such that the header eventually is hidden. The NavBar however should stay at the top of the page, even if the content of the page longer. It this possible?

You can use Bootstraps Affix.js for this. You don't need to fix your navbar for this so it's been removed as well as the position of the header itself.
Just add the data attributes to your navbar and the affix class in your CSS for your height requirement.
See working example Snippet.
#header {
background-image: url(http://placehold.it/185x185/f00/fff);
background-repeat: repeat-x;
height: 185px;
}
.navbar.affix {
width: 100%;
margin-top: -185px;
}
/* Breadcrumps */
.kras-breadcrumb {
list-style: outside none none;
font-size: 1.3em;
font-weight: bold;
margin-bottom: 0;
}
.kras-breadcrumb > li {
display: inline;
vertical-align: middle;
line-height: 50px;
}
.kras-breadcrumb > li + li::before {
color: #ff0000;
content: "\2022 ";
padding: 0 6px;
}
.kras-breadcrumb > .active {
color: #FFFFFF;
}
.kras-breadcrumb li a {
color: #FFFFFF;
}
/* Login form in NavBar */
.navbar input {
height: 20px;
padding: 0;
}
.form-inline .form-control {
width: 110px;
}
.navbar-kras-login {
margin-top: 11px;
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="header"></div>
<nav id="w1" class="navbar-inverse navbar-static-top navbar" role="navigation" data-spy="affix" data-offset-top="185">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul class="kras-breadcrumb navbar-left">
<li>MySite
</li>
<li class="active">Welcome Page</li>
</ul>
<ul id="w2" class="navbar-nav navbar-right nav">
<li>
<div class="navbar-text pull-right navbar-kras-login">
<form id="w0" class="form-inline" action="/" method="post" role="form">
<input type="hidden" name="_csrf" value="UGdBNWh2SFcyL3hmGxkHNhI/CUACGB01PDITdzckJWclP3h5LhohYw==">
<div class="form-group field-loginform-username required">
<label class="sr-only" for="loginform-username">Username</label>
<input type="text" id="loginform-username" class="form-control" name="LoginForm[username]" placeholder="Username">
</div>
<div class="form-group field-loginform-password required">
<label class="sr-only" for="loginform-password">Password</label>
<input type="password" id="loginform-password" class="form-control" name="LoginForm[password]" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-xs">Login</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="site-index">
<div class="jumbotron">
<h1>Congratulations!</h1>
<p class="lead">You have successfully created your Yii-powered application.</p>
<p><a class="btn btn-lg btn-success" href="http://www.yiiframework.com">Get started with Yii</a>
</p>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>

how to use data-equalizer-mq attribute

i'm new to zurb-foundation-5.on responsive equalizer topic they said
You can specify media queries for which equalizer should activate on. Apply the data-equalizer-mq attribute to the parent container. Set
the value of the attribute to the same media queries you are use to
using in Foundation. If you use an unknown media query, Equalizer will
ignore the media query request. This is particularly useful if you
have set equalize_on_stack to true.
i didn't understand what they said clearly. any one can explain briefly with demo examples.
thank you,

Basically it allows you to equalize the height of elements on your page based on screen size. My answer assumes that you've read and understand how Foundations media queries work.
Lets say you wanted to equalize the height of a row of elements on mobile devices only. You can achieve this by adding the small-only Foundation media query to the data-equalizer-mq attribute like so: data-equalizer-mq="small-only". Your HTML would look something like this:
<!-- Example 1: Equalize height on small screens only. -->
<div class="row" data-equalizer data-equalizer-mq="small-only">
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>First panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>Second panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>Third panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
As you can see from the codepen the height of each panel is different on a large screen as the content within each panel varies in length. However when you drag your browser screen in and it reaches the small-only breakpoint (640px) equalize will activate and the height of each panel will become the same (equalize).
For your reference I've included a second example in the codepen that illustrates the opposite of the above.
Hope that helps.

To add to Thomas
you can also have multiple equalizers that are nested inside each other, you will have to give them names for them to work
<div class="row" data-equalizer="foo">
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
<h3>Parent panel</h3>
<div class="row" data-equalizer="bar">
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="callout panel" data-equalizer-watch="foo">
...
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
...
</div>
</div>
</div>

foundation 5 accordion exposed content

I am trying to use the below foundation5 code. The problem is the content is exposed on load. I need it to be hidden until clicked on. I have been able to hide it but then it will not expand. Any suggestion would be greatly appreciated.
Thank you
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>

As per the Foundation docs, the the class active is used to display the corresponding content. So if you don't want your content to be displayed when the page loads, remove the class active. Additionally, make sure to keep your HTML markup clean. I see a lot of and invalid markup like unclosed tags in the example you provided. Your final markup should look like this:
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</dd>
</dl>
</div>
</div>

Resources