I am building something with angular material. One of the pieces is to have some tabs, and stuff them with some useful information. Right now I am doing that, and populating one of the tabs with some directives in an ng-repeat. The only problem right now is the tabs are cutting off the elements, and I am unable to scroll downward.
Here is my html (slim)
md-content.md-padding
div.registered-events[layout="row" layout-align='space-between center' layout-wrap]
card-small.persona-card-result[object='e' ng-repeat='e in events()']
I can post my stuff about the styles of the elements in these tabs, but I don't think it's them that is causing the issue. I have tried the md-dynamic-height directive, adding relative to the parent and absolute to the children, etc, and still no luck.
Does anyone know how to add more height and make the md-tab-content scrollable?
fixed this by adding this to the parent element, and the tab's parent element. The tabs were further down the chain (grandchildren elements)
scss
.grandparent {
overflow: hidden;
.parent {
overflow-y: auto;
// tabs would've been here
}
}
Related
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
I am testing this in IE 11:
Codepen
I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working:
#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
height: 100%;
}
If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.
How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.
Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.
http://codepen.io/next1/pen/qZRpEB
I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:
When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.
I'm looking for this functionality:
Clicking anywhere except the menu should close the menu, not toggle it.
How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.
This actually fairly simple to solve with a little extra CSS and an added div.
Plunker Demo
The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.
The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:
MARKUP:
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.
Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.
You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.
I have a button in AngularJS. It's in a row of other buttons. How can I show and hide this button but still have it use space? I tried using ng-show but then when the button is hidden it uses no space and all the other buttons around it move.
In your CSS, target the element like this:
.my-element.ng-hide {
display: block!important;
visibility: hidden;
}
(You might want inline-block or something else for the display, the important part is to override the none default value of ng-hide)
You can then use ng-show="showMyElement" as an attribute as per usual