Scrollable content elements with Angular Material dynamic-height tabs - angularjs

This question has come up several times during the evolution of Angular Material, but I'm not able to make any of the suggestions work for v1.0.5. The entire page (or flex container) scrolls, moving the tabs out of view.
How can I achieve scrollable, full-height content elements?
<div flex>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding">
Demo fiddle
Bonus Karma for incorporating custom scrollbars.

I've worked it out. By removing the dynamic-height directive, then using absolute positioning, it's working:
.tabs-wrapper {
position: relative;
}
.full-size {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div ng-app="sandbox">
<div flex class="tabs-wrapper">
<md-tabs class="full-size" md-border-bottom>
Fiddle demo
Absolute positioning is required to get the child of a flex element to expand.
Note: The height is incorrect in the fiddle demo. This problem doesn't occur in my project.

Wrap the tab content inside a div and assign it a max height.
<md-tab label="two">
<md-content class="md-padding">
<div class="tab-content">
<h1 class="md-display-2">Tab Two</h1>
<div>
<md-content>
<md-tab>
and css part
div.tab-content{
max-height:350px;
}
Js-fiddle link

Try this:
md-tabs-wrapper {
position : fixed;
width: 100%;
z-index: 1;
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
md-tabs-content-wrapper {
margin-top: 48px;
}

Related

Using an ag-grid inside an md-tab

I've used ag-grid, and have followed the rule of having the parent div of the page define an explicit height so that I can set a maximum height on the grid, allowing scrolling, rather than growing in heigh indefinitely. So, I have something like this:
<div ng-controller="MyController as myCtrl" style="box-sizing: border-box; padding-top: 5px; width: 100%; height: 90%">
...
<div ag-grid="myGridOptions" class="ag-blue" style="width: 100%; height: 55%"></div>
This works fine, and the percentage behave as you'd expect.
I'd now like to set up some tabs using the angular material md-tabs. When I put my ag-grid inside the tabs, it seems that the height value I've set isn't high enough. I assume that it's using the height of the md-tab or the md-tabs, however, I'm not sure how/if I can explicitly set the height of the tab. I've tried doing so with a 'style' attribute, but it seems to have no effect.
I assume I need to force the tab, or tab container to be a certain height, but I'm not sure how to do this.
<div ng-cloak>
<md-tabs md-border-bottom >
<md-tab label="Tab1" >
<div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>
You could try add md-dynamic-height at <md-tabs>
Documentation: https://material.angularjs.org/latest/api/directive/mdTabs
<div ng-cloak>
<md-tabs md-border-bottom md-dynamic-height >
<md-tab label="Tab1" >
<div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>

ng-cloak not solving the initial flicker issue with Angularjs UI Bootstrap tabset

I am using Angularjs UI Bootstrap Tab set. In order to avoid initial flicker issue, with tab names, I am using ng-cloak, but surprisingly still the initial flicker is appearing. I guess it is due to the large html content I have. Can any one suggest any fix for this?
The following is my tab set, and tab names are causing initial flicker issue.
<body >
<div class="splash" ng-controller="ApplicationController" ng-cloak>
<p>Please wait while loading!</p>
</div>
<div id="content" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
<tabset>
<tab ng-repeat="eachTab in chartsTabs" heading="{{eachTab.tabName}}" select="createChartsPerTab(recordsSet, eachTab)"> </tab>
</tabset>
</div>
</body>
The following is my piece of code using ng-cloak:
<div id="splash" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
And in my custom css file I have :
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
What I would suggest is, as your tab name is seen with flicker effect, the issue is at the directive level, you can modify your directive tab's template html to include a ng-cloak wherever the name of tab appears.
You should also put a ng-cloak directive on your other container. I.e.
<body ng-controller="ApplicationController">
<!-- Please note that this splash is a separate div beside the main div -->
<div class="splash" ng-cloak>
<p>Please wait while loading!</p>
</div>
<!-- and here comes your content div -->
<div id="content" ng-controller="ContentController" ng-cloak>
<!-- everything else here -->
</div>
</body>
and your custom css looks like:
/* this css rule is to hide everything with the ng-cloak directive */
[ng-cloak] {
display: none !important;
}
/* this css rule displays the splash element if the ng-cloak directive is active */
[ng-cloak].splash {
display: block !important;
}
/* just style your splashscreen */
.splash {
position: absolute;
background-color: #ededed;
color: #ffffff;
display: none;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 5000;
}
.splash p {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 20px;
text-align: center;
margin: auto;
}
ng-cloack could not be used until the angularjs library is not loaded completeley.
try to work with the directive ng-include because it will only show the content after angularjs library is loaded and everything is compiled.
for example:
<html lang="en" ng-app="myApp">
<body ng-cloak ng-controller="YourController">
<div class="container">
<div ng-include="'templateWhichIsCompletelyCompiled.html'"></div>
</div>
</body>
</html>

AngularJS an Bootstrap tooltip with span

I have an Angular1.0.7 web application. I´m adding a Twitter Bootstrap 2 tooltip to an span tag, but the tooltip is displayed very narrow. This is not happening with many other tooltips I have in the application.
<span style="line-height: 45px" ng-show="controlSkipperType || createBoatPoliciesForm.skipperType.$error.validateSkipperType" class="text-error" ng-switch="skipperTypeError">
<span ng-switch-when="OPTIONAL_ERROR" style="position: relative; top: -15px; margin-left: 10px" class="pull-left">{{'SKIPPER_TYPE_OPTIONAL_ERROR' | translate}}.</span>
<span ng-switch="skipperTypeError" style="position: relative; top: -15px; margin-left: 10px">
<i ng-switch-when="OPTIONAL_ERROR" class="fa-icon-question-sign" tooltip="Text to show in the tooltip"></i>
See the picture:
Something like this:
div > div .popover-content {
min-width: 620px !important;
}

Display several sequences of events with possible line break in middle [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am a HTML / CSS newbie.
I need to do something like this:
My web page is receiving sequences of events dynamically and I would like to visualize them on in the page.
I would like one sequence of events to be in a box, with lots of slots, and each slot has the event id.
So if I have several sequences, then I will have several such boxes.
However, the length of a sequence is dynamic. And the web page's window might be adjusted by the users, so even for a sequence, if it is too long or the window is too narrow, I have to break the box into several lines.
the above is my drawing of the design.
The A, B, etc, are the sequence title, then the numbers are the ids.
ideally, the space of all events / sequences should be as compact as possible.
And if a box has to change line, then it should be half-borded to indicate the continuous.
How can I do that? using CSS 3?
And also the framework I am using is AngularJS to control the data / UI binding, even if I manage to handle this case, how to dynamically bind the data to adjust this requirement?
Thanks
Doing this in CSS is tricky, because you want a border between elements only if those elements are on the same line. CSS doesn't know anything about wrapping.
I've solved the problem by:
Adding a left border on all boxes
Adding a right border on the last box only.
Adding a -1px left margin on all boxes except the first.
Placing the boxes in a container with overflow: hidden.
Having the right border on the last box only solves the right-hand issue.
The -1px left margin solves the left-hand issue.
Snippet:
.sequences {
overflow: hidden;
}
.sequence > div {
border: 1px solid black;
border-right: none;
height: 50px;
float: left;
margin-bottom: 10px;
}
.sequence > div:last-of-type {
border-right: 1px solid black;
margin-right: 20px;
}
.sequence > div:not(:first-of-type) {
margin-left: -1px;
}
.yellow div {background: yellow; width: 100px;}
.green div {background: lightgreen; width: 80px;}
.blue div {background: lightblue; width: 120px;}
<div class="sequences">
<div class="sequence yellow">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="sequence green">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="sequence blue">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</div>
You can solve this using CSS by doing something like this.
I've given each sequence element a top, left and bottom border. T
This will give the illusion of a right border when the elements are floated next to eachother but when they're the last on that line it will brake of as per your request.
I also added a right border to the last div element and the last div in each section.
Fiddle
div{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float:left;
background: #eee;
border: 1px solid #000;
border-width: 1px 0 1px 1px;
margin-bottom: 10px;
}
div.last{margin-right: 5px;}
div.last,
div:last-child{border-right-width: 1px;}
<div class="seq-1">1</div>
<div class="seq-1">2</div>
<div class="seq-1">3</div>
<div class="seq-1">4</div>
<div class="seq-1 last">5</div>
<div class="seq-2">1</div>
<div class="seq-2">2</div>
<div class="seq-2 last">3</div>
Edit:
I just noticed you wan't the border to be 0px/blank on the last element and the first element each row. Now that is a bit trickier.
I'm not positive there's a good solution to solving that using css since your sequences seem to be dynamic.
Please correct me if I'm wrong, but I think you need to use javascript to manage this.
Edit 2: CSS and JQuery solution
I made a quick jquery solution that utilies my previously provided CSS code.
The jQuery script removes the left border if the elements left offset(within it's parent) is 0 and if the element is not the first element in each sequenc(first class added).
Fiddle
var containerOffset = $('.container').offset().left;
setBorderWidth();
$(window).resize(function(){
setBorderWidth();
});
function setBorderWidth(){
$('.block').each(function() {
var childOffset = $(this).offset().left;
if(childOffset - containerOffset == 0 && !$(this).hasClass('first'))
$(this).css("border-left-width", "0px");
else
$(this).css("border-left-width", "1px");
});
}
.container{width: 100%;}
.block{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float:left;
background: #eee;
border: 1px solid #000;
border-width: 1px 0 1px 1px;
margin-bottom: 10px;
}
.block.last{margin-right: 5px;}
.block.last,
.block:last-child{border-right-width: 1px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
<div class="seq-1 block first">1</div>
<div class="seq-1 block">2</div>
<div class="seq-1 block">3</div>
<div class="seq-1 block">4</div>
<div class="seq-1 block last">5</div>
<div class="seq-2 block first">1</div>
<div class="seq-2 block">2</div>
<div class="seq-2 block last">3</div>
</div>
What I would recommend is to have 3 CSS classes
1) beginning of sequence
2) middle of sequence
3) end of sequence
then display different borders using:
.beginning-of-seq {
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
}
for instance.
about the angular part just use ng-repeat="seq in sequences" for instance and then render the sequence with the classes you created so it will look good (of course you need the scope to have the sequences)
<span ng-repeat="seq in sequences">
<span class="beginning-of-seq"> {{seq.title}} </span>
<span class="middle-of-seq ng-repeat="elem in seq.otherElements">{{elem}}</span>
<span class="end-of-seq"> {{seq.lastElem}} </span>
</span>
</span>
this is a bit crude and i don't know how you implemented it but it should give you an idea where to start
This HTML/CSS should do the trick. As you mentioned about the user having different resolutions, I've used percentages for the widths (depending on your scenario, media queries may be needed).
.container {
width: 30%; /*Change this to fit your design*/
}
.seq {
display: inline;
border: 0.1em solid #000;
margin-right: 1em;
}
.seq .item {
display: inline-block;
width: 5%; /*Change this to fit your design*/
margin-bottom: 1em;
}
.seq .item:not(:last-child) {
border-right: 0.1em solid #000;
}
<div class="container">
<div class="seq">
<div class="item item-title">A</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="seq">
<div class="item item-title">B</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<div class="seq">
<div class="item item-title">C</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="seq">
<div class="item item-title">D</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
About the AngularJS binding:
In your controller define your array of sequences and some functions to manipulate the sequences:
$scope.sequences = [];
$scope.addSequence = function(sequenceName){
var newSequence = { name : sequenceName, events: [] };
$scope.sequences.push(newSequence);
};
$scope.addEventToSequence = function(sequenceName, event){
var sequence = getSequence(sequenceName); // write this function to get the right sequence from the array
sequence.events.push(event);
}
Now in your html loop over the sequences and events using ng-repeat
<ul>
<li ng-repeat="sequence in sequences">
<ul>
<li>{{sequence.name}}</li>
<li ng-repeat="event in sequence.event">{{event.name}}</li>
</ul>
</li>
</ul>

Aligning divs horizontally using CSS display:

I am trying to align two divs horizontally. My list in the 2nd div is horizontally aligned, but the two divs fail to align horizontally as inline-blocks. Any help would be greatly appreciated.
Here is the CSS and HTML code:
CSS
#wrapper {
margin:0 auto;
width:100%;
position:relative;
}
.navit {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
display:inline;
}
.container-logo {
display:inline-block;
}
.container-user {
display:inline-block;
}
#user-nav-container ul li {
display:inline;
}
#user-nav-container ul li a {
background-color:#000000;
color:#FFF;
font-size:14px;
}
#user-nav-container ul {
list-style-type:none;
background-color:#000000;
}
HTML
<html>
<body>
<div id="wrapper">
<header id="top">
<div id="navbar" class="navit">
<div id="logo-container" class="container-logo"><a href="http://www.site.com/" id="logo">
<h1>ServiceMyResume.com</h1>
</a></div>
<div id="user-nav-container" class="container-user">
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</div>
</div>
</header>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/8TfzJ/
Get rid of:
#user-nav-container ul li {
display:inline;
}
This is what is causing your nav elements to be horizontal instead of vertical.
http://jsfiddle.net/8TfzJ/1/
Update
To vertiacaly align the two elements add vertial-align top to them, see: http://jsfiddle.net/8TfzJ/2/.
Note in the fiddle I've added a border so you can see the elements are vertially aligned. You may need to adjust margins and padding of the contained elements to fully achieve what you are looking for. Use Firebug for Firefox to help you here. You can inpect an experiment with the CSS in the borwser.
In a modern browser you should see:
See this article for some inf on the drawbacks of inline-block and how to over come them:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, you shouldn't put block elements e.g. h1 inside inline elements e.g. a. It should be the other way around. Try validating it here: http://validator.w3.org/#validate_by_input+with_options
I know it is not as inline-blocks, but you you mean something like this JSFiddle?
#navbar:after
{
display: table;
content: "";
clear: both;
}
#logo-container,
#user-nav-container
{
float: left;
}

Resources