On an app with Ionic and AngularJs, I try to create a new template with a header. Unfortunately some content is hidden by the header.
Here is my code:
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"/>
<div class="bar bar-header bar-stable">
<h1 class="title">XXX</h1>
</div>
<ion-content class="has-header">
<div class="padding-horizontal">
<h4 class="center">Sign in</h4>
<button class="button button-block button-positive">Sign In</button>
</div>
<hr>
<div class="padding-horizontal">
<h4 class="center">Don't have an account?</h4>
<button class="button button-block button-positive">Sign Up</button>
</div>
</ion-content>
Or JsFiddle: http://jsfiddle.net/cyef9sxs/1/
Thank you!
Well you need to specify the position absolute and width for the ionic element.
.has-header {
top: 44px;
position:absolute;
width: 100%;
}
Related
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I have images of different sizes and x/y ratios in a responsive CSS grid.
I need a ✖️ button in the top-right corner of each image.
So in each grid cell I put a form, and inside the form - a button and an image:
<form action="/destroyImage" method="POST">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="/pub/myimage123.jpg"/>
</form>
The questions:
How can I place the center of the button on the corner of the image?
How can I get a better looking ✖️ button (I use Bootstrap 4)?
To get the 'X' in the top right hand corner you could do:
.AClass{
right:0px;
position: absolute;
}
<form action="/destroyImage" method="POST">
<div style="position:relative;">
<button type="submit" class="close AClass">
<span>×</span>
</button>
<img src="/pub/myimage123.jpg"/>
</div>
</form>
To get a better cross I would suggest using Font Awesome or some variant of that.
You can adjust right by your perspective
button{
position: absolute;
z-index: 1;
right: 0;
}
img {
position: relative;
width: 100%;
}
<form action="/destroyImage" method="POST">
<div class="1st">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="2nd">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="3rd">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</form>
FOR GRID
you can use position-absolute and position-relative BS4 class for image and button
button{
position: absolute;
z-index: 1;
right: 20px;
}
img {
position: relative;
}
button span {
color: red; // for testing purpose
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<form action="/destroyImage" method="POST">
<div class="row">
<div class="col-4">
<div class="1st">
<button type="submit" class="close">
<span>×</span>
</button>
<img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</div>
<div class="col-4">
<div class="2nd">
<button type="submit" class="close">
<span>×</span>
</button>
<img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</div>
<div class="col-4">
<div class="3rd">
<button type="submit" class="close">
<span>×</span>
</button>
<img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</div>
</div>
</form>
I want add two div's in a single div one is to right and other is to left.
<html>
<div>
<div><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons">
<button>edit</button>
<button >Save</button>
</div>
</div>
</html>
use float css property to align div left and right
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class='left'><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons" class='right'>
<button>edit</button>
<button>Save</button>
</div>
</div>
you can use ng-container instead of div for button one is to right and other is to left.
<div>
<button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
<ng-container *ngIf="showButtons">
<button>edit</button>
<button>Save</button>
</ng-container>
</div>
You could set the display to flex, the default direction is row :
<div style="display:flex;">
<div><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons">
<button>edit</button>
<button >Save</button>
</div>
</div>
.firstCol{
float : left;
}
<html>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="firstCol"><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons">
<button>edit</button>
<button >Save</button>
</div>
</div>
</div>
</div>
</html>
You did it well, just add a class name or an Id on the div and you can do what you want with CSS with for exemple the float property.
I am using Bootstrap Modal to quick popup my news.
Currently, I have the problem when clicking on link; it only shows a box. It's not fullscreen.
My question simple is: have any method to append width and height of the class contain modal to body to show fullscreen.
I think because of it a child of another parent. And it can't show fullscreen.
Have any method to show a class of div is fullscreen not dependency any parent element?
Struct my code like this:
.contentfit {
height: 100%;
position: relative;
}
.right-content {
background-color: #5AA258;
float: left;
width: 70%;
height: 100%;
padding-left: 30px !important;
padding-right: 30px !important;
display: flex;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section">
<div class="contentfit">
<div class="right-content">
<section id="hoicho">
<div class="title">
<h2>The title</h2>
</div>
<div class="services">
<ul>
<li>Services 1</li>
<li>Services 2</li>
</ul>
</div>
<div class="wrap">
<div class="frameallcontent">
<div class="containter">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<p class="title-p"> Click to link
</p>
<!-- Modal -->
<div class="modal fullscreen-modal fade" id="tintuchoicho" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="left-content">
</div>
</div>
</div>
I only show a part of my code.
You can see in real my example look like this.
When I click the link underline, it only shows small popup like this.
Place this script at the bottom of your page, just before closing </body>.
$(window).on('load', function(){
$('.modal.fade').appendTo('body');
})
It will effectively move your modals from wherever they are placed, making them direct children of <body>.
If this doesn't work, it means you're overriding the default CSS of .modal and you will need to produce a minimal, complete and verifiable example of your problem here or using any online snippet tool.
Bootstraps documentation says:
Modal markup placement
Always try to place a modal's HTML code in a
top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
Taken from here: http://getbootstrap.com/javascript/#modals
So i would suggest moving it down the document to before the closing </body> tag if possible. that should resolve your problem.
I'd like to place an ionic button at the bottom right of a div. But it doesn't work as I expected. Here is the screenshot:
My html:
Ionic Blank Starter
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
</ion-slide>
</ion-slide-box>
The css:
.slider-container {
margin: 0;
padding:0;
position:relative;
}
.bottom-right {
position:absolute;
bottom: 0;
right: 0;
}
Can anybody help? Thanks.
And why not to do it this way?
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
</div>
</ion-slide>
</ion-slide-box>
<div class="slider-container">
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
...moving the button (and the container <div>) out of the slider.
When I needed to put the left and right buttons ("<" and ">") I used class "row" and "col"
<div class="row">
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-left" ng-click="slidePrevious()"></button>
</div>
<div class="col">
<ion-slide-box on-slide-changed="mudaSlide($index)">
<ion-slide ng-repeat="i in items">
<img class="button " ng-src="{{i.imagem}}" style="width: 128px; height: 128px; padding: 0; border: none; background: none;" ng-click="abreExibecaoImagem($index)"></img>
</ion-slide>
</ion-slide-box>
</div>
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-right" ng-click="slideNext()"></button>
</div>
</div>
Result