I'm having an IE7 issue with a website i'm working on - www.mini-meals.co.uk
Basically, the background image is not showing on behind the form on the 'Free Trial'
panel, and is disappearing when I scroll down on the others.
I've tried adding position:relative; on a bunch of elements but it doesn't seem to
make a difference.
Any ideas anyone? thanks.
Add this style to your page to see if you are experiencing an issue with hasLayout:
.panel .panel-wrapper { zoom: 1; }
If this does correct your issue than a more "standard" way of correcting the background rendering would be to set an explicit width to those same ".panel-wrapper" items.
Related
I use Quill, and I use a scrollbar plug-in in it, but the original scrollbar of Quill still exists. That's no effect with overflow: hidden. How can I hide it?
Two overlapping scrollbars
It's pretty hard solve the issue without actually seeing the code but here's what worked for me.
.ql-container, .ql-editor{
height: auto;
}
That's it, now the quill scroll bar should disappear and in absence of a secondary scrollbar attached, the .ql-container should auto grow fitting the content.
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
Sencha Touch 2.4 has this new toast class(Ext.Toast), which looks nice. But, by default, the location of the toast is centered in the viewport. Is there any way I can push it towards the bottom?
I looked at the top config, but it doesn't work well. (Pushes it down, but it's not centered horizontally now).
Tried a combination of top and left configs, but it's not perfect. I don't seem to find any hints in the docs.
Basically, I need to display the toast around of 70% of the height, and it should be centered horizontally in the viewport.
Not ideal but the following css will do it. Just change the number depending on high high you want it.
.x-toast {
top: -150px;
}
I've created a plugin that can create toast messages similar to Android style at the bottom of the screen.
I've also faced this problem I found the solution.You can also find it by the below link.
sample toast with different position and animation
I am developing a web app using the iWebKit framework. I am trying to have the top bar fixed. So I tried using iScroll. I followed the instructions of iScroll but somehow it is messing up the iWebkit. I am not sure what I am doing wrong. Any help or thoughts?
You do not need iScroll anymore.
Use position:fixed on header.
Add overflow:scroll;-webkit-overflow-scrolling:touch to the content div
Give the content div a fixed height! 440px in portrait + a 40px top margin (top bar)
Do the same for the content div in landscape
I found many questions about this issue and i tried all of the solution i found (z-index to parent, relative position to parent, the corner plugin etc...), but nothing seems to help. Here is the demo:
http://visztpeter.me/Develop/index.html
Works in all browser, except IE7. Any idea?
Ok, i found a solution:
aside nav li{
z-index:1;
}
aside nav li.sfHover {
z-index:2;
}
So basicly i just need to add more z-index to the list element that has dropdown menu inside.