Since I have to use property container="body" ->
https://github.com/ng-bootstrap/ng-bootstrap/issues/1012
My dropdown is attached to the body(correct me if i'm wrong...).
So it means I can't inherit width from parent (ngbDropdown)-> ngbDropdownMenu.
How I can set the same width for dropdown menu and button??
NgbDropdown with width: inherit but without property container="body"
ngbDropdown with width: inherit but with property container="body"
So I need property container="body"
but still want to inherit width from button
I have the solution for this! It is a combination of a few techniques. I added some Typescript code that listens for the openChange event emitted by the Dropdown. At that time I grab the width of the hostElement which is the Dropdown's trigger. I use that to set the width of the .dropdown that was appended to body. Now, my CSS will work which sets .dropdown-menu width to 100%. Unfortunately this causes a brief flash where the user can see the dropdown at the normal width before it changes to 100% of the trigger's width. To fix that I use some CSS to control the opacity of the .dropdown-menu.
1) Hook the (openChange) event of ngbDropdown:
<div
ngbDropdown #dropdown="ngbDropdown" container="body"
#hostElement (openChange)="fixDropdownWidth(hostElement)">
I am using a Template Variable to grab a reference to the hostElement and I pass that element as a parameter to my function fixDropdownWidth() in my Component:
2) Fix function of Component:
fixDropdownWidth(hostElement: HTMLDivElement) {
setTimeout(() => {
let bodyDD: HTMLDivElement[] = <HTMLDivElement[]>Array.from(this._document.body.children).filter((child: HTMLDivElement) => child.className.indexOf('dropdown') >= 0);
if (bodyDD && bodyDD.length) {
this._renderer.setStyle(bodyDD[0], 'width', hostElement.clientWidth + 'px');
this._renderer.addClass(bodyDD[0].children[0], 'fixed');
}
}, 0);
}
I must use setTimeout() here because .dropdown is actually not yet added to DOM.
3) This is using Angular Renderer2 which needs to be injected to your constructor along with Angular #DOCUMENT:
constructor(#Inject(DOCUMENT) private _document: any, private _renderer: Renderer2) { }
You will need to add some imports to your Component for these:
import { Renderer2 } from '#angular/core';
import { DOCUMENT } from '#angular/common';
4) Final piece of the puzzle is the CSS which makes .dropdown-menu opacity 0 by default, until the width has been "fixed". See here also the min-width: 100% which is making the dropdown the same width as the trigger with CSS.
body > .dropdown > .dropdown-menu {
min-width: 100%;
opacity: 0;
transition: opacity 150ms ease-in-out;
&.fixed {
opacity: 1;
}
}
All together now, what happened?
We tapped into the openChange event emitted by ngbDropdown.
At that time we grabbed the hostElement's width and set the .dropdown-menu's container .dropdown to have the same width, that way our CSS rule of min-width: 100% will work
Because the dropdown-menu briefly flashes we turned the opacity to zero.
In our fix routine we set a class of "fixed" which reveals the dropdown with opacity: 1 after the width has been set correctly.
Final thing to mention is I added a Github issue for this:
https://github.com/ng-bootstrap/ng-bootstrap/issues/3523
Requested to have the ng-bootstrap framework set hostElement's width so we won't have to do this workaround.
Related
Basically, I'm creating a form component that is contained inside a v-dialog. The form component will have different child components that are rendered based on select input. So I have to set width of v-dialog to "unset", so that the width of the dialog will stretch to match its content.
The transition works when I toggle the value of width, eg: either 450px or 300px. The problem is that I don't know beforehand the width of the form contains in the dialog, so I definitely need to use dynamic width.
So far, I can not find anyways to achieve transition when using dynamic width. I was trying to get the width of the form component using refs, but setting width to unset, prevent the transition. By the way, the transition I'm talking about is the transition of the width, when using fixed width, it shows nice transition but not for dynamic width
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-dialog v-model="dialog" width="unset">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-select v-model="selectedForm" :items="items">
</v-select>
<div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
<div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text #click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false
};
}
});
codepen for using fixed width: https://codepen.io/duongthienlee/pen/MWaBLXm
codepen for using dynamic width: https://codepen.io/duongthienlee/pen/GRpBzmL
Noted that in the example i made in codepen, I defined width already, but the real case is that I don't know beforehand the width of form-a and form-b component. form-a and form-b width will be inherited by its parent div which is v-dialog, so that's why I set the width of v-dialog to be unset.
An example of what I mean "dynamic width": form-a has a select input. When user chooses an item, there will be a request to server to get input labels. So form-a will render multiple input fields based on the response body from server. The response body will contain label and default values information. So that makes the width of form-a becomes dynamic.
I think something like this can work for you.
Change v-dialog like so:
<v-dialog v-model="dialog" :width="forms.find(x => x.name===selectedForm).width">
Modify data() to return a forms prop:
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false,
forms: [
{
name: 'form-a',
width: 200
},
{
name: 'form-b',
width: 1000
}
]
};
}
What you want to do is get the size of the rendered form, and then apply it to the dialog.
This is a common theme when attempting to animate content with dynamic dimensions.
One way to do this is by:
Set the form's visibility as hidden
Wait for it to render
Get the form's width and set it to the dialog
Unset the form's visibility
The tricky/hacky part is that you have to properly await DOM (setTimeout) and Vue ($nextTick) recalculations. I didn't have to await for Vue's $nextTick in this example, but you probably will if you're rendering nested form components:
<div class="form-container">
<div :style="formStyle('form-a')" class='form-a' ref="form-a">FormA</div>
<div :style="formStyle('form-b')" class='form-b' ref="form-b">FormB</div>
</div>
computed:{
formStyle(){
return form => ({
visibility: this.selectedForm == form ? 'inherit' : 'hidden',
position: this.selectedForm == form ? 'inherit' : 'absolute'
})
}
},
methods: {
async onSelectChange(form){
// async request
await new Promise(resolve => setTimeout(resolve, 1000))
this.selectedForm = form
this.recalculate()
},
async recalculate(){
// wait for DOM to recalculate
await new Promise(resolve => setTimeout(resolve))
const formEl = this.$refs[this.selectedForm]
this.dialogWidth = formEl.clientWidth
this.dialogHeight = formEl.clientHeight
},
...
}
Here's the working code to give you an idea:
https://codepen.io/cuzox/pen/yLYwoQo
If I understand you correctly, then this can be done using css. You can try replace all the fix width in the form with
width: fit-content;
For example in you codepen:
.form-a {
width: fit-content;
height: 350px;
background: blue;
}
.form-b {
width: fit-content;
height: 500px;
background: red;
}
The v-dialog renders into a div with class v-dialog:
It seems the animation only works when the the width is of known value, so it cannot be just "unset". The solution would be to get the width of the child element, and set the width of the v-dialog accordingly with a variable.
See VueJS get Width of Div on how to get the width of the child element.
Let me know if it works, I find this is very interesting.
I'm creating a data tree where the child components are just new instances of the parent. When I hover over the folder name in the parent, I show edit and delete buttons. I want that same behavior when my folder is expanded to show the child components, but the hover does not work. I have tried disabling the view encapsulation and also the /deep/ approach in the css file, but I couldn't get either to work. I've also tried binding a css class and then passing it to the new instance, but again that didn't work.
library-tree.html (parent to Library)
<div id="scrollbar-style">
<div *ngFor="let media of libraries">
<library
[media]="media">
</library>
</div>
</div>
library.html (child of Library Tree)
<h4 class="category-name>{{media.name}}</h4> //hover here
<div class="edit-delete-btns"> //buttons that show on hover at the top level, but not in child Library components
<button name="media.id" (click)="onCategoryNameEdit()"></button>
<button name="media.id" (click)="onCategoryDelete(media.id)"></button>
</div>
<div *ngIf="libraryVisible">
<ul *ngIf="media.category">
<li *ngFor="let category of media.category">
<library [media]="category" [ngClass]="libraryCompClass" [libraryCompClass]="libraryComp"></library>
</li>
</ul>
</div>
Library.ts
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '#angular/core';
import { Media } from '../../../shared/models/media';
export class LibraryComponent implements OnInit {
#Input() libraryCompClass: string;
#Input() media: Media;
constructor() {}
}
library.scss
.edit-delete-btns {
display: none;
z-index: 102;
}
.category-name:hover ~ .edit-delete-btns {
display: inline-block; //this works in the top level to show the buttons
}
/deep/ div > ul > li > .libraryCompClass > .library > .category-name:hover ~ .edit-delete-btns {
display: inline-block; //my attempt at chaining classes to reach the deeper elements in the child component
}
.category-name {
z-index: 101;
}
.edit-delete-btns:hover {
display: inline-block;
}
Any ideas would be helpful, thanks!
Have you seen Angular 4.3 Now Available
Support for the emulated /deep/ CSS Selector (the Shadow-Piercing
descendant combinator aka >>>) has been deprecated to match browser
implementations and Chrome’s intent to remove. ::ng-deep has been
added to provide a temporary workaround for developers currently using
this feature.
Ironically I saw /deep/ in an Angular video today for the first time.
So it was very fresh in my mind. I Googled it and linked the author of the video this and this asking if it still worked.
He made me aware of the release notes..
Seems even ::ng-deep is on the way out
When using ng-hide or ng-show directives a .ng-class is added or removed so DOM elements are visible or not.
However they kinda get positional "removed" as for example, hiding or showing two continous div elements one on top of the other.
<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>
So, if condition1 evaluates to false first div will be hidden BUT second div will take the position which the just hidden div took.
How can I avoid that? I only want DOM elements to be invisible but not to get somehow removed.
First workaround.
I tried to overried .ng-hide class and getting a secondary class, only-hide, for elements on which I wanted this effect:
.ng-hide.only-hide {
visibility: hidden !important;
}
But didn't get results so far.
I achieved it with this second class approach by setting:
.ng-hide.only-hide {
visibility: hidden !important;
display: block !important;
}
As Angular sets .ng-hide with display:none, I make it invisible but present setting display:block.
To preserve and maintain the space occuped by the div you can't use directly ng-hide or ng-show.
You can use the ng-style directive as following:
<div ng-style="conditionHide1">First div</div>
<div ng-style="conditionHide2">Second div</div>
then your conditionHide1 and conditionHide2 should be like
if (condition1)
$scope.conditionHide1= {'visibility': 'hidden'}; // then div1 will hidden.
else
$scope.conditionHide1= {'visibility': 'visible'}; // then div1 will visible.
if (condition2)
$scope.conditionHide2= {'visibility': 'hidden'}; // then div2 will hidden.
else
$scope.conditionHide2= {'visibility': 'visible'}; // then div2 will visible.
You can change the visibility of the button by changing the $scope.conditionHide1 and $scope.conditionHide2 according to your conditions.
Solution2 by using a custom directive:
Create a new directive named condition and relative to an Attribute. Set-up a watch to watch the value of the attribute and, based on the value, set to the element (in this case the div) an appropriate css style. The value is mapped to the variable showDiv which change his value by clicking on the button. Clicking on the button, the value showDiv became the opposite !showDiv and the watch change the visibility from visible to hidden and vice-versa.
angular.module('MyModule', [])
.directive('condition', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.condition, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
.controller('MyController', function($scope) {
$scope.showDiv = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<div condition='showDiv'>Div visible/invisible</div>
<button ng-click='showDiv = !showDiv'>Hide div or show it</button>
</div>
I want to have a div that is set to transition in height when the button inside it has been clicked & transition back down when the button is clicked again.
It has a child div that has a delayed transition in height after the button has been clicked. I've tried it with hover but how can I accomplish that with the click event?
Also, after both divs are at their full height, how can I make the child div transition back down before the parent div does?
If you can do it with :hover, and want to do it with a click event, use the selector :active - its the proper CSS selector for click events.
If you want it to change actions based on a button click, you might have to use javascript, as I don't know any way to do this with pure css. I've included code in a fiddle I found and modified for you.
JS Fiddle demo
$(document).ready(function() {
var $dscr = $('.description'),
$switch = $('.toggle-link'),
$initHeight = 40; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggle(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 600);
$switch.html("<button>-</button>");
}, function() {
$dscr.animate({ height: $initHeight}, 600);
$switch.html("<button>+</button>");
});
});
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}