I have a webview that is picking up the background color in a css:
body {
color: var(--vscode-editor-foreground);
background-color: var(--vscode-editor-background);
}
Unfortunately, for "short" web pages, it's not expanding to cover the entire view port.
Is there something I can do to the html I'm including in the webview to expand it to fill the space? This obviously only happens on darker themes and light themes work fine - and doesn't happen with larger html files.
Turns out it was just another minor stylesheet issue:
html, body {
width: 100%;
height: 100%;
}
That fixed it right up. Thank you Mosh Feu for the answer.
Related
I 've tried to give css to scrollpanel in GWT. But its not working.
The problem is I want to change the foregroung and background colors and also the width of scrollers.
Is it possible? can any1 suggest?
Generally it is based on the browser user agent.
For example : For Chrome You need to do something like,
::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
Please refer this Link
GWT scrollbars are simply html ones, so you can style them in the same way you would do with plain html: using css.
Add a class to your ScrollPanel and set the styles in your .css files, or set styles to it using java methods.
But you have to be aware that styling scroll-bars is not a standard thing, webkit supports it via vendor-css-properties and the same with IE, but unfortunately you will not be able to style FF.
UPDATE:
As #Andrea suggest in the comment below, if you can change in your app ScrollPanel by CustomScrollPanel you have much more options to customize bars.
In this case you have to provide your own bars because by default it uses browser native ones. This response can help you.
Why is the like box bottom being cut when I set a custom height? It just cuts the faces and its lower part isn't shown.
How can i fix it?
Thanks
If I understand your correction properly, this would be because you're not setting the height of the contents of the box, but rather the box itself.
<div height="x">
doesn't care about what's in the div, it makes the div only show x amount of it.
I was having the same issue and added these to my CSS
.fb-like span {
height: auto !important;
}
.fb-like iframe {
position: relative !important;
}
I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.
I am making a Responsive site using the foundation framework and TinyMCE breaks the format when the page is scaled down(it's not responsive). How do I make TinyMCE responsive?
The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.
E.g., I use css similar to this:
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
width: 100% !important;
}
/* on large screens, I use a different layout, so 600px are sufficient */
#media only screen and (min-width: 600px) {
table.mceLayout, textarea.richEditor {
width: 600px !important;
}
}
See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/
Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.
There is a way to get the toolbars to wrap on smaller screens.
/* make the toolbar wrap */
.mceToolbar td {
display:table-row;
float: left;
}
.mceToolbar td:nth-of-type(11){
clear: left;
}
I made a fork of the fiddle that Johannes posted that includes the above rules:
http://jsfiddle.net/joshfeck/gMVSE/
Making the toolbar responsive for the latest version of TinyMCE:
.tox-toolbar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.tox-toolbar__group {
flex-wrap: nowrap !important;
}
This adds a horizontal scrollbar to the toolbar on mobile devices.
TinyMCE 5.1 was released with a new mobile responsive design.
To ensure it functions as intended, you need to add the following code to the head of your pages that are using TinyMCE.
<meta name="viewport" content="width=device-width, initial-scale=1">
More information here: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it
I'm using version 4 of TinyMCE, there is a plugin named autoresize. It makes the editor responsive.
Here is something I use on a site to make the editor resize and the toolbars moves with the size of the page :
.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}
.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
}
table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}
Using small toolbar, they are properly layed out as the editor width changes.
"theme_advanced_resizing" should be set to "false". Also, more work is needed to make it work with fullscreen.
Remove Width and height from the TINYMCE_DEFAULT_CONFIG.
then apply your styling normally.
i am using this in the CSS:
div.tox.tox-tinymce {
width: 200px !important;
}
I use !important because tinymce using inline styling for that div, use #media if necessary.
a cropped screenshot from firefox inspector
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;