I was creating a bootstrap website as a challenge when I encountered a problem which I can't find a fix for.
In the jumbotron I have a form with a textfield and a submit button.
The textfield also has an addon (input-group-addon)
Without any images The addon is placed perfectly where it should be but When I add an image the Addon moves away a pixel from the text field.
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Bootstrap 4, still in beta release, applies a highly-transparent border for the .form-control class. Your example highlights how this may produce unexpected results when using an input element against a container with a dark background. Bootstrap 4's default style is this:
.form-control {
border-color: rgba(0, 0, 0, 0.15);
}
That's a black border with near-maximum transparency. Rendering that over a dark background will not achieve the expected look, as you've discovered.
I've appended a custom class to override Bootstrap 4's default border-color for the .form-control class. Applied to your example, it's in effect only when the class .bg has also been applied to the jumbotron.
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control solid-gray-border" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Related
I have a large #html function (125 lines) and after that sbt fails with OutOfMemory. I increased sbt's memory to 8g and same thing so it's not just it needed a little more memory.
Is this a known issue with Binding.scala?
sbt 1.3.2
scala 2.13.3
JDK11
scala js 1.1.1
"org.lrng.binding" %%% "html" % "1.0.3"
"com.thoughtworks.binding" %%% "binding" % "12.0.0"
#html def topNav: NodeBinding[Node] = {
<nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
<div class="container-fluid">
<button class="btn btn-link d-md-none rounded-circle mr-3" id="sidebarToggleTop" type="button"><i class="fas fa-bars"></i></button>
<form class="form-inline d-none d-sm-inline-block mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input class="bg-light form-control border-0 small" type="text" placeholder="Search for ..."/>
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
<ul class="nav navbar-nav flex-nowrap ml-auto">
<li class="nav-item dropdown d-sm-none no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-search"></i></a>
<div class="dropdown-menu dropdown-menu-right p-3 animated--grow-in" role="menu" aria-labelledby="searchDropdown">
<form class="form-inline mr-auto navbar-search w-100">
<div class="input-group">
<input class="bg-light form-control border-0 small" type="text" placeholder="Search for ..."/>
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span class="badge badge-danger badge-counter">3+</span><i class="fas fa-bell fa-fw"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-list dropdown-menu-right animated--grow-in"
role="menu">
<h6 class="dropdown-header">alerts center</h6>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-primary icon-circle"><i class="fas fa-file-alt text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 12, 2019</span>
<p>A new monthly report is ready to download!</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-success icon-circle"><i class="fas fa-donate text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 7, 2019</span>
<p>$290.29 has been deposited into your account!</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-warning icon-circle"><i class="fas fa-exclamation-triangle text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 2, 2019</span>
<p>Spending Alert: We've noticed unusually high spending for your account.</p>
</div>
</a>
<a class="text-center dropdown-item small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
</li>
<li class="nav-item dropdown no-arrow mx-1" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-envelope fa-fw"></i><span class="badge badge-danger badge-counter">7</span></a>
<div class="dropdown-menu dropdown-menu-right dropdown-list dropdown-menu-right animated--grow-in"
role="menu">
<h6 class="dropdown-header">alerts center</h6>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar4.jpeg"/>
<div class="bg-success status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Hi there! I am wondering if you can help me with a problem I've been having.</span></div>
<p class="small text-gray-500 mb-0">Emily Fowler - 58m</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar2.jpeg"/>
<div class="status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>I have the photos that you ordered last month!</span></div>
<p class="small text-gray-500 mb-0">Jae Chun - 1d</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar3.jpeg"/>
<div class="bg-warning status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Last month's report looks great, I am very happy with the progress so far, keep up the good work!</span></div>
<p class="small text-gray-500 mb-0">Morgan Alvarez - 2d</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar5.jpeg"/>
<div class="bg-success status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</span></div>
<p class="small text-gray-500 mb-0">Chicken the Dog · 2w</p>
</div>
</a>
<a class="text-center dropdown-item small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<div class="shadow dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown"></div>
</li>
<div class="d-none d-sm-block topbar-divider"></div>
<li class="nav-item dropdown no-arrow" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span class="d-none d-lg-inline mr-2 text-gray-600 small">Valerie Luna</span><img class="border rounded-circle img-profile" src="assets/img/avatars/avatar1.jpeg"/></a>
<div
class="dropdown-menu shadow dropdown-menu-right animated--grow-in" role="menu">
<a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile</a><a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Settings</a>
<a
class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i> Activity log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout</a>
</div>
</li>
</li>
</ul>
</div>
</nav>
}
I don't know what happened but I build a modal for Shopping-Cart Page.
When I try to click the title of Item in modal, and the modal will hide and link can not affect as normal. I don't know why and how to solve it.
It makes me so frustrated.
My Bootstrap4 Version is 4.1.3
Is this bug caused by this version?
Here is my code:
<div id="modalCart" class="modal fade" tabindex="-1" role="document">
<div class="modal-dialog bg-light" role="document">
<div class="modal-header">
<h5 class="modal-title text-center"><i class="fas fa-shopping-cart pr-1"></i>購物車</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form class="form-group">
<div class="media cart-item mt-3 mb-3">
<img class="mr-3" src="img/NOIMAGE.png" style="width: 120px; height: auto;">
<div class="media-body">
<h5 class="mt-0">商品1</h5>
<div class="price-group">
<div class="form-inline">
<span class="price mr-1" style="width: 4em;">500元</span>
<span class="multiple mr-4"><i class="fas fa-times"></i></span>
<div class="input-group mr-2">
<div class="input-group-prepend">
<a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-left"></i></a>
</div>
<input type="text" class="form-control" value="1" style="width: 5em; text-align: center;">
<div class="input-group-append">
<a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-right"></i></a>
</div>
</div>
<a class="btn btn-danger" href="#"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer text-center">
關閉購物車
<i class="fas fa-cart-arrow-down pr-1"></i>結帳
</div>
</div>
</div>
You are missing modal-content level. It should be structured in the following way (schematically):
.modal
.modal-dialog
.modal-content
.modal-header
.modal-body
.modal-footer
And you did it like this:
.modal
.modal-dialog
.modal-header
.modal-body
.modal-footer
When you fix html structure everything will work fine.
I prepared simple navbar menu with BS 4 documents. The toggle menu displays vertical when I clicked. Is it possible make horizontal with BS?
This is my navbar and codepen.io: vertical toggle
body {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link " href="#">PORTFOLIO</a>
<a class="nav-item nav-link " href="#">CONTACT</a>
</div>
</div>
</nav>
This is as I want but I couldn't figured out with source code: horizontal toggle
It's fairly simple to do that. Bootstrap has flex class options, so there's no need to create your own code.
Simply change:
<div class="navbar-nav ml-auto">
To:
<div class="navbar-nav flex-row ml-md-auto d-md-flex">
Also make sure to add p-2 to your nav-item that will give you some padding space between the elements.
That makes your code look like this:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav flex-row ml-md-auto d-md-flex">
<a class="nav-item nav-link p-2 active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link p-2" href="#">PORTFOLIO</a>
<a class="nav-item nav-link p-2" href="#">CONTACT</a>
</div>
</div>
</nav>
i've added a inline-form to my page, in the main area,
the form is a bit to wide, i would like that it collapse at 991px,
but the rest of the page can collapse at 767px
i understand it can be done with mediaquery but not sure on what to code.
i'm stuck here!
what can i do?
i copied the inline form originally from a navbar of a file, the button is working fine.
it look like this:
<div class="container">
<div class="text-center">
<button
class="btn btn-default form-toggle"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"> <span class="sr-only"> Toggle navigation</span> Reservations
</button>
</div>
<div id="collapseExample" class="navbar-collapse collapse">
<div class="text-center ">
<form class="form-inline navbar-form" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
</div>
</div>
</div>
thank you for your help,
ok actually i'm almost there.
i like the solution using the bootstrap grid, i've added the media queries but it's not showing as i want, from 992 above it should show only the form, not the button
<div class="container">
<div class="text-center">
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#myForm"> Reservations
</button>
</div>
<br>
<form class="collapse collapse-class" role="form" id="myForm">
<div class="col-lg-2">
<p>
<input type="email" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="password" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<p>
<input type="text" class="form-control">
</p>
</div>
<div class="col-lg-2">
<button type="submit" class="btn btn-default">Button</button>
</div>
</form>
</div>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
You can do your on custom collapsing with a simple media query and css class. Simply toggle the CSS display from inline-block to block. Here, at 1000px and under, the two selects of the the second td will stack vertically; horizontally above 1000px.
CSS:
.collapse-it {
display: inline-block;
}
#media (max-width: 1000px) {
.collapse-it {
display:block;
}
.mobile-view:after {
content:"mobile view vertical stacking";
}
}
HTML:
<table style="border: 1px solid black;">
<tbody><tr>
<td style="border: 1px solid black;">
<div style="margin:5px;">credit card expiration</div>
</td>
<td style="border: 1px solid black;">
<div style="margin:5px;">
<div class="form-group collapse-it">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
<div class="form-group collapse-it">
<select>
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</div>
</div>
</td>
<td class="mobile-view" style="border: 1px solid black;"></td>
</tr>
</tbody></table>
View Demo on Bootply
If you just want it to go away at 992px but keep the button, put a class on what you want to collapse, and leave the button outside it. Then write a media query to display: none at 992px like so:
<form class="form-inline navbar-form collapse-class" name="bookerform" action="---" method="GET" target="_self">
<div class="form-group">hidden elements</div>
<div class="form-group">arrivo</div>
<div class="form-group">partenza</div>
<div class="form-group text-left"> Numero N</div>
<div class="form-group text-left"> Numero A</div>
<div class="form-group text-left"> Numero B</div>
<div class="form-group"> button check</div>
</form>
#media (max-width: 992px) {
.collapse-class {
display: none;
}
}
There may be a more elegant way to do this, but I'm having a hard time figuring out exactly what you want, so I'm trying to be general.
I am trying to implement a simple page with a login form (user/password text input + 1 button). I would like to fix this form to the bottom of a ion-content. But it does not work.
HTML:
<ion-view hide-nav-bar="true">
<ion-content padding="true">
<img class="logo" src="img/logo.jpeg" />
<div class="login-form">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</ion-content>
I would like to set as "fixed" the div.login-form.
Using the following CSS does not work:
{
position: fixed;
bottom: 20px;
}
Also, with position:fixed input texts seem no more editable.
In Ionic, is it possible to fix part of the content to bottom?
Thx!
You could use anythnig out the ion-content with a button inside of it.
Demo
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
<div class="fixed-outside">
<div class="row">
<div class="col">
<button class="button button-circle button-energized icon ion-log-in"></button>
</div>
<div class="col">
<button class="button button-circle button-positive icon ion-social-facebook"></button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</div>
How about just using the default ionic tab bar and just change the height to auto or any px that you wishes. Just make sure you put the code below ion-content tag.
Code:
<ion-content padding="true">
</ion-content>
<div class="tabs tabs-dark" style="height:auto;">
<div class="row">
<div class="col">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" >
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-positive">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
Codepen example : http://codepen.io/ridwan/pen/JozeYK
You could use a directive to calculate the height of the form. It will recalculate on window resize. I haven't tested navigating away from the page.
Codepen
Relevant HTML
<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
<ion-content padding="true" scroll="false">
<ion-scroll scroll-height>
Content to go above the form
</ion-scroll>
<div class="login-form">
Login form
</div>
</ion-content>
</ion-view>
CSS
.scroll-content {
position: relative;
}
div.login-form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Directive
.directive('scrollHeight', function($window) {
return {
link: function(scope, element, attrs) {
scope.onResize = function() {
var winHeight = $window.innerHeight;
var form = angular.element(document.querySelector('.login-form'))[0];
var formHeight = form.scrollHeight;
var scrollHeight = winHeight - formHeight;
element.css("height", scrollHeight + "px");
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}
}
})
all the elements which you want to have fixed in the bottom should be out of the ion-content. This is a working example:
<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
<img class="logo" src="img/logo.jpeg" />
</ion-content>
<!-- align to the bottom of the page -->
<div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
I just find a simple solution, which works fine for me.
<ion-content>
<ion-scroll style="height: 300px">
<div style="height: 1000px">
your scroll content
</div>>
</ion-scroll>
<div>
your fixed div, maybe a form
</div>
</ion-content>
you can also refer to: http://ionicframework.com/docs/api/directive/ionScroll/
I hope it helps.
I ended up more or less circumventing Ionic's intentions and using a flex box layout:
<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
<div class="flex-head"> ... </div>
<div class="flex-body flex-1"> ... </div>
<div class="flex-foot"> ... </div>
</ion-view>
The SCSS, using Ionic's mixins, looks something like this:
.flex-wrapper {
#include display-flex;
#include flex-direction(column);
...
}
.flex-1 {
#include flex(1);
...
}
actually i am using the version Ionic 2.0.0 i resolve with this code
<ion-fixed class="fixed">
<button fab fab-right fab-bottom>
${{ totalPrice }}
</button>
</ion-fixed>
in your File Scss
.fixed {
bottom: 50px;
right: 10px;
}