i have two div columns in a row. i want the height of the left column to match that of the right column. In the first image is my desired state. But if the height of the right column changes, the height of the scrollable div should also be changed.
the reason is the height in px defined in the css, but i want to make that dynamical. how can i do that? Picture two shows my problem.
I would be glad about help :D
<div id="{{ project.RowKey }}" class="collapse" aria-labelledby="heading{{ project.RowKey }}">
<div class="card-body">
<div class="row">
<div class="col w-50 m-2">
<h6 class="row w-100">
Kommentare :
<div class="ml-2"><span
class="badge badge-pill badge-primary">{{ project.numberComments }}</span>
</div>
</h6>
<div class="row w-100">
<div class="w-100">
<!-- comments -->
<div class="" style="width:100%;height:200px;float:left;overflow-y:scroll;">
</div>
<!-- new comment -->
<form id="view_selection_form" action="{{ url_for('save_comment') }}"method="POST">
</form>
</div>
</div>
</div>
<!-- status -->
<div class="col w-50 m-2">
<h6>Details zum Status: </h6>
<div class="">
</div>
<div class="d-flex justify-content-end">Zuletzt geändert
von: {{ project.answers.last_changed_by.name }} |
{{ project.answers.last_changed_by.date }}
</div>
</div>
</div>
</div>
</div>
You can use display:flex; on the parent div and that makes the column divs to stretch till the parent div. Now restrict the height in parent div.
Check this example : https://codepen.io/AravinthAro/pen/ZEexPWv
Related
I am trying to figure out how to display my divs on a single row and change their width.
If the image div doesn't exist, the description div should have width: 100% (or in my case col-12).
How can I change the width?
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div class="col-9">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Use ngClass directive and set classes conditionally.
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div [ngClass]="(update.imageUrl)?'col-9':'col-12'">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Here is the reference.
I want to make a form and centre the items horizontally, but I did not manage to do this. https://i.stack.imgur.com/3DD5X.png
This is my code (everything is centered besides the form fields):
<div class="card top-buffer">
<h5 class="card-header">Status</h5>
<div class="card-body align-items-center d-flex justify-content-center">
<div class="container align-items-center">
{% if Status[![enter image description here][1]][1]%}
<div class="row justify-content-center">
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Running</span>
</div>
</div>
<div class="row justify-content-center">
<p>Running</p>
</div>
{% else %}
<div class="row justify-content-center">
❌ Error
</div>
{% endif %}
<div class="row justify-content-center">
{{ form(notificationForm) }}
</div>
<div class="row justify-content-center">
<p><i>Note: There might be a delay between status changes</i></p>
</div>
</div>
</div>
</div>
In the Browser it looks like this:
I tried different css things like
display: inline-block;
margin-left: auto;
margin-right: auto;
But that did not work
I can't comment so I will answer this way.
I will give an example of what's happening:
<div class="row justify-content-center"> <!-- It tells to center what's inside -->
<form> <!-- Form will center, but don't pass it to what's inside of it -->
<input> Something </input> <!-- This one it's not centered because form don't tell it to -->
</form>
The parent <div class="row justify-content-center"> only says to direct children <form> to center. So the children of <form> won't.
I know you are using bootstrap or something like that, but you can understand better from here
Can you style this form {{ form(notificationForm) }}?
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/
I have two divs in a parent component. And there are cards (components rendered in divs) in each of the above two divs. Each card has got a list of employees (also divs) from which I want to drag any across other cards within their own parent div.
Below image shows how my page look like:
I want the page to be able to drag employees within Pickup or Drop. For eg: move Employee1 from {Place1 To Place2} to {Place3 To Place2} I have used cdkDropList/cdkDrag, however I could not drag anything at all.
Below is my html for parent component with the Pickup & Drop divs:
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Pickup</h5>
</div>
</div>
<!-- Pickup DIV -->
<div class="row" cdkDropListGroup>
<div class="col col-md-4" *ngFor="let item of pickupCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
(cdkDropListDropped)="onDrop($event)">
<app-admin-special-request-allocation-card [allocatedCab]="item"
(childevent)="onSpecialRequestReallocation($event)" cdkDrag>
</app-admin-special-request-allocation-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Drop</h5>
</div>
</div>
<!-- Drop DIV -->
<div class="row" cdkDropListGroup>
<div class="col col-md-4" *ngFor="let item of dropCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
(cdkDropListDropped)="onDrop($event)">
<app-admin-special-request-allocation-card [allocatedCab]="item"
(childevent)="onSpecialRequestReallocation($event)" cdkDrag>
</app-admin-special-request-allocation-card>
</div>
</div>
Below is my html for the individual cards/routes (app-admin-special-request-allocation-card.component.html)
<div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2">
<div class="card-body text-center">
<div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert"
*ngIf="isAllocated">{{message}}</div>
<div class="row">
<div class="col text-right">
<span><b>{{allocatedCab.AllocationStatusText}}</b></span>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'></i>
<br>
<b>{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}</b>
<p><b><span>{{allocatedCab.RouteType}}</span></b></p>
</div>
<div class="row">
<p><b><span>{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}</span></b></p>
</div>
<div class="row">
<p style="text-align: left"><b><span>{{allocatedCab.VendorName}} -
{{allocatedCab.CabName}} - {{allocatedCab.RegNo}}</span></b></p>
</div>
<!-- employee list -->
<div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees">
<p style="text-align: left"><span class="fa fa-user"></span>
<a href="./admin#" (click)="open(content,allocatedCab,employee)">
{{employee.FirstName}} {{employee.LastName}} -
<small> {{employee.PickupDate | date: "hh:mm a"}} </small>
</a>
<i style="color:red; cursor: pointer;" class="fa fa-remove"
(click)="openConfirmation(content1, employee)"></i></p>
</div>
</div>
<div class="row">
<div class="col-md-6 pt-2 text-left ">
<span>{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}</span>
</div>
</div>
</div>
</div>
I think there is a mistake in your code. The cdkDropList attribute is placed in the wrong div. And the cdkDrag attribute should be given to the exact div which can be draggable. So only give cdkDropListGroup attribute in parent div and place cdkDropList attribute inside the card component. ie.
You don't need cdkDropList attribute and the following code in that element in your parent div (Pickup and Drop).
Instead, add it in app-admin-special-request-allocation-card.component.html to a new wrapping div over the employee list div.
Add the cdkDrag attribute to exact div in which employee name is rendered.
try the below code.
Parent Component
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Pickup</h5>
</div>
</div>
<div class="row" cdkDropListGroup>
<!-- remove the 'cdkDropList' attribute and [cdkDropListData]=" from below div -->
<div class="col col-md-4" *ngFor="let item of pickupCabs">
<app-admin-special-request-allocation-card [allocatedCab]="item" (childevent)="onSpecialRequestReallocation($event)">
</app-admin-special-request-allocation-card>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 class="bg-primary text-white">Drop</h5>
</div>
</div>
<div class="row" cdkDropListGroup>
<!-- remove the 'cdkDropList' attribute and [cdkDropListData]=" from below div -->
<div class="col col-md-4" *ngFor="let item of dropCabs">
<app-admin-special-request-allocation-card [allocatedCab]="item" (childevent)="onSpecialRequestReallocation($event)">
</app-admin-special-request-allocation-card>
</div>
</div>
Card Component
<div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2">
<div class="card-body text-center">
<div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert" *ngIf="isAllocated" >{{message}}</div>
<div class="row">
<div class="col text-right" >
<span><b>{{allocatedCab.AllocationStatusText}}</b></span>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'></i>
<br>
<b>{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}</b>
<p><b><span>{{allocatedCab.RouteType}}</span></b></p>
</div>
<!-- Add the cdkDropList attribute and drop list data here -->>
<div class="col-md-9 border-bottom" cdkDropList [cdkDropListData]="allocatedCab.AssignedEmployees" (cdkDropListDropped)="drop($event)">
<div class="row">
<p><b><span>{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}</span></b></p>
</div>
<div class="row">
<p style="text-align: left"><b><span>{{allocatedCab.VendorName}} - {{allocatedCab.CabName}} - {{allocatedCab.RegNo}}</span></b></p>
</div>
<!-- Add cdkDrag attribute here -->>
<div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees" cdkDrag>
<p style="text-align: left"><span class="fa fa-user"></span>
<a href="./admin#" (click)="open(content,allocatedCab,employee)">
{{employee.FirstName}} {{employee.LastName}} -
<small> {{employee.PickupDate | date: "hh:mm a"}} </small>
</a>
<i style="color:red; cursor: pointer;" class="fa fa-remove" (click)="openConfirmation(content1, employee)"></i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 pt-2 text-left ">
<span>{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}</span>
</div>
</div>
</div>
</div>
It is not mandatory to give cdkDropListGroup and cdkDropList in the same component. When the above code is rendered in the browser, the structure of the cdkDropListGroup and cdkDropList will be set as parent and child relation. So I hope, you may get what you require.
I'm ussing Bootstrap4.
I have a row with 2 col-md-6 (these make up to 12 cols for the row).
However, my left col has an extra margin that I don't need/want. You can see it in the following image as the purple margin.
How can I get rid of it?
html:
<header class="my_header_bg_color">
<br>
<br>
<div class="row margin_right_zero">
<div class="col-md-6">
<div class="my_custom_banner_left">
<p class="my_title_banner">Stickers<br>personalizados</p>
<p>Fáciles de ordenar por internet, diseño de conceptos gratis, envíos rápidos </p>
<div class="row">
<div class="col-md-6">
Comprar
</div>
<div class="col-md-6">
<a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 ml-auto">
<img src="{% static 'img/banner-home2.png' %}">
</div>
</div>
</header>
Update 1:
Apparently it goes all the way down to the footer.
As far as I know, Bootstrap automatically sets left and right margin for row and container elements to -15px. Using simple CSS and setting left and right margin for those elements to 0 should fix your problem. If you want pure HTML (no CSS) solution I'm not aware that it exists.