Well, i have one centered div used as a footer simply by: <div id="bottom-footer">Powered by Coolname</div> and the style:
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
And that renders ok in PC browser:
But when you tried on an iphone, its looks like this:
Clearly not centered, what im doing wrong?
looks like there is a margin or a padding on the containing body element or the div itself. Add this to your style sheet to reset the browsers natural behaviour:
html {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
}
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
margin:0px;
padding:0px;
}
Remove width:100%
#bottom-footer {
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
Related
I need round input in ionic and if possible to use Floating something like this in the image. Its very easy in Flutter but dont know how can i do this in ionic. Or if just possible to make it round input ?
Here is image
enter image description here
to achieve that, you need to create your own component or get one from GitHub or Codepen or somewhere else. ionic does not provide anything like this.
Edited:
I made a component for you and I put it on Codepen. You just have to convert jQuery to your framework syntax.
Click to View on Codepen.io
Here is the component:
HTML:
<div class="container">
<div class="input-container">
<label>Name</label>
<input type="text">
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
.container {
width: 380px;
margin: 4em auto;
padding: 2em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}
.input-container {
position: relative;
}
input {
font-size: 18px;
padding: 10px 15px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: 1px solid #999;
border-radius: 1000px;
}
input:focus {
outline: none;
border: 1px solid #00ff00;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
padding: 0 10px;
}
.stylee {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00ff00;
}
JavaScript (jQuery):
$('input').focus(function() {
$(this).prev().addClass('stylee');
}).blur(function() {
if($(this).val())
{
$(this).prev().addClass('stylee');
}
else
{
$(this).prev().removeClass('stylee');
}
});
I'm fairly new to the site but find it awesome, great expertise going around. I have a small issue with a site not displaying 100% right on mobile phones. It is build responsive and I'm of the impression it was working fine initially, but something changed along the line. The site adjusts itself to mobile screens but it does not scale properly and you must reduce it manually to see it all in the screen.
I'm not a real developer but it should be very easy fix I think. Hope someone can help.
Below my code:
#media only screen and (max-width: 767px){
.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }
.push-half{ left: 0; }
.pull-half{ right: 0; }
.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }
.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px; }
.show-for-small{ display: block; }
#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }
#logo{ margin-top: 55px; }
.social-header{ top:2%; left: 35%;}
#main-menu{ margin-left:0;}
}
#media screen and (max-width: 370px){
.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }
.push-half{ left: 0; }
.pull-half{ right: 0; }
.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }
.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px; }
.show-for-small{ display: block; }
#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }
#logo{ margin-top: 55px; }
.social-header{ top: 150px; left: 35%; }
#main-menu{ margin-left:0;}
}
/***** TABLETS PORTRAIT & LANDSCAPE *****/
#media all
and (min-width : 768px)
and (max-width : 1024px) {
mesh-left{ left: -280px !important; }
mesh-right{ right: -360px !important; }
}
/***** PORTRAIT TABLETS *****/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
Add this inside your <head> </head> tag to enable css to correctly detect the screen width:
<meta name="viewport" content="width=device-width">
You should use Bootstrap for develope responsive, mobile web applications
I'm trying to keep my footer at the bottom of every page (not sticky). At the moment it is hovering in the middle of the screen.
Here is my site.
And here is the code I have at the moment -
HTML -
<footer id="footer">
<a class="right">All Rights Reserved © 1-800 Dinosaur 2014 </a>
</div>
</footer> <!-- footer --->
CSS -
#footer {
-moz-box-sizing: border-box;
background: transparent;
bottom: 0;
color: #444444;
font-family: 'Helvetica Neue',Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
height: 100px;
left: 0;
overflow: hidden;
padding: 44px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
}
#footer a {
-moz-box-sizing: border-box;
background: transparent;
bottom: 0;
color: #FFFFFF;
height: 100px;
left: 0;
padding: 44px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
}
#footer a:hover {
color: #000000;
}
#footer a:active {
background: transparent;
}
#footer .last-page {
text-align: center;
What am I doing wrong?
In my experience, absolute positioning has only worked if it was only in a parent specified to have relative positioning. Try putting your footer in a div with style="position: relative;" and see if that works. It actually looks like you've included a closing div tag without an open one in your snippet.
I'm running into a very specific issue using CSS triangles:
I've created buttons that work perfectly on desktop browsers (ie9+, ff, chrome, safari), and on iPhones in portrait mode... The issue exists on iPads (retina and non-retina), as well as iPhones in landscape. The button renders with a line between the main container and the css triangle(s) that I've got in place.
Here's a screenshot on imgur:
http://imgur.com/d0k6lP2
Here's the code I'm using:
HTML:
<span>BUTTON SHAPE</span>
CSS (there are potentially a few non-relevant styles included because this is pasted from a larger file):
.cta-watch {
display: inline-block;
position: relative;
padding: 0 10px;
background-color: #91a1a8;
border-collapse: collapse;
color: white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
letter-spacing: 2px;
font-weight: 400;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 40px;
text-decoration: none;
transform: rotate(360deg);
}
.cta-watch.large {
display: inline-block;
position: relative;
width: 34px;
height: 32px;
}
.cta-watch.large:hover {
text-decoration: none;
}
.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
border-left: none;
border-right: none;
}
.cta-watch.large span {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
}
.cta-watch.large span:before {
width: 0;
height: 0;
content: '';
border-color: transparent transparent #91a1a8 transparent;
border-width: 0 27px 14px 27px;
border-style: solid;
position: absolute;
top: -14px;
left: 0;
}
.cta-watch.large span:after {
width: 0;
height: 0;
content: '';
border-color: #91a1a8 transparent transparent transparent;
border-width: 14px 27px 0 27px;
border-style: solid;
position: absolute;
bottom: -14px;
left: 0;
}
.cta-watch.large:before {
display: block;
width: 100%;
height: 0;
content: '\25BA';
color: white;
font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
margin-left: 3px;
font-size: 22px;
line-height: 34px;
text-align: center;
}
JSBin showing code demo here: http://jsbin.com/ocaGeja/1
Any help would be greatly appreciated - Thank you!
I can reproduce the same issue in Chrome for Windows, changing the zoom level.
At least in this situation, it is solved changing this value to decimal:
.cta-watch.large span:before {
...
top: -13.7px;
May be that can help you ?
Another posibility would be to change the way you create the hexagon. Instead of the triangles way, you can try the multi-background way:
.hexagon {
position: absolute;
left: 20px;
top: 20px;
font-size: 80px;
height: 2em;
width: 1.732em;
background-size: 50.5% 50.5%;
background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%), -webkit-linear-gradient(60deg,transparent 33%, red 0%), -webkit-linear-gradient(120deg,transparent 33%, red 0%);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
It's responsive em based, so that it can fit your need quite well.
demo
I have the following code for my flexbox overlay
.overlay-content-wrapper {
display: -webkit-flex;
display: flex;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
<div class="overlay-content-wrapper"><div class="overlay-content">Some content</div></div>
In Chrome it works perfectly but in iOS safari (v6 simulator) it doesn't center vertically. What do I need to change to get it to work?
After digging around for a while I discovered that iOS safari supports one of the old syntaxes with teh webkit prefix (given its market share it's surprising more flexbox tutorials/tools don't include the old syntax... but hey ho).
So here is my final CSS which should work in every browser that supports some version of flexbox and falls back to just horizontal centering in other browsers.
.overlay-content-wrapper {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
I had the same problem; aligning children (one headline and one icon) of a flex container with align-items: center. The icon aligned correctly at center but my headline aligned with top because of it's height.
Adding align-self: center to the headline CSS solved it!