How am i able to increase the height(thickness) of a vaadin progressbar- 7.6.3. And also how can i display the values which are progressed. For example in the middle of a progressbar showing how much is done and how much is remaining. I have tried with the following code but it is always the default size.
_progress.setWidth("100%");
_progress.setHeight("100%");
and also i tired using css, something like,
_progress.setCaption(" ");
_progress.setCaptionAsHtml(true);
_progress.addstylename("progress");
where ".progress" i have defined in my .css with
.progress1 {
color: black;
text-align: right;
font-size: 2em;
font-weight: bold;
height: 100%;
}
Instead of defining a style just for your progress bar, you have to include the wrapper to your style rule.
.v-progressbar-fat .v-progressbar-wrapper {
height: 20px;
}
If you add this to your style sheet and apply the style name "fat" to your progress bar, it's height will be changed to 20px (Or whatever amount you wish)
Related
I wrote a Google Chrome extension, which popups a dialog with an autocomplete field and it's own style, but there are some sites where my CSS gets totally broken, which doesn't look very nice.
I know about isolating styles with iFrames, but in Google Chrome extension there is no way to isolate my HTML and CSS in this way. Another method is to wrap all my stuff into a separated div with it's own id and relative styles for that id, and I do so, but it seems that it doesn't work on some sites with "hard" tags style overloading or "!important" directives in the CSS code.
So, I want to know is there any way to really isolate my styles in z convenient way or it's my bad carma to overload every little CSS property to fix one or another style issue for each site?
By the way: I set up my manifest to load all the things at the "document_end", but I see it's not being applied to the stylesheets which is every time loaded whenever the DOM is ready.
At the time of asking the question, your only option was to either use iframes, or stylesheets with a very high specificity and explicitly set all properties that might affect styles. The last method is very cumbersome, because there will always be some property that is overlooked by you. Consequently, the only usable method for isolating stylesheets was to use iframes.
The solution to this problem -isolation of styles without iframes- is Shadow DOM (since Chrome 25). You can find a tutorial at HTML5 Rocks. For a real-world Chrome extension that uses Shadow DOM to isolate styles, see Display #Anchors (source code here).
As I've recently gone through the gauntlet of this issue, I want to share some information I think is valuable.
First, Rob W's answer is correct. Shadow DOM is the correct solution to this problem. However, in my case not only did I need CSS isolation, I also needed JavaScript events. For example, what happens if the user clicks a button that lives within the isolated HTML? This gets really ugly with just Shadow DOM, but we have another Web Components technology, Custom Elements, to the rescue. Except that as of this writing there is a bug in chrome that prevents custom element in chrome extensions. See my questions here and here and the bug here.
So where does that leave us? I believe the best solution today is IFrames, which is what I went with. The article shahalpk linked is great but it only describes part of the process. Here's how I did it:
First, create an html file and js file for your isolated widget. Everything inside these files will run in an isolated environment in an iframe. Be sure to source your js file from the html file.
//iframe.js
var button = document.querySelector('.my-button');
button.addEventListener('click', function() {
// do useful things
});
//iframe.html
<style>
/* css */
</style>
<button class='my-button'>Hi there</button>
<script src='iframe.js'></script>
Next, inside your content script create an iframe element in javascript. You need to do it in javascript because you have to use chrome.extension.getURL in order to grab your iframe html file:
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);
And that's it.
One thing to keep in mind: If you need to communicated between the iframe and the rest of the content script, you need to chrome.runtime.sendMessage() to the background page, and then chrome.tabs.sendMessage from the background page back to the tab. They can't communicate directly.
EDIT: I wrote a blog post detailing everything I learned through my process, including a complete example chrome extension and lots of links to different information:
https://apitman.com/3/#chrome-extension-content-script-stylesheet-isolation
In case my blog goes down, here's the sources to the original post:
Blog post
Example source
Either use all
.some-selector {
all: initial;
}
.some-selector * {
all: unset;
}
or use Shadow DOM
Library
function Widget(nodeName, appendTo){
this.outer = document.createElement(nodeName || 'DIV');
this.outer.className = 'extension-widget-' + chrome.runtime.id;
this.inner = this.outer.createShadowRoot();
(appendTo || document.body).appendChild(this.outer);
}
Widget.prototype.show = function(){
this.outer.style.display = 'block';
return this;
};
Widget.prototype.hide = function(){
this.outer.style.display = 'none';
return this;
};
Usage
var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';
You can access the widget contents via myWidget.inner and the outer via myWidget.outer.
Styles
/*
* Reset Widget Wrapper Element
*/
.extension-widget-__MSG_##extension_id__ {
background: none;
border: none;
bottom: auto;
box-shadow: none;
color: black;
cursor: auto;
display: inline;
float: none;
font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
left: auto;
letter-spacing: 0;
line-height: 100%;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
padding: 0;
position: static;
right: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
vertical-align: baseline;
white-space: normal;
width: auto;
z-index: 2147483648;
}
/*
* Add your own styles here
* but always prefix them with:
*
* .extension-widget-__MSG_##extension_id__
*
*/
.extension-widget-__MSG_##extension_id__{
position: fixed;
top: 100px;
margin: 0 auto;
left: 0;
right: 0;
width: 500px;
}
.extension-widget-__MSG_##extension_id__::shadow h1 {
display: block;
margin: 0 auto;
padding: 20px;
background-color: yellow;
border: 10px solid green;
font-size: 20px;
text-align: center;
}
I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.
Take creating a dialog for example. After installing Boundary, you can do this in your content script
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// some js after button is clicked.
});
Elements within #yourDialogID will not be affected by the existing webpage. And find() function returns a regular jQuery DOM element so you can do whatever you want with it.
Hope this helps. Please let me know if you have any question.
https://github.com/liviavinci/Boundary
Use iframes. It's a workaround, but works fine.
Maxime has written an article on it.
I wrote a Google Chrome extension, which popups a dialog with an autocomplete field and it's own style, but there are some sites where my CSS gets totally broken, which doesn't look very nice.
I know about isolating styles with iFrames, but in Google Chrome extension there is no way to isolate my HTML and CSS in this way. Another method is to wrap all my stuff into a separated div with it's own id and relative styles for that id, and I do so, but it seems that it doesn't work on some sites with "hard" tags style overloading or "!important" directives in the CSS code.
So, I want to know is there any way to really isolate my styles in z convenient way or it's my bad carma to overload every little CSS property to fix one or another style issue for each site?
By the way: I set up my manifest to load all the things at the "document_end", but I see it's not being applied to the stylesheets which is every time loaded whenever the DOM is ready.
At the time of asking the question, your only option was to either use iframes, or stylesheets with a very high specificity and explicitly set all properties that might affect styles. The last method is very cumbersome, because there will always be some property that is overlooked by you. Consequently, the only usable method for isolating stylesheets was to use iframes.
The solution to this problem -isolation of styles without iframes- is Shadow DOM (since Chrome 25). You can find a tutorial at HTML5 Rocks. For a real-world Chrome extension that uses Shadow DOM to isolate styles, see Display #Anchors (source code here).
As I've recently gone through the gauntlet of this issue, I want to share some information I think is valuable.
First, Rob W's answer is correct. Shadow DOM is the correct solution to this problem. However, in my case not only did I need CSS isolation, I also needed JavaScript events. For example, what happens if the user clicks a button that lives within the isolated HTML? This gets really ugly with just Shadow DOM, but we have another Web Components technology, Custom Elements, to the rescue. Except that as of this writing there is a bug in chrome that prevents custom element in chrome extensions. See my questions here and here and the bug here.
So where does that leave us? I believe the best solution today is IFrames, which is what I went with. The article shahalpk linked is great but it only describes part of the process. Here's how I did it:
First, create an html file and js file for your isolated widget. Everything inside these files will run in an isolated environment in an iframe. Be sure to source your js file from the html file.
//iframe.js
var button = document.querySelector('.my-button');
button.addEventListener('click', function() {
// do useful things
});
//iframe.html
<style>
/* css */
</style>
<button class='my-button'>Hi there</button>
<script src='iframe.js'></script>
Next, inside your content script create an iframe element in javascript. You need to do it in javascript because you have to use chrome.extension.getURL in order to grab your iframe html file:
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);
And that's it.
One thing to keep in mind: If you need to communicated between the iframe and the rest of the content script, you need to chrome.runtime.sendMessage() to the background page, and then chrome.tabs.sendMessage from the background page back to the tab. They can't communicate directly.
EDIT: I wrote a blog post detailing everything I learned through my process, including a complete example chrome extension and lots of links to different information:
https://apitman.com/3/#chrome-extension-content-script-stylesheet-isolation
In case my blog goes down, here's the sources to the original post:
Blog post
Example source
Either use all
.some-selector {
all: initial;
}
.some-selector * {
all: unset;
}
or use Shadow DOM
Library
function Widget(nodeName, appendTo){
this.outer = document.createElement(nodeName || 'DIV');
this.outer.className = 'extension-widget-' + chrome.runtime.id;
this.inner = this.outer.createShadowRoot();
(appendTo || document.body).appendChild(this.outer);
}
Widget.prototype.show = function(){
this.outer.style.display = 'block';
return this;
};
Widget.prototype.hide = function(){
this.outer.style.display = 'none';
return this;
};
Usage
var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';
You can access the widget contents via myWidget.inner and the outer via myWidget.outer.
Styles
/*
* Reset Widget Wrapper Element
*/
.extension-widget-__MSG_##extension_id__ {
background: none;
border: none;
bottom: auto;
box-shadow: none;
color: black;
cursor: auto;
display: inline;
float: none;
font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
left: auto;
letter-spacing: 0;
line-height: 100%;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
padding: 0;
position: static;
right: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
vertical-align: baseline;
white-space: normal;
width: auto;
z-index: 2147483648;
}
/*
* Add your own styles here
* but always prefix them with:
*
* .extension-widget-__MSG_##extension_id__
*
*/
.extension-widget-__MSG_##extension_id__{
position: fixed;
top: 100px;
margin: 0 auto;
left: 0;
right: 0;
width: 500px;
}
.extension-widget-__MSG_##extension_id__::shadow h1 {
display: block;
margin: 0 auto;
padding: 20px;
background-color: yellow;
border: 10px solid green;
font-size: 20px;
text-align: center;
}
I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.
Take creating a dialog for example. After installing Boundary, you can do this in your content script
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// some js after button is clicked.
});
Elements within #yourDialogID will not be affected by the existing webpage. And find() function returns a regular jQuery DOM element so you can do whatever you want with it.
Hope this helps. Please let me know if you have any question.
https://github.com/liviavinci/Boundary
Use iframes. It's a workaround, but works fine.
Maxime has written an article on it.
How can I make Gnome's top bar font weight bold?
I found source for gnome-shell.css on GitLab that describes #panel as the UI to target.
I've tried both of these CSS properties on the panel:
#panel {
font-weight: bold;
/*font-weight: 700;*/
}
Nothing seems to change though. If I set background-color: red, that background change is reflected, so I know my CSS file is working at least.
Here is screenshot of the top bar UI I'm trying to change:
The method described by #andy.holmes seemed to do the trick. Use #panel StLabel for font-weight and use stage for font-family.
This CSS is working:
#panel StLabel {
font-weight: 500;
font-size: 13px;
}
stage {
font-family: "Inter", sans-serif;
}
I have a customized theme under ~/.themes/MyTheme/gnome-shell/gnome-shell.css.
It works for me under Debian 10. You may also try modifying /usr/share/themes/YOUR-THEME/gnome-shell/gnome-shell.css,
stage needs to be used for CSS selector.
stage {
font-family: Carlito, Ubuntu, Cantarell, Sans-Serif;
font-weight: bold;
font-size: 10pt;
color: #fafafa;
}
Situation
I'm currently building a site and desire to have some elements create a border/outline upon hovering the mouse over them. This is simple enough to make work. For reference, please see the staging site at Stagin area link. I'm using the grid part of the latest bootstrap and the box-sizing model.
Issue
I find that upon hovering, the content below that which is being hovered gets "pushed" far down below the next element. Using the stagin area as reference, I can change the behaviour through CSS to fix this on the left hand side or the right hand side but, not both at the same time.
Code
Here is a snippet of the CSS I use to make the effect:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
}
Using this method, anything but the first element behaves as expected. If I try this next snippet, the first element works but, then the others break:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
margin-top: -6px;
}
For the sake of clarification with regard to properties inherited, I have set the margin/padding on the elements in question to '0 !important' for standard behaviour until hover
Problem
How can I stop the element below from being pushed?
Personally - I go with something along the lines of:
.hover-border {
border: 3px solid transparent;
display: block;
}
.hover-border:hover {
border: 3px solid #3A3A3A;
}
The best solution to these issues is to use the box-sizing:border box property
* {box-sizing:border-box;}
Then elements will retain whatever size you define but it will now INCLUDE borders and padding.
Another solution with less code:
.hover-border:hover{
box-shadow: inset 0 0 0 3px #3a3a3a;
}
Try This will work.
.hover-border {
border: 3px solid transparent;
display: block;
}
.hover-border:hover{
border: 3px solid #3a3a3a;
}
Or
a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}
Borders are tough to work with when sizing is important. I found it much better to use box-shadow, which just alters the background, so takes up no size.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a
This will work:
.hover-border:hover {
outline: solid 4px #78CF82;
}
"Because the outline property is not a part of the element's dimensions; the element's total width and height is not affected by the width of the outline."
Is it possible to change body style when entering a full page preview in ckeditor 3. Maybe to set a different body style for full page than when it is not in a full page mode.
The reason for this is using ckeditor when viewing a web page on a larger screen with maximized browser... in that case it is very wide and it is hard to read the content. So I would like to add in body style (but only for full page mode) something like:
...
margin: 5%;
padding: 5%;
border: 1px dotted #666;
...
... that will give more text processor look to the content.
TNX!
When CKEditor is toggled to fullscreen mode it adds "cke_maximized" class to container span.
So you may apply styles for entire container span (body+toolbar) like:
.cke_maximized{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
or just for content body:
.cke_maximized iframe{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
Those are just examples and you may experiment and choose css selector that is more suitable for you .
UPDATE 1:
Sure, you can use javascript code if it is not enough for your purposes. You can use something like this:
var editor = CKEDITOR.instances.editor1;
editor.on("afterCommandExec", function(e){
if(e.data.name == 'maximize'){
// maximized
if(e.data.command.state == CKEDITOR.TRISTATE_ON){
// add special css class to body(e.editor.document.getBody())
} else {
// minimized
// remove special css from body
}
}
});