I've created a menu for a mobile site, when you click the menu button the menu slides opend, this is the page;
The only problem is that in IE and Windows phone the menu is not the top-most element so slides behind objects.
I have tried to change the z-index, position type, hasLayout to no avail.
I would appreciate any assistance.
J
It looks like you might be dealing with a known bug:
“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.”
You can see the bug report on Quirksmode website and a workaround explained in this blog post.
Essentially what you have to do is wrap it in an element with higher Z-index, for example
Here is a quick sketch of a workaround:
<div style="position: relative; z-index: 3000">
<div style="position:absolute;z-index:1000;">
...
</div>
</div>
I regularly swap two layers, changing the z-Index from 0 to 1, and visa-versa. After years, it stopped working in IE. I changed the z-Index to 1 and 2. It now works fine. I think the bug has to do with a 0 z-Index.
Related
I tried to make a responsive card layout with even gap between each card , unfortunately bottom space not coming on card, but right side gap showing , can any one help how to achieve this scenario. below is my code
Html Code
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
<mat-card *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >
stack-blitz link
https://stackblitz.com/edit/card-responsive?file=app/card-overview-example.html
The problem seems to be the fxLayout="row wrap" functionality. the suggestion from the doc says to use fxLayoutGap="10px grid"but this works even less.
I have come up with this css3 which solved your problem. not very elegant, flex-layout-wise but this seem like a limitation
mat-card.mat-card {
margin-bottom: 10px;
}
I'm having problems with my fixed menu. As you can see of the example beneath it's not possible to click the links "Vingårde, Dyrkning..." because of the div box with the fixed menu on top of it. I've tried ordering the layers with z-index but I just can't get it to work. Can anybody help me out?
http://itu.dk/people/mbul/humlum/
And if anyone by the way have a method on auto adjusting the height of the page so it covers the whole viewport I would be very glad to hear from you :-) In the website version above I've set the height manually to 1000px which is not preferable
Thank you!
You need to put all the wrappers' elements outside of it and put them after the left-page container and before the right-page container. Finally, remove the wrapper, it seems unnecessary for the page in order to work.
I fixed it through Chrome's dev tools, but I assume it should work if you modify the html that way.
The body should look like this:
<div id="left_page_container">...</div>
<div class="nav_humlunvim">...</div>
<div class="nav_butik">...</div>
<div class="nav_blog">...</div>
<div class="nav_kontakt">...</div>
<div id="right_page_container">...</div>
Hope it helps; as an extra observation it is more common to use "hyphen-separated-names" for selectors than to use "snake_case_names" :)
I'm trying to get a bottom tab bar in Xpages Mobile controls. It's typically black with dark icons and the page changes has you press an icon.
I couldn't figure out how to get the look and feel with the actual Mobile Controls Tab bar. That seems geared for segmentedTabBar rather then I guess standard Tab bar. I tried to access Dojo manually with the code below and I got the look and feel but the tab bar is showing at the top and not the bottom of the screen.
I'd rather use the mobile controls version but regardless I'm easy. I'd love to get a bottom tab bar working in XPages.
Any advice would be appreciated.
<xe:singlePageApp id="singlePageApp1" selectedPageName="home">
<xe:appPage id="appPage1" pageName="home">
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/Add_32x32.png",
selected:true'>
Featured
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/1_48x48.png"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"Add_32x32.png"'>
Search
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Updates
</li>
</ul>
</xe:appPage></xe:singlePageApp></xp:view>
Look in the Extension Library book from IBM Press on page 295. This chapter on Tab Bar contains an example of an action bar at the bottom of the screen:
<xe:tabBar id="tabBar1">
<xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>
It appears only to be a segmented tab bar if you use barType="segmentedControl".
I am trying to accomplish the same thing myself. I suspect the issue is caused because the XPages Mobile Controls do not yet support a Mobile Scrollable Pane which would allow for the positioning of fixed size (scrollable) content between the header and the footer. The css will most likely used absolute positioning of the tab bar to prevent it scrolling with the content. But when that has been accomplished you are going to need to implement some form of scrollable pane t stop the main content from scrolling over/under the toolbar.
The following CSS works "most" of the time but I found it is sometimes reluctant to snap into the correct location.
.rpTabBar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
height: 50px;
margin-top: -50px;
clear: both;
}
After looking at the dojo examples I have noticed the examples of the navbar remaining fixed at the bottom use the scrollableView control. The XPages appPage control is based on the standard view control. All of those examples seem to have the navBar float at the base of the content. After trying for a few weeks, I can see why. It seems next to impossible to get the navBar to stick to the bottom when using this control.
We haven't found a way yet to implement scrollableView without throwing away all the Xpages mobile controls. Instead we created a div inside each appPage that implements the dojo scrollablePane. Using this we can provide control ids for a fixed header and a fixed footer. And the navBar now sticks nicely at the bottom of every page.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have div containing multiple divs and text. The inner divs are alternately floated left and right and the text flows along side them in all browsers (including IE8) except for IE7. In IE7 the text is pushed to the bottom so that it is aligned with the top of the final inner div. I have tried all sorts of solutions and have read a good article on the subject
However, I'm still unable to prevent the text from being cleared in IE7. Here's the relavent HTML (please note this div is nested within an HTML table with a specified width as it is a legacy site. I have tried pulling the div out of the table, but the same behaviour occurs anyway):
<div>
<div class="left"></div>
<div class="right"></div>
Text goes here
<br />
Text goes here
</div>
And CSS:
.left { float:left; }
.right { float: right;}
I have tried applying display:inline, display: inline-block, clear: none, overflow: hidden, specifying widths, position: relative to the containing div, various hacks such as IE7 conditional with zoom: 1, min-width: 1% - basically hours of pulling my hair out and dredging Google for answers but I haven't found anything that works. Has anyone encountered this problem before and got a fix for it?
(for testing i am running IE8 in compatability mode in Vista)
I am sure of the headaches that IE7 brings. Thank God that it is much better than IE6, but it was a headache for me in many situations.
In this case I recommend that you generate IE7 specific code using tables!