I am using the built in canvas widget (javadoc) and wondering how to make it take the full browser window.
I tried setting 100% width and height and removing all padding and margins, for body,html and canvas.
I have 3 problems:
1. I checked with chrome's dev tools and the clean.css seems to override myproject.css
2. Even after those css rules and removing the margin on the body in the dev tools, there is still a vertical scrollbar.
3. I struggle a bit with the fact that the canvas coordinate space is independent of actual pixel size. The mause events give me pixel location. Is there a way to get events in coordinate space "pixels"?
After another 4 hours of fiddling I found the answer, and decided to share:
1. I saw that the way i used to load css was deprecated so i used client bundle
2. This was my main problem, solved by explicitly disabling scrollbars
Window.enableScrolling(false);
3. setting just the coordinate space will automatically adjust pixel size to it.
So basically for a full window canvas: 100% width and height and 0px margin in css for html and body. Adjusting coordinate space to client size in the on resize event and explicitly disabling scorllbars.
Related
Been using ImageResizer quite effectively on my projects but just ran into an issue.
I have an img element that can have it's src change frequently but I always have the same dimensions of width and height to resize, along with the anchor=middleleft.
However, I don't want to upscale, so sometimes an image that is too small will be placed there and it won't anchor as desired.
Does anyone know a way to allow the anchor to still work when the image is too small to resize it? Or am I just going to have to have a fallback of css left alignment?
Try scale=canvas. This ensures the returned image is exactly the requested size, and adds padding as required.
This "just another blurry icons issue" is starting to give me serious headaches, that's why I decided to ask for some help here. And believe me, I have already read all the 'blurry icons' articles on the web.
The image below shows what's happening with the font icons on github.com when you resize the browser width, switching between odd and even values.
But the problem comes from somewhere else, it comes from some parent element (.container) which centers itself using margin-left/right properties set to 'auto'.
All the icons are properly grid-aligned, they all have font-smoothing: antialised, and the SVG font is already moved in front of the .ttf one. So no, it's not one of these problems. It's strictly related to how the browsers render the font icons when you have a parent container center aligned by using margin auto.
Any ideas how to fix this without changing the margin property of the self-centering parent container?
Struggling with the same issue myself. At least in my case, it seems to be caused by the icon glyph's horizontal position ending up at a sub-pixel value (e.g. at 99.5px instead of 100px). This can be caused by a lot of different situations, such as horizontal centering (as in your case).
Unfortunately, I'm not aware of a workaround other than adjusting the icon's horizontal position case-by-case, e.g. by applying a sub-pixel margin that adjusts the icon's position back into the pixel grid (e.g. margin-left: 0.25px).
I am creating a sprite via photoshop and have run out of canvas width .However when i try to increase the canvas width all the positions of the icons in the css seem to go off . I am using the relative increase method .
How do i only increase the height without affecting the css positions of the current layers ?
Although this has nothing to do with programming (SO is about programming issues)
You need to click the top-left box from the anchor section of the canvas size, so that the expansion happens only on the right and bottom. This way the positioning of the current contents does not get altered..
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!
Have a look at the homepage: http://benjaminpotter.org/clients/c3carlingford/ now if you make the browser fill the screen like I do (1680x1050) the footer seems to gain an extra hundred or so pxls? Here is my proof:
Normal View:
When I make my browser size bigger:
Its really odd - I need to work this one out.
When you have a look on an IPad its even worse.
Ideas?
Your footer isn't actually becoming larger. If you check out firebug and inspect the element, it is still 100px. Your browser is actually allowing you to scroll past the end of your page, and since your footer's position is relative to your page, it stops when your content does.
You may want to try out a "Sticky Footer" solution... one can be found here: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
This extra space is not footer (that size doesn't change), but whole html/body, but unfortunately I don't have more precise idea. Error still occurs after disabling JS, so it's not the cause.
The weirdest thing is that it seems to be connected with state of window (is it maximalised or not).
Looks like the height of that #wrapper ends up being around 1354 px. Whenever your screen extends past that height, you get the extra space. Using chrome dev tools, change the background color to something highly visible (I chose red) and then set the #wrapper height to 1500 px or more while you have your screen size maximized. You can see that you are no longer able to scroll down past the bottom of the div as the height of the div is > the available screen resolution height.
I'd take a look at <span id="followme">. In the CSS (style.css), #followme is set to have a height of 100%. If you zoom way out in Chrome, inspect the #followme element, and change your browser size you'll notice that the followme element is actually covering up a lot of the page.
It may not be the only factor you need to look at, but seems to be the most likely culprit when examining it.