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.
Related
I have so many images in my page control that indicator dots are out of screen. Is there a way to align page control to left so that the dot related to first page will be visible on screen?
This is how it looks like now:
And this is what I want to achieve
I tried
imagesPageControl.contentMode = .Left
imagesPageControl.contentHorizontalAlignment = .Left
but without success. I have also tried to add some left constrain without right. I'm aware that on the right side page control will be still out of screen.
Scaling is an option if number of pages is constant or at least it has similar value. However, I ended up with manually adjusting the page control frame if it's width is greater than screen bounds.
I'm trying to have an image inside a div of same width to be draggable in the limit of the div. It's difficult to explain but one side of the image (top or bottom) can leave the div but you cannot have a gap between the edge of the image and the border of the div.
To resume the image has the same width of the parent div but its height is bigger so a part of the image is hidden.
Well here is what I want to do:
http://jsfiddle.net/maxwell2022/DerNa/165/
It's working perfectly... because there is nothing above the div. If there is a gap between the document and the div, it's not working anymore. I think Draggable is taking the document as reference for the top of the image. As soon as you start dragging the image, the image move and stuck its top edge to the top of the document:
http://jsfiddle.net/maxwell2022/DerNa/164/
I don't know how I can achieve this with the containment option.
Cheers,
Maxime
UPDATE
Another attempt with relative positioning but no luck: http://jsfiddle.net/maxwell2022/DerNa/166/
I found a solution to fix it getting the top position of the parent div using offset() and add it to the containment boundary. I'm not sure it's the best solution but it looks like it's working.
I just have a difference of 1% in the offset at the top which is quite annoying: if you drag the image and make it stick to the top as much as possible it returns 99% offset instead of 100% (see the result in the console).
The bottom one is correct (0%). I think it's due to rounding the size but I'm not sure.
Here is the jsfiddle: http://jsfiddle.net/maxwell2022/DerNa/167/
If you have a better idea please, please, let me know.
Thanks, Maxime
I have two divs, neither floated, and the bottom one has a negative margin on top (pulling it upwards). That bottom div is ‘covering’ some of the links in the div underneath. I need links to work in both divs, and z-index doesn’t seem to be working at all.
Again, neither div is floated, just the bottom div pulled up a bit with a negative margin on top and it’s ‘covering’ links in the div below it.
Any thoughts? Thanks!
The site in question is here: http://dawsondental.ca (see the footer)
So, I don't believe it's actually possible to allow links in both layered divs to work. I have the divs relatively positioned so that z-index works, but regardless, layered is layered. It's not possible to have useable content in layered divs. Right? If anyone knows anything I'm missing, I'm all ears.
Thanks
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 }
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.