Prnt screen of the problem
Hi there, I need some advice. As you can see in the image, I have iframe on my website (width 220px) and space within the box is not fully used. I can see margin on the right side (red arrows), where the scroll bar is.
I need to stretch out the content into the full width of the box. (Delete the space between the arrows)
Can I do something about that? Is that a FB bug?
THX for advices.
It looks like the word „labyrinth” would not really fit on the line where your arrows are – if so, then there’s no „bug” at all, it’s just automatic line breaking as is totally common in HTML displaying.
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
Can someone explain what the space colored in orange means?
Firstly, I considered it was margin spacing but than I saw that the margin actually equals zero.
Screenshot (Sorry, I can't yet post any pictures on Stackoverflow)
Thanks in advance.
I think it is still margin. Almost everywhere it is displayed correctly and Chrome itself says it is a margin. So I would say it is a margin with a rare bug in there.
The item you have highlighted - <p> - has no margin or padding which is why it is showing as zero in the diagram at the bottom. The orange area is actually the area of the container div 'hist'. If you highlight the containing element using the same tool you will probably find that it has some padding-right which is causing the empty space (or rather, filling it with padding so the text can't enter it), or your <p> has a maximum width set which is causing it to have the empty space, or wrap before it reaches the edge.
Some of the stakeholders on my project expressed doubt in easily recognizing hidden vertical content to scroll to in an MGWT ScrollPanel (without taking a swipe at it). As an attempt to address the concern I'd like to always show the pretty semi-transparent vertical scrollbar as both a hint of more content to scroll to and an indication of the ratio between the amount of displayed vs. all content in the panel.
Is it possible to keep the panel's scrollbars permanently displayed? At first I thought the setShowScrollBarY(boolean) would do the trick but quickly proved myself wrong.
P.S.: Shouldn't there be an m-gwt StackOverflow tag by now? AFAIKT MGWT has gained sufficient traction to have an MGWT-specific stream of questions.
I have had the same issues with clients that suggested that showing scrollbars would be a good idea. If you cut your content right its easy to see for the user that there is more content..
Anyhow I just added a setHideScrollBar(boolean) to the trunk. Download it from ( https://oss.sonatype.org/service/local/artifact/maven/redirect?r=snapshots&g=com.googlecode.mgwt&a=mgwt&e=jar&v=LATEST) and give it a try. Maybe we should also think of an option to flash the scrollbars once to indicate that there is more content.
By the way I would be supporting an mgwt specific tags as I do with the mailing list: https://groups.google.com/group/mgwt
Here is a screen shot to show exactly what I mean:
The green vertical line on the right image shows the space that appears when viewed on iPhone Safari. I don't think this has anything to do with Safari since I've seen other websites without that space. Is this something wrong with the css? If so, what's the problem?
The actual site is shown in the address bar of the image if viewing the site live helps.
Try changing the width of this div element to this...
#tweet-bar-content {
width: 970px;
}
I am trying to build an app similar to USAToday i.e. each "article" is a mix of images and text that the user scrolls vertically to read if it covers more than than the size of the screen. Scrolling horizontally brings up the next article and so on.
Each article should have "paging enabled" so that the content moves as if you are turning a page in a book whether you are moving vertically or horizontally.
I must have looked at every tutorial for Scroll and Page navigation, but I am drawing a blank. Any help is much appreciated.
BTW: I have down loaded this tutorial....
http://www.edumobile.org/iphone/iphone-programming-tutorials/pagecontrol-example-in-iphone/
... but (a) it builds ok but simulator only shows a featureless black screen, and I cannot work out how to correct it, and (b) it only scrolls horizontally.
The sample code that you reference is old so I think something has changed in the SDK since then. I was able to at least get the code to run by changing the MainWindow.xib file. I opened that file in Interface Builder and then selected the Window and then in the Window Attributes Inspector I ticked "Visible at Launch". Then the tutorial would at least run and show the colors. I think you might find that there are more issues with it though.
When you are wanting to page something, the real trick is setting the content size of the scroll view.
This StackOverflow question has some good information that might help you get going.