Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
Running into an issue mainly on iOS(surprise) My footer is a sticky footer, while it is working according to how a sticky footer works the problem is that content falls below the footer, mainly the image of the lady.
I've tried several workarounds from spanning the image into the background, combining it into the footer, different positioning and nothing seems to work. Maybe I'm overlooking something obvious here?
I replaced the original image. Move your browser vertically all the way in the fiddle and you will see the content fall below. Also I tried using position:fixed on .quote but that causes problems with the soft keyboard on iOS and Android.
FIDDLE: http://jsfiddle.net/6u5AJ/
.foot_c {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow-y:hidden;
margin: auto;
}
.footer {
background: #3c78bc;
position: relative;
text-align: center;
padding: 8px 0 5px;
text-align: center;
color: #FFFFFF;
z-index: 3;
}
.footerbg {
background: url(images/bgfoot.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 90px;
position: relative;
z-index: 1;
}
<div class="bg">
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="column">
<form id="myform" action="buttons.html" method="POST">
<input type="text" name="field1" placeholder="Enter your Zip"></input>
<input type="submit" value="Compare"></input>
</form>
</div>
<div class="quote">
<img src="images/quote_lady.png" alt="quote_lady">
</div>
</div>
<div class="foot_c">
<div class="footerbg">
</div>
<div class="footer">
<p>Your Guide to Auto Insurance Quotes!</p>
<div class="phone">
<img src="images/phone.png" alt="phone">
<h3><span>Call Now</span><strong>1-(999) 999-9999</strong></h3><br />
</div>
<br>Terms of Use | Privacy Policy
</div>
</div>
</div>
see if this helps,
For both version I change your HTML a little bit, remove the foot-bg, I didn`t understand why you had that, and merge your background options hex color with img url.
Check this fiddle to POSITION:RELATIVE
http://jsfiddle.net/luckmattos/6u5AJ/2/
Check this fiddle to POSITION:FIXED
http://jsfiddle.net/luckmattos/yXRS8/1/
On FIXED version I added a padding-bottom to the body make sure all content will appear:
padding-bottom:90px // = height of the footer
Let me kwnow!
The way I usually like to do this is by having the footer one of two children of a parent that has min-height:100 and position:relative. The first child of this is your content container and the second, obviously, is the footer. The content container is made to be 100% height of the parent and given a bottom padding large enough to keep it's content out of the footer which is absolutely positioned at the bottom of the parent.
Modified your example to show this. I didn't remove much of your CSS so it may not be clear where the changes are but basically the 'bg' div seemed to be your main container so I made that min-height: 100% (remembering to define 100% heights on all it's parents else it won't work) and then gave the 'container' div the 100% height and padding at the bottom big enough to show the footer.
Hope this is clear enough.
http://jsfiddle.net/jaredkhan/6u5AJ/3/
Related
I have tried two options in my AndroidManifest.xml
android:windowSoftInputMode="adjustResize" and android:windowSoftInputMode="adjustPan"
With adjust adjustResize it pushes up my background image so that it looks pretty rubbish. It also allows this weird white section if you scroll down. See the 2nd and 3rd image.
If I use adjustPan it looks great and fixes the problem but on devices with lower resolution inputs are hidden by the keyboard and users can't get to them as scrolling is not possible.
Ideally I want the background image to act like adjustPan but the inputs/other content to act like adjustResize.
Also is it possible to change this setting dynamically e.g. depending on which page you are one?
Edit added code:
<ion-content no-bounce has-bouncing="false" forceOverscroll="false">
<div class="content">
<div>
<ion-img src="./../../../assets/img/branding/logo.png"></ion-img>
</div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
<ion-grid>
<ion-row class="row-padding-one"></ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3" class="input-col">
<ion-item class="custom-item" lines="none">
<ion-input
class="login-input"
type="text"
formControlName="email"
[formControl]="loginForm.controls['email']"
placeholder="E-Mail"
required>
</ion-input>
<div *ngFor="let validation of loginValidationMessages.email">
<div class="error-message"
*ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
{{validation.message}}</div>
</div>
</ion-item>
...
.content {
width: 100%;
height: 100%;
padding: 0;
position: relative;
background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
background-size: cover !important;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left;
}
try to put background image for ion-content of that page.
This will solve the issue!
Your can do like this:
ion-content{
--background: url('../../assets/imgs/background-image.png') 0 0/100% 100% no-repeat;
}
it will resize your inputs and other content but your Image always will be 100%;
add your css to
.scroll-content {
padding-bottom:0!important;
}
this is known issue in
https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/19
for more info
https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/9
I am having an issue with a drop down menu, where the menu that drops down has a buggy line after each list item. They don't seem to be from any styles that I've added, and I've tried removing every thing I could think of that might be causing it. The lines look solid in the picture below, but you can see that the first one is not as dark as the others. When zooming in on the list, some of the lines disapear completely, which makes me think that it is some kind of android bug?
The nav itself is structured like so:
<nav>
<ul>
<li id="nav-button">
<div id="nav-click" class="closed"><span>Menu</span></div>
<ul class="sub-nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</li>
</ul>
</nav>
The styles that are set up all work great apart from on android. The css for the .sub-nav is this. There are a lot more styles for the rest of the menu but I've left them out as It is only this sub list that is giving me issue.
.sub-nav li {
float: left;
width: 100%;
text-align: center;
border: none;
padding: 0;
margin: 0;
display: block;
}
Remove the background from the <a> element and add the background to the <ul> element instead, there seems to be some strange sub-pixel gap between the <a> elements.
I've been trying to make a somewhat responsive layout for my website. But I'm late on the project and I've started it without one, which means my basic template has big flaws.
I'd like to know how can I make such template? I believe it would be really simple to make a template like this (in the picture) but I don't really know how as the divs seem to be moving as they wish, not as I command.
What I want from that picture is exactly what's written there. As the browser view port is smaller the divs should behave in the way I've exemplified in the image.
If anyway could point me out how to make such things I'd appreciate :)
Here is the link to the image: http://i.imgur.com/8n0TOlo.jpg
I'm the author of PocketGrid, a micro CSS grid for responsive layouts.
As Luca suggested, you can use PocketGrid to make your layout.
I did a JSFiddle for you : http://jsfiddle.net/arleray/5Mvph/
The HTML is really simple:
<div id="LAYOUT" class="block-group">
<div id="HEADER" class="block">
<div class="box">HEADER</div>
</div>
<div id="WORK_AREA" class="block-group">
<div id="LEFT_BAR" class="block">
<div class="box">LEFT_BAR</div>
</div>
<div id="CONTENT" class="block">
<div class="box">CONTENT</div>
</div>
</div>
<div id="TOOLBOX" class="block-group">
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
</div>
</div>
For your CSS, I suggest you to use the "mobile-first" strategy:
1 - Start with the "mobile" version (the smallest):
#LAYOUT { min-width: 800px; }
#HEADER { height: 30px; }
#WORK_AREA { width: 100%; }
#LEFT_BAR { width: 300px; }
#CONTENT {
overflow: hidden; /* Trick to fill the remaining space */
float: none;
width: auto;
}
#TOOLBOX {
min-width: 300px;
width: 100%;
}
2 - Then add media queries for larger versions (> 1100px) to only add changes from the mobile version:
#media (min-width: 1100px) {
#WORK_AREA { width: calc(100% - 300px); }
#TOOLBOX { width: 300px; }
}
For the fluid CONTENT width, I used the "overflow:hidden" trick to make it fill the remaining space of the WORK_AREA, after the LEFT_BAR.
Nevertheless, to make the WORK_AREA fluid with the fixed toolbar on the right, I could not use "overflow:hidden" (because it fills the remaining space on the right).
So I had to use the calc() function to compute the WORK_AREA width because of the right fixed-width toolbox.
Note: The calc() function is only compatible with Android 4.4+ (http://caniuse.com/calc) but it's the only mean (with pure CSS) to have a fluid WORK_AREA on the left of the right sidebar, because the TOOLBOX is declared after the WORK_AREA.
You may try using this calc() polyfill (in JS): https://github.com/CJKay/PolyCalc
To use the "overflow:hidden" trick instead of the calc() function, you should place your toolbox BEFORE the WORK_AREA, like in this other JSFiddle: http://jsfiddle.net/arleray/5Mvph/11/
For more information about PocketGrid, you can see many examples here: http://arnaudleray.github.io/pocketgrid/docs/
Hope this helps!
You can use media query in css refer media queries here or you can use framework like Bootstrap. This will help you to control divs based on devices sizes.
try bootstrap.It will make your life easy link is here.hope that helps
I suggest you another very very simple and minimalistic Grid system: PocketGrid. Only 1 KB minified. Loot at demos and description. ;-)
I am working on a mobile website have multiple input fields with background on the right, I have added the below css code for the same
.row input
{
width:100%;
padding:10px;
padding-right:30px;
font-size:18px;
background-repeat:no-repeat;
}
.row input.name
{
background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;
margin-right:10px;
border-bottom:1px solid #f0f0f0;
}
And the below HTML for the same
<div class="row last">
<input name="ccname" placeholder="Name on Card" validate="name" class="name validate" type="text" autocomplete="on"/>
</div>
On Native Android browser it looks repeated background for all input area.
Please let me know if I had mistaken somewhere.
I have noticed an error in your css
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
The background-position in your background CSS should only use left or right and then top or bottom values. There is one value too much.
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
i would like to know about these features to implement it in an html file in eclipse for Phonegap android.
MATCH PARENT / WRAP CONTENT
I did not know how to give MATCH PARENT / WRAP CONTENT, so i gave as the following 2 ways
<div id="container" style="width:315px height:150px">
OR WHEN I GIVE
<div id="container" >
the problem i am facing is when i don't give any width..this element is an image,it goes till the measurement ends / the maximum limit.
SPACE BETWEEN THE DIV ELEMENTS AND SPACE VISIBLE IN THE LEFT AND THE TOP OF EACH ELEMENT
WHEN I GIVE THE FOLLOWING,THERE IS A GAP TO THE LEFT AND TOP OF THE VIEW
<div id="wrapper" style="width: 100%; float: left; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
HORIZONTAL SCROLL VIEW
FOR horizontal scroll view i gave
div#main
{ //background-image:url('img/image1.png');
position:absolute;
top:40%;
margin-top:-50px;
}
when we scroll the image,the backgrounds too scrolls...But, whereas i want the image alone to scroll bot the background...
WHAT SHOULD I DO?
so,please help me for setting MATCH PARENT,WRAP CONTENT,AND HORIZONTAL SCROLL VIEW IN HTML()PREFERABLY??
edit:code after suggesrtions
<div id="wrapper" style="width: 100%; float: left;padding:0px; margin:0px;">
<div id="container" style="padding:0px; margin:0px;">
<div id="head" style="background-image:url(mdpi/purple_navigation.png);"></div>
<h1 style=" margin-left:0px; margin-top:0px; padding:0px; margin:0px;"> ABC</h1></div>
<div id="wrapper" style="padding:0px; margin:0px;">
<div id="images" style="padding:0px; margin:0px;">
<marquee direction="left" behavior="alternate" scrolldelay="3" width="100% padding:0px; margin:0px;"><img src="mdpi/banner1.png"/><img src="mdpi/banner2.png"/><img src="mdpi/banner3.png"/><img src="mdpi/banner4.png"/><img src="mdpi/banner5.png"/></marquee>
</div>
<div id="title" style="padding:0px; margin:0px;"><h1>title</h1></div>
<div id="desc" style="padding:0px; margin:0px;"><p>description </p></div>
</div>
</div>
</body>
before changes
after changes
HOW SHOULD I BRING THAT TEXT AT HEADER(ABC/TITLE) TO THE CENTER?
To center the text for the header, all you have to do is to add text-align:center; to that div.
Also, I have changed a couple of things in this fiddle.
Is this the result you want, just without the background colors?
The changes I made was that I moved the #description div and added styles to some of the other divs.
Let me know if you have any other issues or if this isn't working for
you.
Hope this is satisfactory :)