Display Carousel as half image slider - iphone

i want to display carousel as half image slider instead of full page slider.
CSS:
html,
body {
height: 40%;
margin: auto;
}
header.carousel {
height: 40%;
margin:auto;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 40%;
margin:auto;
}
header.carousel .fill {
width: 100%;
height: 40%;
background-size:cover ;
margin: auto;
}
HTML:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--first slide-->
<div class="item active">
<img src="image/stylegirl.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Text Test</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
<!--second slide-->
<div class="item">
<img src="image/couple.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button">Test Button</a></p>
</div>
</div>
</div>
<!--Third Slide-->
<div class="item">
<img src="image/w1.jpg" style="Width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
jsfiddle
Image is missing from the fiddle coz i don't know how to add image from the local file.
It shows half slider image only when i use height in px instead of %.
But still it is showing as full page slider carousel. Why is that.
Any help.

Related

Cannot get ngx-infinite-scroll to listen to window scroll

I am trying to implement ngx-infinite-scroll
I am unable to get it to do what I want which is listen to my browser or window scroll so I may scroll content and load when needed.
What's happening is can implement this library ONLY when I set the scroll to listen to some other div so the result is two scroll bars (1) browser window scroll bar (2) content div scroll bar - this is not desirable and creates a real messy UX.
You will notice a setting in the template "scrollWindow" I have tried changing this value without any success I'm not too sure what i'm doing wrong here...
Environment
Angular 8 with Angular Material
Template and Styling:
.container {
height: 100vh;
width: 70vw;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
overflow-y: auto;
}
HTML
<app-navigation-bar></app-navigation-bar>
<app-userpost></app-userpost>
<div *ngIf="loading">
<app-progress-spinner></app-progress-spinner>
</div>
<!-- infinite scroll div -->
<div
class="container"
infiniteScroll
[infiniteScrollContainer]="container"
[scrollWindow]="false"
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="5"
[infiniteScrollThrottle]="300"
(scrolled)="onScrollDown()"
>
<mat-card *ngFor="let post of postObjects">
<mat-card-header>
<img mat-card-avatar src={{post.profile_picture}} alt="no profile image">
<mat-card-title>{{post.email}}</mat-card-title>
<mat-card-subtitle> {{post.upload_date | date:"medium"}} </mat-card-subtitle>
</mat-card-header>
<img mat-card-image src={{post.photo}}>
<mat-card-content>
<p>
{{post.author_comment}}
</p>
</mat-card-content>
<!-- This fills the remaining space of the current row -->
<mat-card-actions class="action-buttons">
<button mat-button color="primary" (click)="post_like(post.post_id)">
<mat-icon>thumb_up_alt</mat-icon> {{post?.post_likes?.length}} Likes
</button>
<button mat-button color="primary" (click)="post_dislike(post.post_id)">
<mat-icon>thumb_down</mat-icon> {{post?.post_dislikes?.length}} Dislikes
</button>
<button mat-button color="primary">
<mat-icon>share</mat-icon> Share
</button>
<a mat-button color="primary" target="_blank">
<mat-icon>visibility</mat-icon> View
</a>
</mat-card-actions>
<mat-accordion>
<div *ngIf="post?.post_comments?.length > 0">
<mat-expansion-panel>
<mat-expansion-panel-header>
<div class="comment-header">
<span class="label label-primary">{{post?.post_comments?.length}} Comments</span>
</div>
</mat-expansion-panel-header>
<mat-list>
<div *ngIf="post?.post_comments?.length > 0">
<div *ngFor="let postSection of post.post_comments; let i = index">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header collapsedHeight="80px" expandedHeight="30px">
<mat-panel-title>
<div style="max-height: 53px; text-overflow: ellipsis">
<img mat-card-avatar
src="https://source.unsplash.com/random/200x200"
style="padding: 5px">
<strong
style="padding: 5px">{{postSection?.comment_author}}</strong>
<small style="padding: 5px">
{{postSection?.date | date:"medium"}}</small>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<hr>
<p>{{postSection?.post_comment}}</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-list>
</mat-expansion-panel>
</div>
</mat-accordion>
<form [formGroup]="PostComment">
<div class="input-group">
<div id="container">
<div id="profile_img">
<div class="actions">
<div class="avatar">
<img class="d-flex mr-3 rounded-circle" src={{userAvatar}} alt="Cannot Load Photo"
width="30" height="30">
</div>
</div>
</div>
<mat-form-field class="example-full-width" style="margin-top: 10px;">
<textarea matInput formControlName="post_comment" #message maxlength="500"
placeholder="Leave a comment"></textarea>
<mat-hint align="start">
<strong>Say something constructive..</strong>
</mat-hint>
<mat-hint align="end">{{message.value.length}} / 500</mat-hint>
</mat-form-field>
<div class="post-button">
<button mat-raised-button (click)="createComment(post.post_id)">Post</button>
</div>
</div>
</div>
</form>
</mat-card>
<div *ngIf="end_of_data">
<strong><h3>No More Data To Load..</h3></strong>
</div>
</div>
change this [infiniteScrollContainer]="container" by [infiniteScrollContainer]="'.container'"

Bootstrap 4 Beta - Applying a background-image to Jumbotron breaks a Form element

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>

How to vertically align Bootstrap v4 modal dialogs

Vertically center modal dialogues in Bootstrap 4.
Note: The requirements below have been added to make it clear I am looking for a proper way to vertically center a Bootstrap modal, covering all possible cases, on all possible devices, in all browsers. In my case, I wanted it for a large SPA reusing the same modal throughout the app so I needed it to work in each case.
It should:
keep modal contents accessible, on all devices, even when taller than device height
work on any device+browser combination with a market share larger than 1%
not use display:table-cell or similar hacks (any layout-ing technique not meant or designed for layout-ing)
close on click or tap anywhere outside of .modal-content (including above and below).
limit usage of jQuery/JavaScript as much as possible
(optional) work on default Bootstrap examples without need of markup modifications
Update, as of Beta 3, [docs]:
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Original answer:
SCSS:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
#media(max-width: 768px) {
min-height: calc(100vh - 20px);
}
}
or unprefixed CSS:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
#media(max-width: 768px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
Note 1: Please note fully prefixed CSS gradually becomes obsolete as browser support for certain properties changes. The right way of getting the updated prefixed CSS is to:
copy/paste the unprefixed CSS into Autoprefixer.
set the filter in the bottom box to the desired setting (for max. browser support use > 0%).
get the latest code from the box on the right.
Note 2: This answer was added in early stages of v4 (alpha 3 or 4), which is now currently in beta. You can safely replace the CSS part of this answer by adding the following classes to .modal-dialog:
h-100 d-flex flex-column justify-content-center my-0
..., as pointed out by #Androbaut in the comment below. You will still need the JavaScript (see below) to close the modal window on click tap below/above the modal window.
jQuery (needed to close modal on click/tap above/below):
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
That's it.
Working snippet, fully-prefixed CSS and markup using different modal sizes:
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
.modal-dialog {
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
}
#media (max-width: 768px) {
.modal-dialog {
min-height: -webkit-calc(100vh - 20px);
min-height: -moz-calc(100vh - 20px);
min-height: calc(100vh - 20px);
}
}
/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */
.modal-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.modal-content > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.modal-content > *.modal-body {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#Modal_2 .modal-content {
min-height: 50vh;
}
#Modal_3 .modal-content {
min-height: 85vh;
}
#Modal_4 .modal-content {
min-height: 200vh;
}
.full-page-center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
}
.full-page-center button {
margin: 15px;
}
#media (max-width: 768px) {
.full-page-center {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.full-page-center button {
display: block;
min-width: 100%;
margin: 10px 15px;
}
.full-page-center::after {
display: none;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="container full-page-center">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1">
Tiny modal
</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">
Normal modal
</button>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">
Large modal
</button>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">
Very large modal
</button>
</div>
<div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_1">Tiny modal</h4>
</div>
<div class="modal-body">
I am cute...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_2">Dull modal</h4>
</div>
<div class="modal-body">
I am normal...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_3">Don't call me fat</h4>
</div>
<div class="modal-body">
Call me "oversized".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_4">Huge modal</h4>
</div>
<div class="modal-body">
Comments, anyone?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Some action</button>
</div>
</div>
</div>
</div>
If you find any bugs or shortcomings please let me know. I will take the time to improve the answer and keep it useful. Help with this task is welcome.
Simply add modal-dialog-centered class along with model-dialog as below
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<button class="btn btn-success" data-toggle="modal" data-target="#MyModal">Launch Modal</button>
<div class="modal align-middle" id="MyModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here's a simple Flexbox Approach.
SCSS
.modal-open .modal {
display: flex!important;
align-items: center!important;
.modal-dialog {
flex-grow: 1;
}
}
Working Demo
Just use this class " modal-dialog-centered "
for showing Modal on center of screen Vertically .
for exmaple:
<div class="modal-dialog modal-dialog-centered" role="document">
Thanks
This solution works for small and long modals thats needs scroll.
Add these custom css rules:
.modal-header {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
And add these classes:
To modal-dialog: h-100 my-0 mx-auto d-flex flex-column justify-content-center
To modal-content: m-2
Like this:
<div class="modal-dialog h-100 my-0 mx-auto d-flex flex-column justify-content-center" role="document">
<div class="modal-content m-2">
...
</div>
</div>
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
By adding following css to '.modal-dialog' class, it works fine for me. You can override with custom css class also.
.modal-dialog {
height: 100vh;
display: flex;
align-items: center;
}
Another simple way to make your modal vertical align is to adjust top: 50%;, transform: translateY(-50%); and margin: 0 auto to the modal dialog class.
Edit:
The downside is that you also have to set max-height: 100vh; to .modal-content. Otherwise the top of modal is not accessible anymore when your modal is getting heigher than the viewport.
Demo:
.modal.vertically-modal .modal-dialog {
transform: translateY(-25%);
top: 50%;
margin: 0 auto;
}
.modal.vertically-modal.show .modal-dialog {
transform: translateY(-50%);
}
.modal-content {
max-height: 100vh;
overflow-y: auto;
padding: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "></script>
<button class="btn btn-primary" data-toggle="modal" data-target=".vertically-modal">Show modal</button>
<div class="modal fade vertically-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
Vertically modal
</div>
</div>
</div>
There is a much easier way of achieving this without having to write a bunch of CSS overrides or other custom CSS, basically using just the stock bootstrap classes and adding one extra HTML element to control the height.
CSS (Not Needed see below)
.modal > .row{
flex: 1;
}
HTML (Updated see below)
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Then to use:
JS
$("#dialogBox").modal('show');
OR HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
Launch demo modal
</button>
There is probably a way to achieve the desired result using only the bootstrap .row, .col and flex-XXX classes but I was unable to get that to work.
One last note, you might have to add: <body class="d-flex"> to get everything to work depending on the rest of your CSS.
UPDATE
There is a way to achieve this using only bootstrap classes, h-100 and w-100:
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Try this,
::ng-deep{
.modal-body{
padding: 0.25rem;
width: 600px !important;
}
.modal-content {
position: relative;
display: flex;
flex-direction: row;
margin-top: auto;
margin-bottom: auto;
width: 600px !important;
}
}

collapse inline form bootstrap

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.

Ionic framework and bottom fixed content

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;
}