I am trying top align the table within my grid list so all the tables across the rows line up.
I am using layout="column" layout-align="start center"> base on https://material.angularjs.org/latest/layout/alignment#layout-row-layout-align-center-center.
However, it is not still not working, the tables are center align rather than top align.
Any suggestion?
<md-content>
<md-grid-list md-cols="3" md-gutter="1em" md-row-height="2:1" >
<md-grid-tile ng-repeat="user in users" class="curvetable2" layout="column" layout-align="start center">
<md-grid-tile-header class="curvetable3" >
<h3><a style="color:white" ng-click="userCompletedCoursesDisplay(user.username, user.name)">{{user.name}}</a> <a ng-if="user.ismanager == 'yes'" style="color:#ffff99" ng-click="directManager(user.username, user.name)"> Manager - View Team</a></h3>
</md-grid-tile-header>
<div style="width:90%;">
</br></br>
<table style="width:100%;" >
<tr ng-repeat="course in user.course">
<td valign="top"><a ng-click="courseDisplay(course.id, user.username, 'organization')">{{course.name}}</a></td>
<td valign="top">{{course.date}} </td>
</tr>
<tr ng-if="user.more==true">
<td valign="top"><a ng-click="userCompletedCoursesDisplay(user.username, user.name)">Additional Courses</a></td>
</tr>
</table>
</div>
</md-grid-tile>
</md-grid-list>
</md-content>
Related
I have a very little experience developing UI but I wanted to accomplish a task quickly where I have to put a p-table and p-chart elements side by side. I tried to use flex layout as well as float left and right as below but not getting the expected result. How can this be fixed?
<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="50%" class="floatLeft">
<p-table [value]="summaryList" [scrollable]="true" scrollHeight="200px"
[resizableColumns]="true" [style]="{width:'500px'}">
<ng-template pTemplate="caption">
XXX Summary
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-summaryList>
<tr>
<td *ngFor="let col of summaryColumns">
{{summaryList[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="col-md-4 content-section implementation" fxFlex="50%" class="floatRight">
<p-chart type="line" [data]="dailyData" title="XXX Chart" extender="overrideXAxis"></p-chart>
</div>
</div>
You can try doing this.
<div class="container">
<p-table [value]="summaryList" height="200" [scrollable]="true" scrollHeight="100px" [resizableColumns]="true" [style]="{width:'50%', float:'left'} ">
<ng-template pTemplate="caption">
My Awesome Summary
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-summaryList>
<tr>
<td *ngFor="let col of summaryColumns">
{{summaryList[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
<p-chart height="250" [responsive]="false" type="bar" [data]="data" [options]="options" [style]="{width:'48%', float:'right'}"></p-chart>
</div>
then add style to your component.css
.container{
display: flex;
justify-content: center;
align-items: center;
}
Hi I'm trying to obtain responsive menu on navbar in application on which I work with bootstrap 3. My menu has element with bell icon. The purpose of this one is to remind user some information. Below I show that menu element on screen:
I have fixed settings for width of my menu. I'd like to have responsive menu, not static, because this application should work on few screen resolutions. What should I obtain that? I tried to obtain that by pecrentage property for: width, min-with properties, but it has crashed.
Below I show html tags and CSS settings:
Html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
I would be grateful for help. Best regards ;)
You should use #media tags to implement styles. For example
#media (min-width: 1600px) {
#reminder-menu {
...
}
}
It is considered best practice to design for mobile first, so you would use min-width: 540px or whatever your smallest breakpoint is first, then add more breakpoints as needed.
I tried to use bootstrap row and columns classes inside a for each loop and some extra spaces are displayed as unexpected.
First I used the following code and it worked well.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<div class="row">
<tr>
<td style="display: none;" >{{$gemStone->created_at}}</td>
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
<div class="col-sm-3"> free space of 3 cols </div>
<div class="col-sm-3">free space of 3 cols </div>
</td>
</tr>
</div>
#endforeach
</tbody>
</table>
above code gave a view like this image. In order to use the free space marked in the picture, I tried adding another column by creating another <td> ... </td> inside <tr> </tr> using $counter variable as below.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
<?php $count = 0 ?>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<?php $count = $count + 1 ?>
#if($count % 2)
<tr>
<div class="row">
<td style="display: none;" >{{$gemStone->created_at}}</td>
#endif
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
</div>
</td>
#if(!($count % 2))
</div>
</tr>
#endif
#endforeach
#if($count%2)
<td>extra cell when odd</td>
</div>
</tr>
#endif
Result looked like this which is unexpected. I tried changing the place of <div class='row'> and <div class = 'col-s6'>in several ways, but nothing worked. And I couldn't really find a mistake in the code as well . It would be grateful if someone can point where I go wrong while using the columns and row classes.
And I'm using jquery datatables to get the table view.
Add the bootstrap classes to your table elements, instead of adding additional div elements.
<table>
<tr class="row">
<td class="col-md-4">1</td>
<td class="col-md-4">2</td>
<td class="col-md-4">3</td>
</tr>
</table>
I have a data table in my AngularJS application which has many columns where the responsiveness doesn't work anymore. I am currently scrolling the whole way through the data table, which doesn't look good.
I am trying to find a way to freeze some columns on the right side of the data table so that the scroll will be only for the columns on the left. The data tables contain buttons on the right side, so if the buttons are frozen it would be more helpful.
HTML:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<div class="col-md-12">
<div class="widget widget-table action-table" style="overflow:auto">
<!-- /widget-header -->
<div class="widget-content table-container" ng-controller="getTalentController">
<table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
<tr ng-repeat="talent in data">
<td data-title="'#'" style="width:5px">{{ $index+1 }}</td>
<td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
{{talent.employeeNo}}
</td>
<td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
{{talent.fullName}}
</td>
<td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
{{talent.inDate}}
</td>
<td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
{{talent.outTill}}
</td>
<td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
{{talent.account}}
</td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
<div style="border:solid">{{talent.state}}</div>
</td>
<td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
<span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
<span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
</td>
<td data-title="'Resume'">
<a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
</td>
<td data-title="'Reserve'">
<a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
</td>
</tr>
</table>
</div>
<!-- /widget-content -->
</div>
<!-- /widget -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
I would like to freeze the columns on the right side carrying title 'State','Remarks','Resume',and 'Reserve'.
How can I achieve this. I guess the controller code wont be required for this problem. Currently I am creating scroll bar for the table by applying style="overflow:auto" for the outer div.
CSS : https://hastebin.com/wibahuyoxa.cs
Using this code:
<div class="details">
<strong>Publisher:</strong>
<span class="red"><asp:Label ID="LabelPublisher" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Author:</strong>
<span class="red"><asp:Label ID="LabelAuthor" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Year:</strong>
<span class="red"><asp:Label ID="LabelYear" runat="server"></asp:Label></span>
</div>
...text on browser appears like this:
Publisher: publisher1
Author: author1
Year: 2014
Now using CSS I want to shift text like this on each label:
Publisher:---Publisher1
Author:-----Author1
Year:------ 2014
You can give fixed min width to strong tag
.details strong {
display: inline-block;
min-width: 100px;
}
DEMO
You should use a table for displaying text in that way.
Here is an example: http://jsfiddle.net/h8tshvty/
<table>
<tr class="details">
<td><strong>Publisher:</strong></td>
<td class="red">Publishername</td>
</tr>
<tr class="details">
<td><strong>Author:</strong></td>
<td class="red">Author name</td>
</tr>
<tr class="details">
<td><strong>Year:</strong></td>
<td class="red">Yearnumber</td>
</tr>
</table>