Objective:
I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.
The form looks like the following:
This is working fine when I simply scroll down on the form:
The Problem:
When I open the Angular Material dropdown, it overlaps over the Radio Button Section:
Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:
And here is the CSS for the 3 sections
//Header:
.module__header {
position: fixed;
top: 0px;
z-index: 1001;
display: flex;
height: 35px;
width: 100%;
background-color: #082749;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: stretch;
padding: 0;
margin-bottom: 0;
}
// Tab Section:
.mat-tab-label-container {
position: fixed;
top: 35px;
padding-top: 10px;
z-index: 1001;
width: 100%;
background: #fff;
}
// Radio Button Section:
.timaticFullTextView {
padding-top: 35px;
padding-left: 15px;
padding-bottom: 15px;
background: #fff;
z-index: 1001;
position: fixed;
width: 100%;
border-bottom: 1.5px solid gray;
}
I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.
How can I have the opened dropdown display underneath all 3 sections?
Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect
The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.
The code would have to look something like this:
<mat-tab>
<mat-tab-body> <!-- <-- added automatically -->
<div class="tab-header"></div>
<div class="tab-content"></div>
</mat-tab-body>
</mat-tab>
::ng-deep mat-tab-body {
z-index: unset !important;
}
.tab-header {
position: fixed;
z-index: 1001;
}
.tab-content {
position: relative;
z-index: 1;
}
You've found the right element whilst applying styles to the wrong one.
Here is how I made it work
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}
My client wants me to create a textarea inside where there has to be a button like the below picture:
Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.
This has to be work like this 2nd picture on-click (like drop down):
Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.
To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
top: 0;
right: 0;
}
<div class="textarea-container">
<textarea name="foo">Some content here...</textarea>
<button>Menu</button>
</div>
I'll leave the styling for you to finalise as required.
Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.
* {
box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
display: none;
}
#textarea_container {
position: relative;
display: inline-block;
}
#textarea_container label {
background: blue;
color: white;
padding: .2em;
position: absolute;
top: 0;
right: 0;
padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
position: absolute;
top: 0;
right: 0;
overflow-y: scroll;
max-height: 15em;
min-height: 12em;
min-width: 10em;
border-left: 1.4em solid blue;
z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
display: block;
}
textarea {
min-height: 15em;
min-width: 40em;
}
#textareamenu:checked ~ label {
position: absolute;
right: 8.6em;
top: 0;
width: 1.4em;
z-index: 100;
}
<div id="textarea_container">
<textarea name="text"></textarea>
<input type="checkbox" id="textareamenu">
<label for="textareamenu">{}</label>
<div id="textareamenu_content">
<ul>
<li>First_Name</li>
<li>Last_Name</li>
</ul>
</div>
</div>
Please see this fiddle I have set up.
You are first confronted by three links. Each link triggers divs to slide out.
The link 'john smith' slides out and in at the speed we want. When it slides out the first line slides out then when that is completed the second line slides down as though coming from the first. When it slides back it does the same motion at the same speed but reverse i.e.. the second line slide back up first and then when that is completed the first line slides back to the left.
When you click on the work link and menu slides out in the same manner as the bio. Also there is a sub menu that slides out when on clicks on item 2.
When the user clicks on the contact link one line slides out.
What we need to achieve is this; when any div is open and another link is clicked on, the visible div slides back in reverse to how they slid in. We have almost achieve this, however, the code is not quite right as the divs are not sliding back in at the same speed and in the right order, they simply slide back fast. For example, if one has clicked on 'work' and the 'item 2' link, and then you select 'contact' the opened div slide back very quickly. What I need to achieve is that they slide back in reverse to how they slid out.
To attempt to make it clear, if you click on 'work' and then 'item 2' so with menus are visible and then click on work again, you will see the sub menu slides away first before the first menu. You will also notice that the items that slide up slide back down first before the divs slide back to the left. This is what needs to happen if you click on 'contact' or 'john smith' when the menus are visible.
I know this sounds very complicated and if I can answer any questions to make it clearer I will.
Thanks
$('#bio-line-1').animate({width: 'hide'});
$('#contact-info').animate({right: 'hide'});
$('#bio-line-2').slideUp("fast");
$('#black-div, #black-credits, #igna-1-div, #igna-1-credits, #igna-2- div, #igna-2-credits, #fatal-div, #fatal-credits').fadeOut('100');
});
you can use .setTimeout() to put some delay
setTimeout(function () {
$('#contact-info').animate({right: 'toggle'});
}, 500);
DEMO
DEMO
I finally worked out how to fix it to work how I intended, however my code is very long winded. I realise there must be a way to reduce the repetition of the code by using generic functions. I will now post the working code onto Code Review for further development.
$('#menu').click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
});
Although I see that you have found your solution but as I had started coding the TweenMax version of it, I went on and finished it. The reason I am suggesting GSAP should be the go-to tool for animations for the web is not just because it is crazy fast, or easy to jump-start or get started with, or makes some of the coolest animation effects possible with few lines of code (I can go on and on) ... but it is as intuitive as it can get.
Coming back to your animation, I have converted your animation solution into using TimelineMax / TweenMax entirely, snippet of which is as follows:
/*global TweenMax,TimelineMax,Power2,Power0*/
var getElementById=document.getElementById.bind(document);
var nameA=getElementById('name-a'),menu=getElementById('menu'),contact=getElementById('contact');
var contactInfo=getElementById('contact-info'),contactInfoAnchor=contactInfo.querySelector('a');
var igna=getElementById('igna'),ignaAnchor=igna.querySelector('a');
var ignaOne=getElementById('igna-1'),ignaOneAnchor=ignaOne.querySelector('a');
var ignaTwo=getElementById('igna-2'),ignaTwoAnchor=ignaTwo.querySelector('a');
var black=getElementById('black'),blackAnchor=black.querySelector('a');
var fatal=getElementById('fatal'),fatalAnchor=fatal.querySelector('a');
var bioLineOne=getElementById('bio-line-1'),bioLineOneParagraph=bioLineOne.querySelector('p');
var bioLineTwo=getElementById('bio-line-2'),bioLineTwoParagraph=bioLineTwo.querySelector('p');
var tlName=getTimeline(),tlContact=getTimeline(),tlWork=getTimeline(),tlIgnaTwo=getTimeline(),tlWorkIgnaTwoCombined=getTimeline();
var isTlNameDirectionForward=false,isTlContactDirectionForward=false,isTlWorkDirectionForward=false,isTlIgnaTwoDirectionForward=false,reverseTimeScale=1;
var duration=.4,easeInOut=Power2.easeInOut,easeOut=Power2.easeOut,easeIn=Power2.easeIn,easeNone=Power0.easeNone;
function init(){
setTlName();
setTlContact();
setTlWork();
setTlIgnaTwo();
setTlWorkIgnaTwoCombined();
assignListeners();
}
function setTlName(){
addParentDIVsToTimeline(tlName,[bioLineOne,bioLineTwo],['rect(10px 633px 50px 0px)','rect(10px 633px 50px 0px)']);
tlName.fromTo(bioLineOneParagraph,duration,{x:-633},{x:0,ease:easeOut,clearProps:'x'},0).fromTo(bioLineTwoParagraph,duration,{y:-40},{y:0,ease:easeOut,clearProps:'y'},duration*.3);
}
function setTlContact(){
addParentDIVsToTimeline(tlContact,[contactInfo],['rect(0px 120px 20px 0px)']);
tlContact.fromTo(contactInfoAnchor,duration,{display:'block',x:150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0);
}
function setTlWork(){
var fromProps={display:'block',y:40},toProps={display:'block',y:0,ease:easeOut,clearProps:'display, y'};
addParentDIVsToTimeline(tlWork,[fatal,igna,black],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)','rect(0px 120px 26px 0px)']);
tlWork.fromTo(fatalAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaAnchor,duration,fromProps,toProps,duration*.3).fromTo(blackAnchor,duration,fromProps,toProps,duration*.6);
}
function setTlIgnaTwo(){
addParentDIVsToTimeline(tlIgnaTwo,[ignaTwo,ignaOne],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)']);
tlIgnaTwo.fromTo(ignaTwoAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaOneAnchor,duration,{display:'block',y:40},{display:'block',y:0,ease:easeOut,clearProps:'display, y'},duration*.3);
}
function setTlWorkIgnaTwoCombined(){
tlWorkIgnaTwoCombined.to(tlIgnaTwo,duration,{progress:0,ease:easeNone},0).to(tlWork,tlWork.totalDuration(),{progress:0,ease:easeNone},duration*.3);
}
function assignListeners(){
nameA.addEventListener('click',onNameAClicked,false);
menu.addEventListener('click',onMenuClicked,false);
contact.addEventListener('click',onContactClicked,false);
igna.addEventListener('click',onIgnaClicked,false);
ignaOneAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
ignaTwoAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
black.addEventListener('click',onMenuClicked,false);
fatal.addEventListener('click',onMenuClicked,false);
}
function onNameAClicked(){
isTlNameDirectionForward=!isTlNameDirectionForward;
isTlNameDirectionForward?tlName.timeScale(1).play():tlName.timeScale(1).reverse();
reverseTlContact();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onMenuClicked(){
isTlWorkDirectionForward=!isTlWorkDirectionForward;
isTlWorkDirectionForward?tlWork.timeScale(1).play():tlWork.timeScale(1).reverse();
reverseTlContact();
reverseTlName();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}
}
function onContactClicked(){
isTlContactDirectionForward=!isTlContactDirectionForward;
isTlContactDirectionForward?tlContact.timeScale(1).play():tlContact.timeScale(1).reverse();
reverseTlName();
if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onIgnaClicked(){
isTlIgnaTwoDirectionForward=!isTlIgnaTwoDirectionForward;
isTlIgnaTwoDirectionForward?tlIgnaTwo.timeScale(1).play():tlIgnaTwo.timeScale(1).reverse();
}
function addParentDIVsToTimeline(tl,parents,clipRects){
var length=parents.length;
for(var i=0;i<length;i+=1){tl.fromTo(parents[i],duration,{display:'none',clip:clipRects[i]},{display:'block',clip:clipRects[i],ease:easeOut,clearProps:'clip'},duration*.3*i);}
}
function getTimeline(){return new TimelineMax({paused:true});}
function reverseTlContact(){
if(isTlContactDirectionForward){
isTlContactDirectionForward=false;
tlContact.timeScale(reverseTimeScale).reverse();
}
}
function reverseTlName(){
if(isTlNameDirectionForward){
isTlNameDirectionForward=false;
tlName.timeScale(reverseTimeScale).reverse();
}
}
function reverseTlWork(){
isTlWorkDirectionForward=false;
tlWork.timeScale(reverseTimeScale).reverse();
}
function playTlWorkIgnaTwoCombined(){
isTlIgnaTwoDirectionForward=isTlWorkDirectionForward=false;
tlWork.pause(tlWork.totalTime());
tlIgnaTwo.pause(tlIgnaTwo.totalTime());
tlWorkIgnaTwoCombined.pause(0).play();
}
//
init();
#name-a {
left: 38px;
position: fixed;
top: 38px;
z-index: 1;
}
#bio-line-1 {
left: 150px;
position: fixed;
top: 35px;
width: 633px;
z-index: 1;
}
#bio-line-1 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#bio-line-2 {
left: 150px;
margin-top: 20px;
position: fixed;
top: 38px;
width: 633px;
z-index: 1;
}
#bio-line-2 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#menu {
bottom: 34px;
left: 38px;
position: fixed;
z-index: 4;
background-color: #ffffff;
}
#contact {
bottom: 34px;
position: fixed;
right: 38px;
z-index: 1;
background-color: #ffffff;
}
#contact-info {
bottom: 34px;
margin-right: 38px;
position: fixed;
right: 160px;
text-transform: lowercase;
white-space: nowrap;
}
.hidden {
display: none;
}
#fatal {
bottom: 34px;
float: right;
left: 135px;
margin-left: 36px;
position: fixed;
white-space: nowrap;
z-index: 1;
}
#black {
bottom: 61px;
float: right;
left: 171px;
margin-bottom: 18px;
position: fixed;
white-space: nowrap;
z-index: 1;
}
#igna {
bottom: 52px;
float: right;
left: 171px;
margin-bottom: 5px;
position: fixed;
white-space: nowrap;
width: 270px;
z-index: 1;
}
#igna-1 {
bottom: 72px;
left: 404px;
margin-bottom: 7px;
position: fixed;
white-space: nowrap;
width: 162px;
z-index: 1;
}
#igna-2 {
bottom: 57px;
left: 82px;
margin-left: 321px;
position: fixed;
white-space: nowrap;
width: 162px;
z-index: 1;
}
.sub-menu {
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div id="name-a">John Smith</div>
<div id="menu">Work</div>
<div id="contact">Contact</div>
<div class="hidden" id="contact-info">conatct#foo.com</div>
<div class="hidden hover" id="black">item 1</div>
<div class="hidden hover" id="igna">item 2</div>
<div class="hidden hover" id="fatal">item 3</div>
<div class="hidden hover" id="igna-1">S/S <span id="ss">15</span></div>
<div class="hidden hover" id="igna-2">A/W 14</div>
<div id="bio-line-1" class="hidden"><p>holds a Master's Degree from the University of the Arts London</p></div>
<div id="bio-line-2" class="hidden"><p>and currently works foo bar.</p></div>
Hope you find it all useful in some way.
Further reading:
Sequence JavaScript Animations Like a Pro with GSAP's
TimelineLite.
Understanding the Position Parameter.
P.S. The example above may not have done justice to the library. There may have been bugs in my code or the approach may seem overly complicated, but these shouldn't take away the credits from this GreenSock Animation Platform. Love this tool.
T
I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.
container item position: relative; z-index: 1;
dropdown-menu position: absolute; z-index: 10000;
I also did test btn-group with a higher z-index and it did not work.
Here is a working fiddle http://jsfiddle.net/sGem8/
You don't need to add z-index property.. Simply remove it and it will work..
i.e.
#container > li {
display: block;
border-radius: 3px;
position: relative;
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
Working Fiddle
I have faced the same issue.
Inside the main container which had all the nav-items, I had every outermost div items as position: relative
Only the dropdown menu had position: absolute
To make the dropdown appear above all items, add
.dropdown{
position: absolute;
z-index : 999; //some high value
}
and other items in the container have
.outer-divs{
position: relative;
z-index: 1; //some low value
}
If you still find your dropdown to behave not as expected,
try setting the div item that opens the dropdown when clicked to
.dropdown-container{
position :static;
}
Most people will find the last trick to be the most valuable.
Hope this helps.
Modify the below css in your styles
#container > li {
display: block;
border-radius: 3px;
position: relative;
/* z-index: 0; */
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
I'm not sure if what i want is possible but i'm using a Mootools image gallery which you can see an example of here:
</script>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
The gallery rotation is above but what i'd like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.
There's a lot of Javascript involved so i don't know what i should post here to enable people to help, but just let me know what i should put in here and i'll come back and edit.
Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i'd be much obliged.
Thanks in advance as always,
Dan
Try this css and see if its what your after.
.slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
top:40px;
color: #FFF;
text-indent: 0;
overflow: hidden;
padding: 10px 0 0 20px;
height: 70px;
}
.slideInfoZone h3{
background: #000;
width: 200px;
padding: 30px;
margin-left: -30px;
display:inline;
}
.slideInfoZone p {
position: absolute;
bottom: 0;
background: #FFF;
font-size: 14px;
color: #000;
margin: 20px 0 0 -20px;
padding: 10px 0 10px 20px;
width: 50%;
}
Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.