what i'm trying to do is a panel inside a panel without padding.
when i write in the developer-mode
.sapUiPanelCont
{
padding. 0px !important;
}
my panel has no padding anymore. that's exactly what i need.
how to override this class with an own name? so others panel got the normal sapUiPanelCont and when i add this class to my control, everything is working like charms.
i've added my styleClass like shown below:
control.addStyleClass("exampleClass");
Your CSS selector has to be more specific than the default .sapUiPanelCont one.
The most specific selector 'wins'.
So you could try to use the selector .sapUiPanelCont.exampleClass and omit the !important flag:
.sapUiPanelCont.exampleClass
{
padding: 0px;
}
You can add the style to a new .css file and reference it in your component metadata/descriptor. See Table 4 of documentation.
...
"sap.ui5": {
"resources":{ //relative urls inside component
"css": [{
"uri": "myStyles.css"
}]
},
...
With that the myStyles.css will be added to the html document once as soon as your component is loaded.
Alternatively, if you are using XMLViews, you can inline the styles into the view:
<mvc:View controllerName="whatever" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:style>
.sapUiPanelCont.exampleClass
{
padding: 0px;
}
</html:style>
<Panel class="exampleClass" text="Outer Panel">
<Panel text="Inner Panel">
</Panel>
</Panel>
</mvc:View>
Related
Now working.
I have a working Chrome Extension that will give me an injected stylesheet on the webpage I want but there are some styles I can not seem to overwrite.
For example, looking at the current Google home page I can inspect the empty area below and see there is no background color set. In the Styles section, if I click the "New Style Rule" button, (large plus sign) it gives me the correct (location?) for the rule ".o3j99.qarstb" when I copy the rule and add it as is to the CSS file it works. I get the injected stylesheet section added to the Styles and the color changes.
.o3j99.qarstb {
background-color: aqua;
}
I can also add this to the CSS and change the "About" and "Store" text size at the top left.
body, input, button {
font-size: 27px !important;
}
I'm trying to do something similar to another webpage but it's CSS or styles are more complex and it's hard to figure out if an injected stylesheet will even work. They do work when I make the change in place in the existing rule.
Here is the existing style rule:
.quixote .qx-grid .editor_grid tbody .input-group input {
width: 100% !important;
}
I added it to the styles.CSS file like this but it seems to be ignored as I can't find an injected stylesheet for it.
.quixote .qx-grid .editor_grid tbody .input-group input {
width: 900px !important;
}
This is the popup.js file. (Adding "allFrames: true" to the end of the insertCSS target got it working.)
$(document).ready(function() {
$('.reset').click(function() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
/*alert("Button Reset");*/
chrome.scripting.removeCSS({
target: { tabId: activeTab.id },
files: ["styles.css"]
});
/*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "reset"});*/
});
})
$('.format').click(function() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
/*alert("Button Wider");*/
chrome.scripting.insertCSS({
target: { tabId: activeTab.id, allFrames: true },
files: ["styles.css"]
});
/*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "wider"});*/
});
/*alert("Hello");*/
})
})
This is the content.js file. (Not sure why this was added but same code in the popup.js works even with all this commented out.)
/*var copy = $('body').clone()
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if( request.buttonclicked === "reset" ) {
$('body').html($(copy))
}
if( request.buttonclicked === "wider" ) {
chrome.scripting.insertCSS({
target: { tabId: tabId },
files: ["styles.css"]
});
}
})*/
This is the element the above rules are in.
<input class="form-control required" type="text" name="_obj__TIMESHEETITEMS_0_-_obj__PROJECTID" id="_obj__TIMESHEETITEMS_0_-_obj__PROJECTID" autocomplete="off" size="28" placeholder="Project" tabindex="0" style="min-width: 110px;">
It's a secure site so I can't post a link. Here is an example of the Table, I'd like to widen the first two columns.
Here is a pic of the inspect page, showing the element and two rules that I can manually change but can't with the CSS file.
What the "Stylus" extension adds and that works.
How can I add separate CSS for one page in Angular?
This is the CSS I need, as per How to remove the URL from the printing page?:
#media print{
#page{
margin:0;
}
body{
margin:30px;
}
}
But putting CSS into the component with ::ng-deep or ViewEncapsulation.None won't help here, because when navigating away from a page, the CSS of the page isn't deleted.
I've added a Stackblitz, which explains the problem clearly.
I've come up with a potential solution, but it doesn't work:
encapsulation: ViewEncapsulation.None
...
constructor(private renderer: Renderer2) {
this.renderer.addClass(document.body, 'special-print');
}
ngOnDestroy() {
this.renderer.removeClass(document.body, 'special-print');
}
....
....
....
#media print{
#page{
margin:0;
}
body.special-print{
margin:30px;
}
}
Why it doesn't work:
While it would help with <body> CSS, it won't help with #page CSS. Perhaps the question would be better summarized as "How to add global CSS, but remove it when we leave the page?".
Solved!
We print the <style> block directly into the component's HTML, and therefore when the component gets removed, our <style> block gets removed too. (Normally this wouldn't work, but thanks to DomSanitizer.bypassSecurityTrustHtml, Angular won't break our code when running optimizations.)
Here's a StackBlitz.
First, create a new component to handle the work:
component.ts: (This is all we need. We don't need an HTML or style.css file.)
//Inside your local component, place this HTML
//<app-local-css [style]="'body{background:green !important;}'"></app-local-css>
// OR
//<app-local-css [scriptURL]="'/path/to/file.css'"></app-local-css>
#Component({
selector: "app-local-css",
template: '<span style="display:none" [innerHTML]="this.safeString"></span>'
})
export class LocalCSSComponent implements OnInit {
constructor(protected sanitizer: DomSanitizer) {}
#Input() scriptURL?: string;
#Input() style?: string;
safeString: SafeHtml;
ngOnInit() {
if (this.scriptURL) {
let string = '<link rel="stylesheet" type="text/css" href="' + this.scriptURL + '">';
this.safeString = this.sanitizer.bypassSecurityTrustHtml(string);
} else if (this.style) {
let string = '<style type="text/css">' + this.style + "</style>";
this.safeString = this.sanitizer.bypassSecurityTrustHtml(string);
}
}
}
And then use it like this:
mySample.component.html:
<app-local-css [style]="'body{background:green !important;}'"></app-local-css>
// OR
<app-local-css [scriptURL]="'/path/to/file.css'"></app-local-css>
Angular is doing client-side rendering, which is bad news, because you do not have separate pages. You have several possible solutions though:
1. Separate page
You can create another page with or without Angular, which includes the CSS you need and load that page. In the most simplistic approach to achieve this, the other page would have a different URL. If having a different URL is not to your liking, then you could hide your page's content and show the other page inside an iframe. It would admittedly be a hacky solution, but it is a solution.
2. Client-side CSS rendering
Instead of just loading the CSS, you could have a component which would control global CSS rules, matched by your view's name. You would have a template value rendered to a property, like:
#media print{
#page{
margin:0;
}
body{
margin:30px;
}
}
And when you visit the page where this needs to be activated, you would simply initialize a property with a style HTML element that was generated based on the template and added to head. Once you leave the given view, your component would detect that event and would remove() that element. If you choose this solution, then it would be wise to make sure that you are supporting this on more general terms, so that if some new views will have their custom global CSS, then they would be easy to integrate into your project in the future.
3. body classes
You could add/remove some custom-print or whatever class to/from body whenever the style is to be changed. This way you could add the CSS exactly once to your HTML and change the rules accordingly, like:
body.custom-print {
margin: 30px;
}
This would be a neat solution, but the problem in your case is that you have a #page rule as well and I'm not sure how you could make that dependant on body classes or some other HTML attributes. I would conduct quite a few experiments about this if I were you.
4. Iframe staging
You could avoid having that CSS in your main page, but would have a hidden iframe where you would have the CSS and would just copy the content into the CSS and once that's loaded, print that.
Don't change the whole body from apple. Instead, there are a few changes to make.
In the app component, hold a boolean for whether or not you are on apple, and use ngClass for class defined in scss.
Track which route you are on in appComponent, and set isApple accordingly
Add a div around all your html, for container to take full size
Add global html, body setting height to 100% so you see color everywhere
Remove body overriding in apple
so,
appComponent.ts:
isApple: Boolean;
constructor(router: Router) {
router.events.subscribe(v => {
if (v instanceof NavigationEnd) {
this.isApple = v.url === "/apple";
}
});
}
appComponent.html:
<div [ngClass]="{'red':isApple}" class="container">
<p>
There are two components: Apple and Banana. Switching between them will show
the problem.
</p>
<router-outlet></router-outlet>
</div>
appComponent.scss
.red {
background-color: red;
}
.container {
height: 100%;
}
apple.component.scss (remove body)
/*Sample "global" CSS, that affects something outside the current component.*/
::ng-deep {
#media print {
#page {
margin: 0;
}
}
}
styles.scss (global)
html, body {
height: 100%;
}
You can see this altogether at this Stackblitz link
You can add different css files in the component (for instance, app-task.component.ts):
#Component({
selector: 'app-task',
templateUrl: './app-task.component.html',
styleUrls: ['./app-task.component.scss', './styles2.scss', './styles3.scss']
})
In this example, the style files are in the same folder that the component, but this is not the best option: you have to put the files in assets, for example. Also, be careful with the thread of the styles, since the first one you put will be put before the second (obviously).
<InputCheckbox class="input-checkbox100" id="ckb1" style="background: #918f8f;" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
however when the component is rendered, the color that is being displayed is from the class (input-checkbox100). I am trying to override it for this 1 specific element (so not trying to add it to the CSS).
You can use style tag in your blazor component and override your css class
for example :
#page "/"
<style>
.input-checkbox100{
background: #918f8f;
}
</style>
Give a name to your class here i set ForInput:
<InputCheckbox class="input-checkbox100 ForInput" id="ckb1" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
then go to wwwroot go to css and then open app.css and add ForInput in your css with your desire background.
.ForInput{
background: #918f8f;
}
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
So I want all buttons on my site to look the same and I need to edit a CSS file for them.
I was just wondering how you can access the css style of all controls named -asp:button.
Ie. Button { Font-size: 10px; } or #Button { Font-size: 10px; }
So far this is not working.
Most newer browsers support Attribute Selectors, so you could do something like
input[type="submit"] {
//styles here
}
You'll get better all around support by applying a class though as others have suggested.
ASP.NET Button controls render as:
<input type="submit">
You will need to give them a css class name that you can control in your css file.
In server side code:
myButton.CssClass = "myClass"
OR in ASPX markup:
<asp:Button CssClass="myClass" runat="server" ... />
CSS:
.myClass { width: 100px }
Edit having seen your comment:
To modify all buttons across the site you need to use Javascript, the jQuery library is extremely effective at this. If you were using jQuery you would just have this script on your Master page:
$(document).ready(function()
{
// Select all "input" controls with the type of "submit" and add your class to them
$(input[type="submit"]).addClass('myClass');
});
You can inclue CSS class in your asp:button code to give them a class and control their style:
<asp:button CssClass="mybuttons" />
Then you can use this class to style those buttons:
.mybuttons{
font-size:10px;
}
If you had more buttons that are not ASP.NET generated then this class only applies to buttons that are ASP.NET generated not others.
In .NET you need to provide a CSS class for your buttons. If you call it "Button1" for example, your CSS declaration would be:
.Button1 {
...
}
An ASP button is rendered in HTML as an INPUT of type="submit"... you can access all the buttons by using INPUT, but of course there are other INPUTS as well...
input {
font-weight: bold;
font-size: larger;
background-color: Red;
}