I am using a panel within that panel I am using div's with list-group ofcourse it will stack evantually but I want it that is has a horizontal scroll bar. I already tried using overflow this is not succesfully.
Shown below is the code that I am using:
<div class="row">
<div class="col-md-12">
<div class="panel panel-flat ">
<div class="panel-heading">
<h6 class="panel-title">Gebruikers</h6>
<div class="heading-elements">
<ul class="icons-list">
<li><a data-action="collapse"></a></li>
</ul>
</div>
</div>
<div class="panel-body ">
#foreach($permlist as $list)
<div class="col-md-3" >
<div class="content-group">
<h6 class="text-semibold heading-divided"><i class="icon-folder6 position-left"></i>
{{$list->name}} </h6>
<div class="list-group no-border">
#foreach($permreq as $request)
#if($request->state == $list->short_name)
<a href="{{route('permission.manage.details.user', $request->id)}}" class="list-group-item ">
<i ></i>{{ $request->requester }} voor {{$request->name}}
#if(isset($request->tags))
#foreach(json_decode($request->tags) as $tag)
#foreach($permlabel as $label)
#if($label->short_name == $tag)
<span class="label" style="background-color: {{$label->color}}"> </span>
#endif
#endforeach
#endforeach
#endif
</a>
#endif
#endforeach
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
Related
I have two divs [one is upper | second is lower]. Both can fetch data from database and make accordingly number of divs. lower div is default hidden. I want to show lower div when I click upper div. jquery code that i make is here. Need your help.
Note. Show only current active lower div. All other lower divs must hidden. to do this
<!---upper div section--->
<?php
$id=1;
while ($comp_post_info=mysqli_fetch_array($query))
{
?>
<div class="container-fluid">
<div class="row">
<div class="upperdiv container-fluid mb-5">
<div class="row">
<div class="col-md-1 pdl-3">
<i class="fa fa-circle"></i>
</div>
<div class="col-md-11">
<div class="container-fluid">
<div class="row jlist" id="addbg">
<div class="col-md-4">
<img src="/my_brands/brand.png" alt="" class="cust-em">
<h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['coun'] ?>
<p><small>Location</small></p>
</h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['saly'] ?>
<p><small> Saly</small></p>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----lowerdiv--->
<div class="lowerdiv container-fluid hideme" id="mydiv" >
<div class="row pt-4 padl-5">
<h6>Other Prepositions <small>for gle</small></h6>
</div>
<div class="row">
<div class="col-md-11 offset-md-1">
<div class="container-fluid">
<div class="row sub_lowerdiv pt-2">
<div class="col-md-4">
<i class="fa fa-circle"></i>
<h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['count'] ?>
<p><small>Location</small></p>
</h6>
</div>
<div class="col-md-4">
<h6>
<?php echo $comp_post_info['saly'] ?>
<p><small>Saly</small></p>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
** <script>
$(document).ready(function(){
$(".upperdiv").on("click",function(){
var currentselect = $(this).('.lowerdiv');
$(".lowerdiv").not(currentselect).hide();
currentselect.show();
});
});
</script> **
enter code here
Use closest to find the parent (I have added parent class .parent-div) and then use nextAll to find the first lowerdiv.
See the Snippet below:
$(document).ready(function(){
$(".upperdiv").on("click",function(){
var currentselect = $(this).closest(".parent-div").nextAll('.lowerdiv').first(); /* Look I've added find */
$(".lowerdiv").not(currentselect).hide();
currentselect.show();
});
});
.lowerdiv{
display: none;
margin-left: 15px;
}
.upperdiv{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 1
</div>
</div>
</div>
<div class="lowerdiv">
Lower 1
</div>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 2
</div>
</div>
</div>
<div class="lowerdiv">
Lower 2
</div>
<div class="parent-div container-fluid">
<div class="row">
<div class="upperdiv">
Upper 3
</div>
</div>
</div>
<div class="lowerdiv">
Lower 3
</div>
I need to make an index view for my posts, and I choose a photo gallery for that.In my controller I have paginate set at 10.Unfortunately, my column is divided by one, horizontally : https://imgur.com/a/8sUm5eb .
I want to make this to be divided by 2 columns, 5 items/column.Can you give me a little help with that?Thank you.
My view
<!-- Promo Block -->
<div class="container g-pt-100 g-pb-70">
<!-- News Section -->
<div class="u-heading-v3-1 g-mb-30">
<h2 class="h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Latest News</h2>
</div>
#foreach($posts as $post)
<div class="masonry-grid-item col-sm-6 g-mb-30">
<!-- Blog Background Overlay Blocks -->
<article class="u-block-hover">
<div class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
<img class="d-flex align-items-end u-block-hover__main--mover-down" src="/storage/{{ $post->image }}" alt="Image Description">
</div>
<div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
<div class="u-block-hover__visible g-pa-25">
#foreach($post->tags as $tag)
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $tag->name }}</span>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
#endforeach
<h2 class="h4 g-color-white g-font-weight-600 mb-3">
<a class="u-link-v5 g-color-white g-color-primary--hover g-cursor-pointer" href="/post/{{ $post->id }}">{{ $post->caption }}</a>
</h2>
<h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
By,
<a class="g-color-white-opacity-0_7 text-uppercase" href="/post/{{ $post->id }}">{{ $post->user->username }}</a>
</h4>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->created_at->diffForHumans() }}</span>
<span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">·</span>
<span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->comments()->count() }} comments</span>
</div>
<a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="/post/{{ $post->id }}">Read more</a>
</div>
</article>
<!-- End Blog Background Overlay Blocks -->
</div>
#endforeach
</div>
</div>
<!-- End News Section -->
Make your first foreach like this
<div class="row">
Your foreach
</div>
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 am trying to show the screen like in the image
list inside a container
the problem is the whatever I do, the list is on the bottom of the container like here
the HTML:
<div class="container" ng-init="getCartItems()">
<div class="hidden-xs">
<div class="">
<div class="title">סיכום הזמנה</div>
</div>
</div>
<div class="row">
<div ng-include="'templates/cart.html'"></div>
<div class="subTotalTabs">
<div class="col-md-3 col-xs-12">
<ul class="list-unstyled text-center">
<li>הוספת מבצע</li>
<li><a ng-click="addToCart()" class="clickable btn btn-lg borderBox padTop5 padBtm5 f22">הוספת פיצה</a></li>
<li>הוספת שתייה</li>
<li>מוצרים נלווים</li>
<li><a ng-click="clearCart()" class="my-btn-sqr my-btn-sqr-danger padTop5 padBtm5 f22">רוקן עגלה</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /row -->
</div>
How can I fix this? Thanks!
`
i am trying to add a button to the heading, but i cant figure that out.
It now looks this way:
The button should be at the light grey part at the right side of the "name". The code i am having now is:
<div class="panel panel-default bg-white nopadding">
<div class="panel-heading">
<div class="col-md-4">
<h3 class="text-uppercase text-faded">
<?php echo $info['c_name'];?>
</h3>
</div>
<div class="col-md-4">
<div class="input-group">
<div id="addcinfo" class="btn btn-success" name="search1">Redigera</div>
</div>
</div>
</div>
</div>
What do i am doing wrong?
The webpage is: http://109.74.0.128/~sarath/admin
username: Jonathan#inkhousemedia.se
pw: John#123
Go on "Kund" and search for saurav and you will see the error
Use below code:
<div class="panel panel-default bg-white nopadding">
<div class="panel-heading">
<h3 class="text-uppercase text-faded" style="float: left;"><?php echo $info['c_name'];?></h3>
<div class="input-group" style="padding: 5px 0 5px 20px">
<div name="search1" class="btn btn-success" id="addcinfo" >Redigera</div>
</div>
</div>
</div>
Add button class to your heading tag
<h1 class="btn btn-primary">Heading</h1>