no-gutters no-padding not working to reduce gap between Bootstrap columns - twitter-bootstrap-3

I have searched through other Stackoverflow posts with similar issue. After reading them, I upgraded my CDN to Bootstrap 4, but still issue with extra spacing is not resolved. I think it is something to do with the col size maybe.
<div class="row no-gutters no-padding">
<div class="col-sm-10 no-gutters no-padding">
<div class="col-sm-4 pull-left no-gutters no-padding">
<label class="control-label pull-left" for="CS">Contact Stream: </label>
<kendo-dropdownlist id="CS" [data]="CSEntries" style="width:80px"
[textField]="'CS'"
[valueField]="'CSID'"
(valueChange)="onCSEntriesChanged($event)">
</kendo-dropdownlist>
</div>
<div class="col-sm-5 pull-left no-gutters no-padding">
<label class="control-label" for="DateRange">Date Submitted Date Range: </label>
<kendo-daterange>
<label>
<kendo-dateinput kendoDateRangeStartInput [format]="'MM/dd/yyyy'" [(value)]="range.start"
style="width:100px" autoCorrectOn="blur" (valueChange)="onChange($event)"></kendo-dateinput>
</label>
<label>
<kendo-dateinput kendoDateRangeEndInput [format]="'MM/dd/yyyy'"
style="width:100px" autoCorrectOn="blur" [(value)]="range.end"></kendo-dateinput>
</label>
<kendo-daterange-popup>
<ng-template kendoDateRangePopupTemplate>
<kendo-multiviewcalendar kendoDateRangeSelection [format]="'MM/dd/yyyy'" [min]="min" [max]="max">
</kendo-multiviewcalendar>
</ng-template>
</kendo-daterange-popup>
</kendo-daterange>
</div>
<div class="col-sm-1 pull-left no-gutters no-padding">
<button type="button" (click)="dispProjects()" class="btn btn-primary">Display Projects</button>
</div>
</div>
</div>
I also tried adding to css
padding-0 {
padding-right: 0;
padding-left: 0;
}
and then replacing no-gutters no-padding with padding-0, but that doesn't work either. Please guide. here is the screenshot:

There is no no-padding class in Bootstrap 4. Did you mean p-0?
The no-gutters class belongs on the row, not the columns (col-*). Also, columns must be the immediate child of row. Don't nest columns directly inside other columns.

Related

multiple ngbDatepicker in an ngFor loop

I have an array of data which is retrieved from a REST API. The user should be able to manipulate the data. The problem is that when several rows are shown (i.e. data1 array's length is larger than 1), it is the same date in all the #ds input elements. The same goes for all the #de input elements. I have checked the data in the array called data1, and there is no duplicates of dates, so the problem lies within the html. Since the input element that does not use ngbDatepicker works fine, the problem is related to the ngbDatePicker somehow, but I don't know how to solve it.
<form class="form">
<div class="row ml-5 mr-5 mb-2" *ngFor="let dataRow of data1; let in=index;">
<div class="col-12 col-sm mb-2 mb-sm-0">
<input class="form-control form-control-sm" #inpValue value="{{dataRow.fldValue}}" />
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="Start Date" name="ds"
[(ngModel)]="data1[in].inputStartDate" ngbDatepicker #ds="ngbDatepicker"/>
<button class="input-group-addon" (click)="ds.toggle()" type="button">
<img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</button>
</div>
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="End Date" name="de"
[(ngModel)]="data1[in].inputEndDate" ngbDatepicker #de="ngbDatepicker" />
<button class="input-group-addon" (click)="de.toggle()" type="button">
<img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</button>
</div>
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<button class="btn btn-primary btn-block w-100" (click)="saveBtn(dataRow, inpValue.value, dataRow.fldRowID)">Save</button>
</div>
</div>
</form>
This image illustrate the problem:
Shows identical dates, even though the uppermost datarow contains the start-date 1900-01-01 and end-date 2018-02-11

MaterializeCSS - Content showing outside container

I'm using MaterializeCSS for creating layouts, I've got a container which contains 2 rows but any content which is not in column displays outside of container.
Here is my code:-
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">World
<div class="col s12">Hello</div>
</div>
</div>
</div>
And here is how it looks:-
Container Layout
Why is this happening even though my content is inside container and should also display within container boundaries?
Edit:
<div class="add-arena grey lighten-3">
<div class="row">
<div class="col s12 center deep-orange white-text">Add Arena</div>
</div>
<div class="row">
<div class="add-arena-image-holder col s4">
<form action="#">
<div class="file-field input-field col s11">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
<div class="add-arena-description col s8">
<div class="row">
<div class="input-field col s6">
<input placeholder="What will it be called?" id="first_name" type="text" class="validate">
<label for="first_name">Arena Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Arena Number" id="first_name" type="text" class="validate">
<label for="first_name">Arena</label>
</div>
</div>
<div class="row">
<div class="col s3 right">
<a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
</div>
</div>
</div>
</div>
</div>
All content should be in the actual cols as the rows apply negative margins to stretch them to the full width. Always put the content in the col's.
https://codepen.io/anon/pen/EXZzVr
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">
<div class="col s12">Hello World</div>
</div>
</div>
</div>
What exactly do you want to achieve?
Take a look at following lines:
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368

ui-select : set width in Bootstrap grid system

I have a form with a ui-select in a bootstrap grid.
I want my ui-select to be as wide as the input below it.
Here is my code
<div class="col-md-12">
<div class="col-md-6 form-group">
<label class="col-md-4" style="text-align:right;">Pays</label>
<div class="col-md-8">
<ui-select ng-model="adresse.pays" theme="select2" ng-disabled="disabled" ame="pays">
<ui-select-match placeholder="Sélectionnez un pays..." allow-clear>{{$select.selected.nom}}</ui-select-match>
<ui-select-choices repeat="pays in payss | propsFilter: {nom : $select.search}">
<div ng-bind-html="pays.nom | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="col-md-6">
<label class="col-md-4" style="text-align:right;">Mail</label>
<input type="text" class="col-md-3 input-sm"
ng-model="adresse.mail">
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-6">
<label class="col-md-4" style="text-align:right;">Code adresse client</label>
<input type="text" class="col-md-8 input-sm"
ng-model="adresse.codeAdresseClient" name="codeAdresse">
</div>
<div class="form-group col-md-6">
<label class="col-md-4" style="text-align:right;">Interlocuteur</label>
<input type="text" class="col-md-3 input-sm"
ng-model="adresse.interlocuteur" name="interlocuteur">
</div>
</div>
This code produces this:
If someone knows how to do that...
Thanks in advance.
My suggestion is to either
use bootstrap theme (instead of select2), or
simply set width to 100%
Check this plunk: http://plnkr.co/edit/9mI8nO?p=preview
<ui-select ng-model="person.selected" theme="bootstrap">
...
</ui-select>
<ui-select ng-model="person.selected" theme="select2" style="width:100%">
...
</ui-select>
.ui-select-multiple input.ui-select-search {
width: auto !important;
}

Modal dialog with a horizontal form, side by side groups

I'm attempting to render, side by side, form elements within a bootstrap modal dialog. Reason for this is that they're for all intents and purposes the same options, just representing options for different items and the current way it renders for users is basically:
<table>
<tr>
<td><!--Option Group 1--></td>
<td><!--Option Group 2--></td>
<td><!--Option Group 3--></td>
</tr>
</table>
So using the modal dialog example in the Bootstrap 3 documentation combined with the form-horizontal exampl in the Bootstrap 3 documentation plus some use of span to attempt to do a 50% width for each (and hopefully left-to-right tiling of the sections), I came out with:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addLabel">Title of Dialog</h4>
</div>
<form class="form-horizontal" role="form">
<div class="modal-body">
<div class="row">
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add Request</button>
</div>
</form>
</div>
</div>
http://jsfiddle.net/isherwood/3zeMh/
The problem is that somewhere along the way, it is forcing each item to go new line so I have two "forms" that are 50% of the parent width (intentional) that are rendered vertically (not intentional). How can I make the two render side by side?
<div class="span6">
should be
<div class="col-sm-6">
2 times.
http://jsfiddle.net/isherwood/3zeMh/4
It needs a little further cleanup, but that's the primary issue. Here's one possible refinement: http://jsfiddle.net/isherwood/3zeMh/6
I'd probably make the labels wider and keep everything block for mobile, though.

Bootstrap3: right-align labels next to input box (in django 1.5)

I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>