In our application we have a text area with row size 20 .
Earlier when we were using the IE6 browser then the text area was displaying properly on screen but after switching over IE7 browser we have seen that after filling up 20 lines a active scroll bar start displaying with text area and only 19 lines are displaying in text area and 1 line is hiding in scroll bar and to check that 1 line we have to use the scroll bar. Please note that our text area's row size is 20 which means it should display 20 lines without active scrollbar which was happening in IE6 browser but not happening in IE7.
We are not sure whether anybody else have faced this kind of problem before.
Guys..as of now we have done some workaround by using bottom-padding to text area.....by doing this all the contents are dislaying properly in text area boxes but still the active scroll bar remains with the text area box.
let us know if you guys having any different solution.
Could you have a CSS rule somewhere setting the physical height of the textarea?
You might try applying the Overflow property to the CSS for the text area. Try overflow:auto; or overflow:hidden;. The last one will eliminate all scroll bars though. You could also try changing the border-width: thin;
I think you are using overflow:scroll, make it as overflow:auto.i checked it,it's working!
In spite of using row="20", try to use a fixed height for the textarea. And don't forget to put line-height. It will definitely solve this problem.
Related
I have a vaadin layout that works fine on a larger screen. As soon as the screen size (and the resolution) drop, all the contents get cut off and no scrollbar appears.
I tried using a Panel to remedy the issue, but the panel likewise gets cut off.
Panel panel = new Panel();
panel.setContent(horizontalSplit);
panel.setSizeFull();
panel.getContent().setSizeUndefined();
I also tried using
Responsive.makeResponsive(horizontalSplit)
but it still cuts off
Any suggestions?
If you set
panel.setSizeFull();
and
panel.getContent().setSizeUndefined();
then it is normally to content be cutt of on small screens.
Solution is to setSizeFull() on panel content too.
Add the following style in your styles.scss file
.overflow-auto{
overflow : auto;
}
Then set StyleName to your panel
panel.setStyleName("overflow-auto");
I have two column site current set up using wordpress but an having trouble figuring out how to fix the right side column so that it does not allow it to scroll over the right side on the iPad. On desktops the page behaves as it should, however on iOS the div is able to scroll over the nav bar. My problem is the right column needs to be able to scroll vertically, so if I give it a fixed position I loose that functionality. Here is the link http://www.adamheimer.com, thanks to anyone who can help me out!.
Not entirely certain about what you're after, but have you looked at overflow-y:scroll style? It allows you ensure an element is a certain height, and if the element exceeds that height, the user is able to scroll it.
The content on my screen is definitely able to fit into the given screen size, yet the app still shows scrollbars if the screen is shorter than a certain height.
This fiddle shows the issue, if you shrink the result pane to a certain height.
What I've tried:
Adding `overflow-y:hidden' to the body fixes this issue, but I want to be able to scroll in the y-direction if needed, just not when it's not needed.
How can I stop this scrolling when unnecessary?
The reason ended up being because of a rule in the jQueryMobile.css:
.ui-page, bla, bla{
min-height: 420px;
}
changing that to a smaller number that matches what I needed fixed the issue.
Try to limit the width of the buttons and content to no avail. Tried for 1 hour all the classes nothing seems to work..
I mean the space between the white buttons on the left and right side, towards the black. This space is about 10px But want to minimize it. anyone knows how?
.ui-page seems the way to go but also does not work.
Problem can be seen here.
As you can see in the fiddle, there's a bit of padding underneath the image in the left column. I'm really not sure how to get rid of this.
The column itself has padding:0 when I inspect the element in Chrome. The div has no padding in it and the image has no margins. Any ideas what this could be? I've attempted to manually set the margins/padding and I've made both the image and the column display:inline and block just to see what happens.
Ideally, the red background would only show up behind the text. I've tried to set the background only in the left column only to have the background stop at the bottom of the text. height:100% didn't fix that. I'm kind of expecting the bottom of the right column to look longer if I did that anyway.
At this point, I'm a little clueless as to where I can go from here, so would anyone have any ideas what this might be? and whether or not I could change it?
quick & dirty way to find a solution to your problem :)
try changing the css rule:
.ui-block-a { margin: 0 0 -5px 0 }