Does anybody have a simple effective solution to fix a footer menu to the bottom of a viewport window? Absolute positioning appears to work in all but Iphone.
I thought that their should be a simple jquery or jquery touch script out there to do this, but I'm yet to find one!
Any advice greatfully received!
Cheers
Paul
Paul, you can achieve this by adding a footer with fixed-positioning, see
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/bars-fixed.html
Just create a navbar within the footer for a menu, see
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
or alternatively
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-footers.html
Does this work. it grafts in win/safari...
http://jsfiddle.net/biznuge/stsfX/3/
good luck!
Related
For some reason my react-tooltip tooltips are not the same as everybody else's. I'm guessing some of my css is probably interfering with the tooltips but I can't figure out what it is.
this is what it looks like:
As you can see the 'arrow' part of the tooltip is not smooth and has a weird rugged effect.
When I try my code in the demo sandbox it does not look like this
Any help as to what could be causing this is very welcome!
Okay so the problem was that multiple "ReactTooltip" components were being loaded and were stacking on top of eachother... so make sure you only have one ReactTooltip being rendered!
I am new to React. Basically, I have been given a HTML Bootstrap template. It is pretty simple... a left sidebar (always present), an adjacent menu (always present) and all other components fit adjacent to side bar and under menu. I have attached a pic so you can easily see what I mean.
I can display the components but my dynamic components or the components that change are rendered below the sidebar and NOT next to it.
I have tried to solve this issue for days... no luck. Help would be greatly appreciated.
Thank you
Vincent
It seems like a css issue, make sure you have your child divs inside the parent and nothing is position absolute. if you have it online I can take a look.
I'm trying to have a simple bar in which I will put a logo, and below, a drawer. The problem is when I open the drawer, the simple bar moves with it. Besides, I can see the logo text is hidden by drawer.
I've tried to add zIndex to the simpleBar but it doesn't work. I'm really not familiar with react and material ui so don't see how to fix my problem.
Here's my codesandbox https://codesandbox.io/embed/sharp-browser-lsolr?fontsize=14 , if anyone can help.
I'm sorry, when clicking on my codesandbox, you'll see an error I don't get 'cause my code comes from material-ui and I don't see what the problem is.. Just click on the cross to close it.
Many thanks in advance !
Try this: https://codesandbox.io/s/sad-matsumoto-c84r8
The SimpleAppBar component was removed, and the MiniDrawer component which already has an AppBar has been modified so that everything looks right and you can put your logo where you want it.
I want to allow only one scroll type at a time (vertical or horizontal) with ionic scroll component. I tried "locking" attribute at ion-scroll element but no luck. When I drag diagonally it happen like the following image.
Please help me if you know a way to solve this. Thanks in advance.
Sample Code - http://play.ionic.io/app/720567016712
<ion-content class="padding" overflow-scroll='false' locking="true" direction="xy" has-bouncing="false">
use this , Don't use ion-scroll now , remove it .. It will work as you want
Hope this helps you .. thanks
You can do it by using locking ="true"
and mention height and width for that ionic
Just wanted to find out, to change the height of Foundation 5's Top Bar Navigation, what is the correct way to do it without it breaking on mobile?
Adding any sort of padding or height works only for desktop but on mobile views it breaks the navigation.
Thanks for the help.
Nick
The safest way will be using Sass version and modifying the line with // $topbar-height: rem-calc(45); in _settings.scss (don't forget to uncomment it)
Just add some lines of styles in your app.css
.top-bar, .title-area{height:46px; line-height:46px}
.top-bar-section li:not(.has-form) a:not(.button){padding:16px 22px;
.top-bar-section .has-dropdown > a{padding-right:22px!important;}
And you are done.