I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
Related
I have 100 rows, I need to display in a popup. So, 50 rows should be displayed in left side of the popup and 50 rows should be displayed right side of the popup.
This is my HTML code that I have tried. But, I can not get two tables.
HTML Code
<div class="panel-body p0">
<ul ui-sortable="sortableOptions" ng-model="itemListArray" style=" list-style: none outside none; padding-inline-start: 15px; ">
<li class="featureContentBox-30" ng-style="{ 'cursor' : (sortableEventStart == true) ? 'all-scroll' : 'default' }" ng-repeat="dimension in (itemListArray | limitTo: totalShow.count) track by $index">
<div class="row p10">
<div class="col-sm-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="col-sm-2">
{{$index+1}}
</div>
<div class="col-sm-4">
{{dimension.valueName}}
</div>
<div class="col-sm-4">{{dimension.displayName}} </div>
<div class="col-sm-1" ng-click="removeDimension($index)"> x</div>
</div>
</li>
</ul>
</div>
Think in this way...
<div class="row">
<div class="col-6">
// left side
</div>
<div class="col-6">
// right side
</div>
</div>
So basically I'm using a template for my site and adjusting accordingly. The site defines the menu-bar to be hidden on start and it appears on scroll down.
The text and menu button however, always appear on start. I cant understand how I can also tell the text (email and phonenumber) to stay hidden with the rest of the menu-bar.
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
/* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');
/* TOP Menu Stick */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){
$('#sticky-header').addClass("sticky");
}
else{
$('#sticky-header').removeClass("sticky");
}
});
/* meanmenu */
$('#mobile-nav').meanmenu({
meanMenuContainer: '.basic-mobile-menu',
meanScreenWidth: "767"
});
/* hamburgers menu option */
$('.hamburger').on('click', function() {
$(this).toggleClass('is-active');
$(this).next().toggleClass('nav-menu-show');
});
$(document).on('scroll',function(){
$(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties
})
.makescroll{height:1000px;}
.hamburger-menu{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
<div class="makescroll">Extended scroll</div>
</div>
</div>
</div>
</div>
</div>
</header>
I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
I am using bootstrap 3.3.5, jquery 1.11.3 and the affix script to try to keep my navigation bar at the top of my screen at all times. It has been working well except when I try to add columns with the col-xs-* and col-md-* classes.
For example it scrolls fine with multiple containers in rows like this:
<div id="container" class="container-fluid">
<div id="about" class="container-fluid">
<!--some information here, it scrolls fine-->
</div>
<div id="resume" class="container-fluid">
<div class="container-fluid">
<!--seemingly the problem has to do with using the xs and md tags-->
<div class="row" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<div id="projects_sidescroller" class="container-fluid">
<!--this one scrolls fine as well-->
</div>
I have set up a jsfiddle link with the problem present. When you scroll down to the coloured table, it's text will display on top the navbar instead of hiding below it. https://jsfiddle.net/mhjyw37d/
Add z-index to your affix class.
Like:
.affix {
top: 0;
width: 100%;
z-index: 999;
}
I have a link to my div mySkills, and when I access my page I have the bars loaded, but I just want to load my progress bars when i click in my href to this div mySkills.
How can we do that?
<nav id="menu">
<ul>
<li >About</li>
<li>Skills</li>
<li >Contact</li>
</ul>
</nav>
<div class="mySkills">
<h1>John <span>Skills</span></h1>
<div class="skill">
<h6>HTML</h6>
<div class="progress_bar orange">
<div style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<h6>CSS</h6>
<div class="progress_bar teal">
<div style="width: 67%;"></div>
</div>
</div>
<div class="skill">
<h6>Photoshop</h6>
<div class="progress_bar blue">
<div style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<h6>PHP</h6>
<div class="progress_bar green">
<div style="width: 55%;"></div>
</div>
</div>
<div class="skill">
<h6>Javascript</h6>
<div class="progress_bar yellow">
<div style="width: 55%;"></div>
</div>
</div>
</div>
Here is a possible approach to your request:
http://jsfiddle.net/pHyz9/
HTML added:
<button id="update">Update Values</button>
CSS:
.skill {
display: none;
}
.progress_bar div {
transition: width 1s;
}
Javascript (jQuery):
$("#update").on("click", function(){
$(".skill").fadeIn(800);
$(".orange div").css("width", "75%");
$(".teal div").css("width", "67%");
$(".blue div").css("width", "80%");
$(".green div").css("width", "55%");
$(".yellow div").css("width", "55%");
});
It uses CSS3, it is a bit incomplete, and the code could be prettier, but this is only an example to show what can be done with such a simple code.
So you should take following steps in order to achieve your goal.
Steps:
1. Make your <div class="mySkills"> hidden using css.
div.mySkills
{
display:none;
}
2. And on Skills
$('a[href="#mySkills"]').click(function(e){
e.preventDefault;
e.stopPropagation;
$('div.mySkills').toggle();
});
More about .toggle() you can read from here.
P.S.: If I understand correctly your question and answer in properly replay with comments. I will correct it.
If you want to see working example open following link.