Is it possible to to specify the modal-dialog-centered class somehow? There is an windowClass option for the outer element, but I don't see a way to specify modal-dialog-centered on the inner element.
I'm just beginning with Angular and I know it's against it's principles but only way I found to achieve centering was specifying opener function in HTML template like this:
<button (click)="openModal(myModalTemplateId)" btn btn-secondary">
and define this nasty function inside component like this:
openModal(content) {
let x = this.modalService.open(content);
// change the padding value for your case or use some other styling
x._windowCmptRef._component._elRef.nativeElement.style = 'display: block; padding-top: 30%';
// you can try to use the code bellow to set the class but it's not working for me
// x._windowCmptRef._component._elRef.nativeElement.children[0].classList.add('modal-dialog-centered');
}
Related
I have a weird issue where when I add padding-left: 32px to an element, vertical space gets added. If the CSS says 0, and I add the space manually in Chrome debugger, the vertical space isn't there. This is only happening with nested components. I'm not sure if I'm misusing something or if I have found a bug.
I have code like this:
<cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
>Not Nested A</cai-setting-row
><cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
>Not Nested B</cai-setting-row
>
<cai-setting-row-account></cai-setting-row-account>
The render of cai-setting-row-account is just the same markup:
render() {
return html`<cai-setting-row
class="itemGroupMiddle doubleIndent"
data-type="A"
>Nested A</cai-setting-row
><cai-setting-row class="itemGroupMiddle doubleIndent" data-type="A"
>Nested B</cai-setting-row
>`;
}
It renders like this:
The "Not Nested" elements look right. The "Nested" ones have extra space and you can see a weird border on top that is the distance of the padding.
I have a functioning sandbox here:
https://studio.webcomponents.dev/edit/8u0cg76BNEiSoHXQT8by/
I misunderstood how class is used on a custom component. Doing <my-component class="foo"> adds foo to the :host. My code in sandbox needed to change the magic of const parentClass = this.getAttribute('class') ?? ''; to const parentClass = this.getAttribute('itemClass') ?? '';, such that I wouldn't accidentally be applying classes to the :host and the intended element.
How to customize the Semantic UI buttons(background-color, border-radius and all)
<button class="ui button create-new-menu-btn">Create New Menu</button>
. create-new-menu-btn {
border-radius: 0;
background-color: red;
}
The above code is not working
You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.
Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
For your particular problem:
One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:
Method 1
#bodyid .create-new-menu-btn {
//Properties
}
Another way is to simply add an id to the element you want to select
Method 2
#create-new-menu-btn {
}
Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)
Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)
You can also add semantic ui's classes before your own for specificity.
For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:
ui.button.create-new-menu-btn {
....
}
If using JSX, you can use inline styling for the targeted elements
Example:
<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>
#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;
}
It will target all button with ui class.
Hope It will be useful :)
Put .ui.button infront of your class name create-new-btn. It should look like below
.ui.button.create-new-btn {
//Your css code
}
Then in your html/jsx template you can use the class name create-new-btn like below:
<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>
I've read around a little bit and have a good start to what I ultimately want. This was helpful, along with another article which I forgot the link to. However, everything I've read ADDS a CSS class or property to an element. I want to CHANGE a property of an existing CSS class, but I don't know how to target it.
I think I want to use ng-class in one of these use cases taken from the Angular documentation:
If the expression evaluates to a string, the string should be one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
My existing code uses ng-class along with some controller logic.
HTML
<div ng-controller="ngToggle">
<div ng-class="{'inset-gray-border' : style}">
<div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div>
</div>
</div>
This currently adds the inset-gray-border class to the nested div, but I just want to change the border property in the subcontainer class.
Controller
angular.module('app').controller('ngToggle', ['$scope', function($scope) {
$scope.style = false;
$scope.toggleStyle = function() {
$scope.style = $scope.style === false ? true: false;
};
}]);
I considered using a directive, but I believe that would be overkill. I think this can be achieved in a controller.
EDIT: After further research I think jQLite can do the trick, but that would probably require a directive.
CHANGE a property of an existing CSS class
Add a css rule that does that using the new class you added using ng-class. The specificity will over ride the original rule
.subcontainer{
color : blue
}
.inset-gray-border .subcontainer{
color:red
}
Instead of a big toggleStyle function, you can write that stuff in UI side only.
Here is fiddle. As you want to change border property of .subcontainer, Overwrite that property by adding .insert-gray-border
<div ng-controller="ngToggle">
<div >
<div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div>
</div>
</div>
The benifit of this is , it uses local scope instead of controller scope.
The best bet would be to have two CSS classes defined, one for the base (untoggled) case, another with all the properties that you want for when the property is toggled on.
In this case you may want something like:
.container .subcontainer {}
.container .subcontainer-bordered { border: solid 1px #123456}
Then your HTML code be updated to reflect this structure
<div ng-controller="ngToggle">
<div class="container">
<div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div>
</div>
</div>
For example, you can change the ink colour in paper-tabs by changing --paper-tab-ink: var(--accent-color);. Is it possible to change the value of the CSS custom properties dynamically similar to how you can toggle a class or change the style in JS?
There are different ways to do this, but a simple answer is to use the Polymer.updateStyles() method after making your class changes.
For example, let's say your styles are:
<style>
.yellow x-example {
--light-primary-color: #fdd85f;
}
.red x-example {
--light-primary-color: red;
}
</style>
and you want to make the component use the styles in the .red class. You simply add it as you normally would in javascript, then be sure to also use this function to actually update it on the page.
<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()">
<x-example></x-example>
</div>
Yes, first get the object of your custom element. Then get the customStyle object. Add a style to that object. And then run element.updateStyles();
t.clickListener= function(e) {
var t = Polymer.dom(e).localTarget; //retarget if needed
t.customStyle['--the-color-etc'] = 'pink';
t.updateStyles(); // mandatory for the CSS variables shim
};
See the docs
I have div box which contains two items. One is under the other one. So when the lower item is hover I'd make it animated and slide it out of the top item.
<div id="main">
<div id="box"></div>
<div id="item"></div>
</div>
With my knowledge in CSS3 I could only make a transition for item to slide it out in hover. But I want it happen when #main is hover not #item.
Have a look at the them please.
http://jsfiddle.net/sL3Pw/
You are correct, there is no way currently to style a parent element of a child in pure CSS. You can use JavaScript as a way to achieve the desired effect.
(UPDATE)
You can achieve this in JavaScript by doing the following (DEMO: Fiddle)
JS
This should run onload or else it will not work.
// On Hover
document.getElementById('main').onmouseover = function () {
document.getElementById('item').classList.add("to-left"); // Add To Left Class
}
// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}
Please remember to change the IDs of the elements if needed.
CSS
Add this CSS class to your CSS
.to-left {
margin-left: 60px;
}
And your HTML stays the same. This should get what I believe your desired result is. Let me know if this works for you.