What does the "let-modal" tag do? - ng-bootstrap

So, I've been using a basic ng-bootstrap modal for an Angular app.
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title"></h4>
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="dateOfBirth">Date of birth</label>
</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>
To work, it needs the let-x tag, which then that x it used to control functions like dismiss and close. Why is that? Why can't an instance of Ngb-Modal handle these things? And most importantly, how does this all work?

Related

Blazor output data in html wrong encode

The result on html viewsource:
<div class="content px-4">
<div class="d-flex flex-row bd-highlight mb-3">
<button class="btn btn-dark mr-2">Sài Gòn</button>
<button class="btn btn-dark mr-2">Hà Nội</button>
<button class="btn btn-dark mr-2">Vũng Tàu</button>
<button class="btn btn-dark mr-2">Đà Lạt</button>
</div>
<div class="d-flex flex-row bd-highlight mb-3">
<button class="btn btn-dark mr-2">Quận 1</button>
<button class="btn btn-dark mr-2">Quận 2</button>
<button class="btn btn-dark mr-2">Quận 10</button>
</div>
The result on front is ok
I dont know why this happend, and is this bad for SEO ?

Google will decode HTML encoded characters when building its search indexes, so this won't affect your SEO.
https://webmasters.stackexchange.com/questions/104072/do-characters-encoded-as-html-entities-affect-seo
As for why it happens. It does seem quite odd. Perhaps you should raise it as a bug here https://github.com/dotnet/aspnetcore/issues

modal vertical position center

1.How to put a modal in the center?
2.Using Angular 2/4 with html5,JS and css!
<ng-template #content let-c="close">
<div class="modal-header">
<h4 class="modal-title">Deseja excluir definitivamente?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" title="Confirmar Ação" (click)="c('Close click')" (click)="deleteUser(user)">Confirmar</button>
<button type="button" class="btn btn-secondary" title="Cancelar Ação" (click)="c('Close click')">Cancelar</button>
</div>
</ng-template>

<ng-template #content let-c="close">
<div class="modal-header">
<h4 class="modal-title">Deseja excluir definitivamente?</h4>
</div>
<!--add this in start here--><div class="modal-body">
<p>Some text in the modal.</p><!--end here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" title="Confirmar Ação" (click)="c('Close click')" (click)="deleteUser(user)">Confirmar</button>
<button type="button" class="btn btn-secondary" title="Cancelar Ação" (click)="c('Close click')">Cancelar</button>
</div>
</ng-template>

AS per your requirement your modal should be in fixed height, so based on that you can set top margin and other css.
OR
You have to calculate modal height after DOM/HTML render in your modal body and then again apply some calculation logic and set top-margin from back end.

Bootstrap3 set only the width of input text in input-group

Using bootstrap3 I would like to set the width of the input type="text" in the input-Group.
I found these two solutions, but in this way I set the total width of all elements and not only the input text width.
.paginator {
width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="paginator">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
bootply
How do I set only the width of the text input with bootstrap?
Thank you
-- EDIT --
I tried to set an inline class for text input as suggested, but this is the result.
bootply edit
Nobody can help me?
Thanks

Searchbar doesn't show up correctly - bootstrap & rails

I am trying to put a search bar with three buttons on my site. The buttons represent 3 different searches (so they will be more like toggles).
I tried this code, but the output wasn't as expected:
<div class="row search-row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
<input id="file-button" src="text.png" type="image"></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-file"></span>
</button></span><input class="form-control" type="text"><span class="input-group-btn"><button class="btn btn-default" type="button" value="Go"></button></span>
</div>
</div>
</div>
Here is a screen shot, the top is unedited, the bottom is me trying to call attention to the issues:
How do I get the buttons and the text to all look like the same input (flush with no bumps)?

This code fixes it:
<div class="container">
<div class="row search-row">
<div class="container col-lg-6">
<div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span></button><button class="btn btn-default" type="button">
<input id="file-button" src="text.png" type="image"></button><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-file"></span>
</button></span><input class="form-control" type="text"><span class="input-group-btn"><a class="btn btn-default go-search" href="#">Go</a></span>
</div>
</div>
</div>
</div>
Screenshot:
Basically, there should be one button group span for all the buttons on the left. I changed the "go" button to be a link since thats what I really need it to be anyway.

Making button go full-width?

I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?

Bootstrap v3 & v4
Use btn-block class on your button/element
Bootstrap v2
Use input-block-level class on your button/element

Why not use the Bootstrap predefined class input-block-level that does the job?
Full-Width Button <!-- BS2 -->
Full-Width Button <!-- BS3 -->
<!-- And let's join both for BS# :) -->
Full-Width Button
Learn more here in the Control Sizing^ section.

Bootstrap / CSS
Use col-12, btn-block, w-100, form-control or width:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>

In case some are noticing btn-block not working anymore in bootstrap 5.1+:
It was dropped in bootstrap 5.1 (changelog):
Breaking Dropped .btn-block for utilities. Instead of using .btn-block
on the .btn, wrap your buttons with .d-grid and a .gap-* utility to
space them as needed. Switch to responsive classes for even more
control over them. Read the docs for some examples.
You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
Source: https://getbootstrap.com/docs/5.1/examples/pricing/
If you want to make a stack of block buttons, the official docs recommend the following :
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons

I simply used this:
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

use
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
see: http://getbootstrap.com/components/#btn-groups-justified

You should add these styles to a CSS sheet
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.

In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row"><div class=" col-5 ">
<a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a>
</div><div class="col-5 ">
<a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a>
</div></div>

I would have thought this would be the most bootstrap-esque way of doing things:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12 to the button.

<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.

Update 2022:
You have multiple ways to make button full width.
You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>

We can Use a Block Level Full-Width Button
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level button
</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>

Resources