i have a template includes elements like following
<span class="arrow"></span>
style look like this :
.arrow{ width : 12px; }
inside directive
link : function($scope, element, attribute)
{
//get element width
}
in result i see width fn returns 0, why css classes not get applied? i added more elements into template, other elements css classes get not applied as well
Why can't you just use the width():
link: function($scope, element, attribute)
{
console.log( element.width() );
}
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I would like to extend the native button element but I am not sure how to add styling. In Google's example here they don't use a template so the fancy-button custom element itself is the button, rather than adding a template and shadow DOM containing a button element. It seems to defeat the object of extending a native element if I just add a button directly to the shadow DOM, but I don't know how to style and extend native element. How can I create a custom element which is simply the native button element extended to have a red background?
var style = `button { background-color: red; };
class FancyButton extends HTMLButtonElement {
constructor() {
super();
}
customElements.define('fancy-button', FancyButton, {extends: 'button'});
since you don't have shadowDOM involved you can use global CSS
you can set styles in the connectedCallback: this.style.background='red'
you can dynamically create a STYLE tag with unique identifier scoping your element
See JSFiddle for all 3 examples: https://jsfiddle.net/WebComponents/gohzwvL4/
Important is the notation for your Customized Built-In Element
Correct : <button is="fancy-button></button>
InCorrect: <fancy-button></fancy-button> (this is Autonomous Element notation)
.
Firefox pitfall:
The INcorrect notation works in Firefox , but not in Chrome & Opera
Firefox processes Extended Built-In Elements with Autonomous Element notation
but only for elements created in the DOM prior to definition:
This
<fancy-button>Hello Fancy Red Button #1</fancy-button>
<script>
class FancyButton extends HTMLButtonElement {
constructor() {
super();
}
connectedCallback() {
this.style.background = 'red';
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });
</script>
<fancy-button>Hello Fancy Red Button #2</fancy-button>
is displayed in Firefox as:
any number of Custom Elements before the SCRIPT tag are colored!
When the <SCRIPT> is moved into the <HEAD> Firefox won't color any background
When the script is executed after the onload event all buttons are colored
This is non-standard behaviour!
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>
Can I apply a CSS style to an AngularJS directive that has been defined as an element tag?
I have the following simple directive:
app.directive('popupHelp', function ($window) {
return {
restrict: 'A',
link: function (scope, elem, attrs, ctrl) {
elem.bind('click', function (e) {
$window.open('http://www.google.com', 'popupHelpWindow', 'width=500,height=500');
console.log("I'm going to get you help on: " + attrs.popupHelp);
});
// cleanup
scope.$on('$destroy', function () {
elem.unbind('click');
});
}
}
});
Which I call with the following:
<a popup-help="csshelp">GET ME HELP!</a>
Browsers do not give anchor tags a cursor: pointer style unless they have an href associated with them. I would like to fix this in my CSS and also have cursor: pointer applied when the popup-help directive is associated with the anchor.
I could just redefine the whole anchor:
a {
cursor: pointer;
}
... but I would prefer to tighten up the definition to only apply to what I'm really changing.
I could also redefine the directive to be a full element, but I would also like to avoid that for code styling reasons.
Can I create a CSS definition that captures a directive attribute?
If you don't want to define a class in the HTML markup you could also use
elem.addClass('foo')
To define a class in the directive itself.
If you really don't want to resort to classes you could do:
elem.css('cursor','pointer');
or
elem.attr('style','cursor: pointer');
Just add a class to your element and style it that way. It doesn't really matter whether or not your directive is used as an attribute or element.
<a class="foo" popup-help="csshelp">GET ME HELP!</a>
.foo {
border: 1px solid black;
}
I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.
This its structure:
<li class="post quote">
{other code}
</li>
The problem is that the class name has a space in it.
How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.
The problem is that the class name has a space in it.
This is not possible in CSS. What you are doing is giving the element two classes.
You can address them such:
.post.quote { .... }
but in your case, it's probably better to use a valid separator like
post_quote
This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:
// css
.post { ... } // elements with the post class
.quote { ... } // elements with the quote class
// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');
You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:
// css
.post.quote { ... } // elements with both the post and quote classes
// jQuery
var postAndQuoteLis = $('.post.quote');
This might work:
$('li').each(function() {
if($(this).attr('class').indexOf(" ")>-1) {
$(this).css('border','1px solid #ff0000')
}
}