Can anyone help me out in creating a scrollable textarea which works on iPhone?
Want to do it using HTML, CSS and Javascript.
A textarea on the iPhone is scrollable by default but requires two fingers to be scrolled.
Related
my problem is that I have a lot of AbsolutePanels in GWT an they are drawn as if they were a TabLayoutPanel ( the GUI looks like a TabLayoutPanel, however, it is not one, it is made of a lot of AbsolutePanels ).
So, now I have the problem that as soon as a lot of tabs are opened they exceed the max. width of the AbsolutePanel and so they cannot be seen anymore nor can they be clicked or anything else.
So, is it somehow possible to add a ScrollBar to this AbsolutePanel in order to scroll back and forth?
I do not think it is a good idea to post any code because everything is being done programmatically. The only thing that I would need is an example of how to accomplish a scrollbar within an AbsolutePanel. This AbsolutePanel is of a fixed width!
Thank you very much for your help in advance.
Use CSS Overflow property.
You just need to set overflow: auto;.
It can be done programmatically:
panel.getElement().getStyle().setOverflow(Overflow.AUTO);
or with CSS style sheet:
.overflowAuto {
overflow: auto;
}
and
panel.addStyleName("overflowAuto");
Is it possible to make a carousel with text?? like this http://amazingcarousel.com/
Yeah you got carousel with text but the image there is set as background, I need the images to be set in img
Yeah for sure.
You can place everything in slide. You can define content slide as follows,
<div><!-- Any HTML Content Here --></div>
Reference: Define Slides Html Code
How can i disable horizontal scroll bar in gwt-richtextarea
I applied overflow-x:hidden and is working fine on firefox but not working on IE
RichTextArea uses an iframe to embed the editable html document.
When you set styles to the rich area, you are setting them to the iframe element, but in your case you have to set styles to the body element of the iframe #document.
The problem here is how to get the content document of the iframe, you have to use jsni, or use a 3party library like gwt-query.
This works with qQuery:
import static com.google.gwt.query.client.GQuery.*;
RichTextArea area = new RichTextArea();
RootPanel.get().add(area);
$(area).contents().find("body").css($$("overflow-x: hidden"));
Another issue is that the creation of the editable document in the iframe is delayed in gwt. So it is safer if you delay the setting of styles, using a Timer.
With gquery you can use the delay() method
$(area).delay(100,
lazy().contents().find("body").css($$("overflow-x: hidden")).done()
);
I've created a div that lays on top of the body with a higher z-index. When I try to scroll the content on the div it just scrolls the body content in the background. Can someone please explain this phenomenon? Thanks!
Use two-fingered scrolling to navigate divs with scrollbars on iOS devices.
[Update] Reference: http://support.apple.com/kb/ht1484
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.