On Android there's a component called CardView which displays a box like a card, with rounded corners, shadows, etc. I'm willing to achieve the same thing in HTML, is there any library, CSS or sample to make it happen?
Below is the link which provides with various example related to cards
https://www.w3schools.com/howto/howto_css_cards.asp
Or u can try with bootsnipp where ull be provided with code snippets
below is the example code
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h2>Round Card</h2>
<div class="card">
<img src="img_avatar2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Jane Doe</b></h4>
<p>Interior Designer</p>
</div>
</div>
</body>
</html>
There is a library called Materialize, its compliant with Material designs standards.
http://materializecss.com/cards.html
Here's a snippet from their website.
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
You can add the library to your site by adding this inside the head tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
Related
I am finishing up a website which can be found here - www.minimindsacademy.com
I need to find a way for the height to take up 100% of the screen on an iPhone device. It is not taking up 100% height on my iPhone but on my desktop browser it is even if I shrink it. The goal of this site was for it to be 100% responsive with the use of Twitter Bootstrap as my style framework. I am not sure if it is doing this on other mobile devices. Also, I cannot replicate this on my browser screen (when I make the browser screen small as possible it looks fine, however on my iPhone the height isn't 100%).I don't know if I did something wrong with the CSS or what.
It won't let me post images on my posts yet, but if you view the site on a mobile device you should see an example of what I am referring to on the Home page.
HTML:
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="script.js"></script>
</head>
<section class="hero">
<!--Nav Bar-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>About Us</li>
<li>Staff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4">
<a href="home.html" >
<img id="logo" src="assets/logo.png" alt="logo">
</a></div>
<div class="span4"></div>
</div>
</div>
<!--BOX START-->
<div class="container" id="box">
<!--HEADER-->
<!--<h1>Home</h1>-->
<!-- CARASOUL -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/home/1.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Jammin Out</h3>
<p>Piano at the mall!</p>
</div>
</div>
<div class="item">
<img src="assets/home/2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Snack Time</h3>
<p>Healthy eating for everyone!</p>
</div>
</div>
<div class="item">
<img src="assets/home/3.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Comfortable Environment</h3>
<p>Hangin with my pal!</p>
</div>
</div>
<div class="item">
<img src="assets/home/4.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Arts and Crafts</h3>
<p>Chalk is always fun!</p>
</div>
</div>
<div class="item">
<img src="assets/home/5.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Backyard Activities</h3>
<p>Beep Beep!</p>
</div>
</div>
<div class="item">
<img src="assets/home/6.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Outdoor Fun</h3>
<p>Hangin at the park!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- MAIN -->
<div class="row">
<div class="col-md-4" id="one">
<h3>About us</h3>
<p>Mini Minds Academy is here to provide a nurturing,
safe and stimulating environment for children to explore, learn and play! We
respect and value the diversity in each child's character, background and
level of development.</p>
<a class="btn btn-primary pull-right"
href="about.html">Read more</a>
</div>
<div class="col-md-4" id="two">
<h3>Meet our staff</h3>
<p>Our staff at Mini Minds academy consist of teachers
Shelly Lenzotti, an alumni of Boise State University. She has over 13 years
of experience in educating and caing for children ages 3 months - 11 years
of age.</p>
<a class="btn btn-primary pull-right"
href="staff.html">Meet us</a>
</div>
<div class="col-md-4" id="three">
<h3>Contact us</h3>
<p>If you are interested in our program and have a child
between te ages of 1-6 years old feel free to contact us. We would be happy
to provide for your child's needs if we have space available!</p>
<a class="btn btn-primary pull-right"
href="contact.html">Contact us</a>
</div>
</div>
</div>
</section>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</html>
CSS:
.navbar-brand {
padding: 5px 15px;
}
.navbar-brand img {
height: 40px;
}
#headerTitle {
position: relative;
max-width: 75%;
margin: 0 auto;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#myCarousel {
margin-bottom: 20px;
}
section.hero {
background-image: url("../assets/1.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
}
#logo {
max-width: 400px;
margin: auto auto;
text-align: center;
margin-bottom: 30px;
width:100%;
}
.row .span4 {
text-align: center;
}
#box {
max-width: 75%;
padding: 20px;
padding-bottom: 100px;
}
.row {
padding: 0px 20px 0 20px;
}
.col-md-8 {
font-weight: bold;
color: #717070;
padding-bottom:20px;
}
.col-md-4 {
font-weight: bold;
color: white;
padding-bottom:20px;
}
#about h5 {
font-weight: bold;
}
#about2 {
background-color: #945389;
font-weight: bold;
height: 100%;
}
#one {
background-color: #ee4524;
}
#two {
background-color: #a2c95c;
}
#three {
background-color: #945389;
}
.btn-primary {
color: white;
background-color: #018ca9;
border-color: #018ca9;
width: 100%;
margin: 0 auto;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
color: white;
background-color: #01778f;
border-color: #01778f;
}
h1 {
color:#945389;
font-weight:bold;
}
#media only screen and
(max-width: 767px) {
#box{max-width:100%;}
}
I figured it out, it is because I am using domain-forwarding with go-daddy. The masking is converting the code into this:
<html>
<head>
<title>minimindsacademy.com</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://www.ayodlomedia.com/miniminds/home.html"
frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 11 -->
<!-- -->
</html>
Apparently the frameset tag isn't compatible with HTML5, thus, I am assuming thats where the error is coming from.
It looks like your hero section just doesn't get enough height to fill the screen. If you add min-height: 100vh to the .hero class that makes the background fill the screen.
Is that what you were referring to?
My HTML has several inner divs with display: inline-block inside an outer div with text-align: center;. This is the expected behaviour: in a big screen, some divs will show up side by side (how many depends on the size of each inner div and the outer div) and the set will be center aligned. When the screen width gets narrower the divs will re-position, and in a small smartphone screen we'll have only one div per row, center-aligned.
This is my MCVE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Align center</title>
<style type="text/css">
body {
background-color: white;
}
div.container {
margin: auto;
max-width: 1000px;
text-align: center
}
div.block {
margin: 4px;
display: inline-block;
width: 320px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
If you change the size of the window you'll see the divs repositioning (SO snippet is quite small to see this behaviour, but you can click "full page" and resize the window).
My problem:
In smartphones there is just 1 div per row, and this is exactly what I want. But my problem is that the div is not center aligned on iPhones, despite being perfectly aligned on Android phones.
Using the code above, this is the result in an Android phone, you can see that the white margins are the same on left and right:
But now on an iPhone:
The div is slightly positioned to the right.
What can I do to center-align the divs?
Note 1: I wrote Android and iPhone in the question's title because I'm not sure if this problem depends on the OS (Android vs iOs) or on the browser (mobile Chrome vs mobile Safari). I don't think this is a Safari problem, because the divs are OK on iPad and MacBook.
Note 2: It may not be an "alignment" problem: on iPhone, it's like the div was not "compressed" to fit the screen.
Add this in your head tags,
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Remove div.container from your css
Change block css to
.block {
width: 100%;
height: 400px;
background-color: green;
display: flex;
justify-content: center;
align-content: center;
}
if you want to show the blocks 3 at a time in 1 row in full screen:
<div class="container">
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
<div class="col-lg-4">
<div class="block"></div>
</div>
</div>
I want to layout one page like this: screenshot1, screenshot2.
The page includes three sections -- header (orange section), content (pink section), footer (blue section) --
The header and footer will be fixed on the screen. The content will scroll when needed.At the same time, when you focus any of the three inputs (located in the different sections), the keyboard can't cover the input, neither do the other section.
I have tried some methods, but I can't find a perfect method compatible with all the mobile browsers.
In china there is a quirk browser called UC, in version 9.0 UC when the keyboard displays, there is a blank area at the end of page. This blank area won't disapper until you touch the screen and scroll the page, like this the blank area in the end of page.
I inspected this area thrown winer, the blank area isn`t a part of the HTML, have been confused by this problem .
I need your help!
Any suggestions?
I have tried this layout:
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
{{wing.view('pages/demo/css')}}
</head>
<body>
<div id="doc">
<div class="header">this is header
<div>input some chinese chars:<input type="text"/></div>
</div>
<div class="content">this is content
<div>input some chinese chars:
数学库 - 开源中国社区
Math.js 是个JavaScript 和写真—Tag—电影网—www.M... 电影网
<input type="text"/></div>
</div>
<div class="footer">this is footer
<div>input some chinese chars:<input type="text"/></div>
</div>
</div>
</body>
</html>
css(less):
#import url(../lang/base.less);
html, body, #wing-page-content, #doc {
height: 100%;
}
#doc {
.display();
.flex-direction(column);
}
.content {
.flex();
background-color: #f99690;
}
.header {
height: 44px;
background-color: #e76000;
}
.footer {
height: 44px;
background-color: #0073FD;
}
.content {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
base.less--->https://github.com/codio/Flex.less/blob/master/flex.less
<html>
<body style="height:100%; width:100%">
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
</body>
</html>
I have created a mobile application using ionic framework. It consist of many html pages. For android version KitKat, the pages are displaying correctly. For android version Jellybean, the pages are displaying differently. Please see the html &css code?
Login.html
<ion-view hide-nav-bar="true ">
<ion-content scroll="false">
<div class="row" style="padding:29px">
<div class="col">
<div class="text-center">
<h1 class="text-font-white">Welcome</h1>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="line-white"></div>
</div>
</div>
<div class="row">
<div class="col">
<input class="input" placeholder="{{user}}">
</input>
</div>
</div>
<div class="row">
<div class="col">
<input class="input" type="password" placeholder="{{password}}">
</input>
</div>
</div>
<div class="row" style="padding:30px 0">
<div class="col">
<button type=submit id="login-btn" ng-click="doLogin()"></button>
</div>
</div>
<div class="row" style="padding:2px 0">
<div class="col">
<button type=submit class="btn-white" ng-click="openRegistration()">Register your account</button>
</div>
</div>
<div class="row" style="padding:34px 0">
<div class="col">
<div class="item item-image" id="logo">
<img src="img/logo.png">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="text-center">
<h4>Forgot password?
<span><a href="#/forgetpwd" style="text-decoration:none;color:white">
Recover it</a></span>
</h4>
</div>
</div>
</div>
</ion-content>
</ion-view>
style.css [I have included styles that is related to Log.html page]
ion-view {
background-image: url("../img/bg.png") !important;
background-repeat: no-repeat;
background-size: cover
}
.text-font-white {
color: white;
}
.text-font-white {
color: white;
}
.line-white {
width: 100%;
background-image: url("../img/title_line_white.png");
background-position: center;
background-repeat: no-repeat;
height: 20px
}
.input {
width: 97%;
background: white;
border-radius: 20px;
border: 2px solid rgba(256, 256, 256, .4);
padding: 4px;
font-family: 'Lato-Black';
}
#login-btn {
width: 97%;
background: transparent;
border-radius: 20px;
border: 2px solid rgba(256, 256, 256, .4);
padding: 14px;
background-image: url("../img/icon_key.png");
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
}
#logo {
background-color: transparent;
border-width: 0
}
Different versions of android shows design differently, how to solve the problem?
Different Android versions have different WebView, with different support for html/css. For example svg is only partially supported before android 4.4.
Unfortunately only from Android 4.4 it's possible to remote debug your application with Chrome.
Check manually what css properties are failing across different Android version, then try to find a workaround (search and ask here).
Visit below link, you can get more ideas about Android Screen Sizes from it:
http://developer.android.com/guide/practices/screens_support.html
I created a form using bootstrap, css, and html.
However when I click on the text area on an android phone(that is, when it comes into focus), the bottom half of the textarea changes color.
I don't understand why its turning white.
By the way: It works fine on a PC.
My css Code:
.container-fluid{
background-color: #EF4247;
border-color: #EF4247;
}
form {
height: 100%;
width: 100%;
padding: 50;
background-color: #EF4247;
border-color: #EF4247;
text-align: center;
margin: 0;
}
h1{
text-align:center;
}
textarea{ width:200px;
}
.form-horizontal .control-group {
margin-bottom: 20px;
}
My HTML code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>SEND ME SOME MAIL</h1>
<form class="form-horizontal" action="mail.php" method="post" >
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email" name="subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Text Area</label>
<div class="controls">
<textarea id="textarea" rows="10" name="message" placeholder="Enter your message here:"></textarea>
</div>
</div>
<button type="submit" class="btn">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="fitter-happier-text.js"></script>
<script type="text/javascript"></script>
</div>
</body>
</html>
I believe the underlying issue in this particular example is that the behaviour of the bootstrap container-fluid CSS style appears to be incompatible with your desired effect on mobile devices.
My answer to this is merely encapsulate your form with a new block element and set your background on that. Then set min-height:100% on this new block container, as well as the <html> and <body> elements.
Something like this:
html, body {
min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
background-color: #EF4247;
min-height:100%;
}
And html like this:
<body>
<div class="red-background-not-on-body-or-html">
<div class="container-fluid">
<!-- FORM HERE -->
</div>
</div>
</body>
As far as your example goes, you could also just put the background-color attribute on the <body> or <html> tags themselves.
Otherwise, if you still require that the background respect the .container-fluid CSS logic, then you could try a hack with media queries for handheld devices but it could get messy.
You could also try re-ordering so that the form is outside the fluid logic then add min-height:100% to the form.
JSBin to illustrate
I know this is very old post, but anyway here what you can do.
body {
position: absolute;
}
I delay the focus:
// If the form has the focus the keyboard moves the layout
setTimeout(() => this.focus(0), 1000);