When I add a form to the window is arranged like this:
but I need:
In file: popup.component.html:
<div id="ng2-opd-popup-main"
*ngIf="visible" [ngClass]="mainClass" [ngStyle]="mainStyle">
<div class="row">
<div style="display: inline-block;width:100%">
<div id="ng2-opd-popup-well" [ngStyle]="wellStyle"
class="ng2-opd-popup-well ng2-opd-popup-well-sm">
{{popupService.options.header}}
</div>
</div>
<div style="margin:20px;">
<ng-content></ng-content>
<div *ngIf="popupService.options.showButtons"
style="margin-bottom:20px;margin-top:20px;float: right">
<button id="cancelBtn" [ngClass]="cancelBtnStyle"
type="reset" (click)="confirmNo()">
{{popupService.options.cancleBtnContent}}
</button>
<button id="confirmBtn" [ngClass]="confirmBtnStyle"
(click)="confirmYes()">
{{popupService.options.confirmBtnContent}}
</button>
</div>
</div>
</div>
</div>
When I change line <div style="margin:20px;">on <div style="margin:20px; width:100%"> Nothing happens
The application does not respond to my code changes. What is the problem?
Related
I'm attempting to make a row that will contain 3 columns. One for the pagination count, one to filter a table, and another to hold a button.
Everything looks great in small, medium and large viewports, but when I maximize my window, there is a huge gap on the right above my table. See image below (bottom) for reference.
I'm not sure where I'm going wrong. I've tried every variation of flex-fill, w-100, etc. that I can think of to get it to expand to 100% width on xl viewports, but I can't figure it out.
Here's the relevant code for that section that sits above the table:
<div class="col">
<div class="container no-padding">
<div class="row mt-1">
<div class="col d-none d-md-block no-padding">
<p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
</div>
<div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
<div class="container">
<div class="row">
<div class="col m-0 p-0 mr-2">
<form class="form-inline">
<div class="input-group">
<input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
</div>
</form>
</div>
<div class="no-padding">
<a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController#index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit:
Here's the code from my template. Code above is part of #section('content') which gets output to and parsed by #yield('content') below.
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4>
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content') <!--this is where the original code appears-->
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>
not sure if this is what you want achieve but, i tried my best to make it look like what you desire, let me know if is really this: https://jsfiddle.net/leandrorr/t4rbfdv3/6/
html:
<div class="result-count p-4 border">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
Showing 1-20 of 32 total
</div>
<div class="col-lg-6">
<form action="" class="form-inline float-right">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
</div>
</div>
I have what I call a tricky problem. I want to align two buttons with the panel-title and have them justified right. However, when I put them in I get this:
https://jsfiddle.net/mwoods98/fo58qswn/3/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3><span class="pull-right" style="position: relative;top: -110%;"><button class="btn btn-primary pull-right" type="button"><span class="pull-right" style="position: relative;top: -110%;">Print Summary</span> <button class="btn btn-primary" type="button">Print Label</button></button></span>
</div>
</div>
</div>
</div>
</body>
</html>
The result I want is the buttons aligned on the same line as the title.
Thanks!
You can set the position of buttons absolute :
<span class="pull-right" style="position: absolute;top: 2px;right: 21px;">
<button type="button" class="btn btn-primary pull-right">Print Summary</button>
<button type="button" class="btn btn-primary">Print Label</button>
</span>
https://jsfiddle.net/xewLs6t2/
Another solution can be something like that:
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="height: 40px;">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3>
<div style="margin-top: -25px;" class="pull-right">
<button type="button" class="btn btn-primary">Print Summary</button>
Print Label
</div>
</div>
</div>
</div>
</div>
I want to different order on Desktop and on mobile,
Currently this is the order
On Med+ :
On small:
Desktop is good. This is the right position.
On mobile I want the picture to come below the button and the test.
I have tried order-sm-fist and order-sm-last and also order-1 until order-2 but nothing seems to change. Not sure what I am doing wrong:
<section class="feature section">
<div class="container">
<div class="row">
<div class="heading">
<h2>Try it now!</h2>
</div>
<div class="col-md-5 order-md-last">
<img src="The image url is here"
class="" id="generated-monKey" alt="">
</div>
<div class="col md-2 order-md-1">
<br>
</div>
<div class="col-md-5 order-md-first text-center">
<p>Enter a Banano wallet address and press the "Generate monKey" button.</p>
<br>
<p>If you do not have a Banano wallet you can create one in BananoVault or simply generate a random Banano
wallet address.</p>
<br>
<div class="container">
<input type="text" class="form-control form-rounded" placeholder="Banano Address" maxlength="64" size="65">
<br>
<div class="container">
<div class="row">
<form>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Accessories</label>
</div>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Background</label>
</div>
</form>
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-lg btn-success form-rounded" border>Generate monKey</button>
<br>
<br> Monkeys are perfect for avatars. Click on the monKey image in order to download it.
</div>
</div>
</div>
</section>
In this example I changed the md to first and last which means even on Desktop I should see the image on the right and the text on the left and yet nothing changes.
Your HTML structure is so messy. Here are my 2 cents:
No nested container
cols should come right after row.
What's up with the missing - on col md-2? And why do you need a column wrapping a <br>?
Cleaned up HTML structure
<section class="feature section">
<div class="container">
<div class="heading"></div>
<div class="row">
<div class="col-md-6">
<form />
</div>
<div class="col-md-6 order-md-first">
<img />
</div>
</div>
</div>
</section>
fiddle: http://jsfiddle.net/aq9Laaew/144878/
I want to have a searchbox on the right next to another container with pull-left:
<div>
<div class="pull-left"><span>SOME TEXT</span></div>
<div class="pull-right">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="txtSearch">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Bootply link:
LINK
It does not work the intended way.
If you are using the grid, you don't need the pull-right class.
As for your example, some text is given col-*-8 and your search bar is given col-*-4 it will place your search in the right.
<div class="container">
<div class="row">
<div class="col-*-8">
Some Text
</div>
<div class="col-*-4">
BUTTON
</div>
</div>
</div>
This Documentation and this video are really informative and you can anytime check the Bootstrap Official Grid Documentation.
Here is the Solution.
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.