I have been working on angular app which contains multi layout i.e sidebar and main layout. I want to position my dialog box in main layout but it is displaying on top of total layout.
How to display it on only middle of main layout.
The reason the modal (or dialog box) is covering the whole view is because the .modal class uses a position:fixed with similar margins to both sides (via margin:auto) and a fixed max-width defined.
You didn't share your code, so I created a sidebar which would occupy 20% of the screen width; this means that the remaining 80% will our 'main layout'. Now to ensure that the modal is strictly within the confines of the 'main layout', we added a margin-left of 20% (which is exactly the width we have assigned to the sidebar);
relevant CSS:
.sideBar{width:20vw; background:lightblue; height:100vh;}
.mainArea{ width:80vw; height:100vh;}
::ng-deep .modal{margin-left:20vw;}
relevant HTML:
<div class='row'>
<div class='sideBar'>
</div>
<div class='mainArea'>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>{{closeResult}}</pre>
</div>
</div>
complete working stackblitz available here
Related
i want to prevent the elements inside my main div from stacking on top of each other when window is resized.
regular view
window resized
<body>
<div class="calbody">
<div class="top-body">
<h1 class="body_name">CALCULATOR</h1>
<div><input class="screen" type="text" /></div>
</div>
<div class="mainbody">
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="b1 btn btn-danger">+</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">-</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger" \>x</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">/</button>
</div>
</div>
</body>
yes, i am using bootstrap-5. It worked after changing col-sm to col.Thank You.
I have this modal header and wish to add the "download" button to the right of the text "Optimize data". Here is my code for the same but everytime it aligns to the below of the modal header text. I have also tried float and align properties but it didnt seem to work.
<div class="modal-header">
<h3 class="align:left" translate>{{Title}}</h3>
<div class=align:"right">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...
<div class="modal-header">
<h3>Title</h3>
<div class="ml-auto">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
https://www.codeply.com/go/qPMA41arJV
<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that
<div class="row">
<div class="col-8">
<h3>Text</h3>
</div>
<div class="col-4">
<button>Button here</button>
</div>
</div>
bootstrap it self has class "input-group"
You can use that as below.
<div class="input-group">
<span>
<a href="#" />
</span>
</div>
I'm trying to align horizontally a h2 and bottom inside of a div using bootstrap and css. My code is below.
<div class="col-md-9">
<div class="alert alert-info">
<i class="fa fa-coffee"></i>
Use this form to update your profile.
</div>
<div>
<h3>Personal info</h3>
<button class="btn btn-danger" href="#">Edit</button>
</div>
</div>
You can try this
<div class="check">
<h3>Personal info</h3>
<button class="btn btn-danger" href="#">Edit</button>
</div>
.check h3,.check button{
display:inline-block;
}
Working JSfiddle
Using bootstraps btn-group-justified layout I have a group of buttons that looks like this:
But I need it to look something like this:
Is it possible to change bootstraps justified layout to accommodate something like this?
I know I can do it without using bootstraps justified layout, but I do need the button groups to take up the whole width and be the same width as other button groups.
The btn-group-justified class has a fixed table-layout so the child elements with a btn-group class act like table cells. You just need to change their width.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin-top: 10px;
}
.btn-group-justified > .btn-group:nth-of-type(odd) {
width: .25%;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-group-justified" role="group" aria-label="">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
</div>
</div>
</div>
</div>
</div>
I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.
I made the start and end buttons but using two div tags with pull-left and pull-right classes. Now what I want is to place the middle button.
Here's a part of my code and a screenshot:
<div class="col-lg-12">
<div class="pull-left">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<!-- I want another button here, center to the tile-->
<div class="pull-right">
<button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
</div>
</div>
Use this option:
<div class="text-center">
<button class="btn btn-primary btn-sx" type="button">
Confirm
</button>
</div>
One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:
<div class="col-lg-12">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Middle Button</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Decline</button>
</div>
</div>
</div>
I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.
Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.
You're using bootstrap I presume, so your best bet and practice would be to take advantage of its' grid system.
Make a div with a class called row and divide the children inside of that parent div into the content you want.
The way this division works is that the number behind col-[size]- decides how much of the horizontal space it will take up. In the end it has to add up to 12, so in your case, we want three parts that are size 4 each.
For example :
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
Then simply put the buttons inside of the col-xs-4 div's and you're ready to go.
that worked for me
<div class="text-center">
<div class="text-center">
<button type="button" class="btn btn-fb btn-outline-primary waves-effect" (click)="doFacebookLogin()" mdbWavesEffect>
<i class="fa fa-facebook left"></i>Facebook</button>
<button type="button" class="btn btn-tw btn-outline-info waves-effect" (click)="doTwitterLogin()" mdbWavesEffect>
<i class="fa fa-twitter left"></i>Twitter</button>
<button type="button" class="btn btn-gplus btn-outline-danger waves-effect" (click)="doGoogleLogin()" mdbWavesEffect>
<i class="fa fa-google-plus left"></i>Google +</button>
</div>
divide the row div in to 3 column divs - col-md-4. Use text-center for the parent div(col-md-4) of each button to solve the issue.
<div class="row">
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B1</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B2</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B3</button>
</div>
</div>