I have an angular app , and have integrated angular-ui-bootstrap , my issue is that the dropdown links are are being blocked by table row , using z-index :
<div class="panel panel-default">
<div class="panel-body">
<div class=" pull-right">
<!-- Split button -->
<div class="btn-group invoice_new_item_btn_ul" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger"> Add Item </button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="invoice_new_item_btn_ul uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped" >
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>Type</th>
</tr>
</thead>
<tbody id="search_result">
<tr class="odd gradeX" ng-repeat="u in vm.patient.patient_finance_item">
<td></td>
<td ng-bind="u.item_name"></td>
<td ng-bind="u.item_type"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The css/sass :
.invoice_new_item_btn_ul{
z-index:1000 !important;
}
uib-dropdown-menu only works as an attribute, not a class, which is why your drop down menu is not displaying.
https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L285-L287
Related
I'm working with .Net Core 6 and currently I have problems to make it works the elements with tag helpers.
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Category List</h2>
</div>
<div class="col-6 text-end">
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
</div>
</div>
<br /><br />
<table class="table table-bordered table-striped" style="width: 100%;">
<thead>
<tr class="table-primary" ">
<th scope="row">Category Name</th>
<th scope="row">Display Order</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var category in Model)
{
<tr>
<td width="50%">#category.Name</td>
<td width="30%">#category.DisplayOrder</td>
<td>
<div class="w-75 btn-group" role="group">
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
Here the first anchor works perfectly,
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
But when I'm using the next one, and I run the application, the navigator does not recognize the tag and does not create automatically the sintax to add the href tag.
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
After testing, I finally found the reason.
The problem is with this line of code:
<tr class="table-primary" ">
It has one more ".
Remove it, the href will be displayed normally.
<tr class="table-primary">
I have a v-data-table with table headers and the styling is inside the .vue component. When I use the following style
.v-data-table-header th {
white-space: nowrap;
}
Nothing happens to the table headers. I have also tried other css like background and text colors and nothing is happening. I checked the dev tools and there are definitely th elements and it doesn't seem like the style is being overridden by anything since it's not even showing up in the styles tab of the dev tools. If i just use .v-data-table-header the style is applied. What could be going on here?
edit:
here is the vue code
<v-expansion-panel>
<v-expansion-panel-header>
Example header
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-data-table
:headers="someHeaders"
:items="someItems"
/>
</v-expansion-panel-content>
</v-expansion-panel>
Here is the html for the table:
<div class="v-expansion-panel-content__wrap">
<div data-v-7037ec41="" class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table__wrapper">
<table>
<colgroup>
<col class="">
<col class="">
<col class="">
</colgroup>
<thead class="v-data-table-header">
<tr>
<th role="columnheader" scope="col" aria-label="Name: Not sorted. Activate to sort ascending."
aria-sort="none" class="text-start sortable"><span>Name</span><i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;">arrow_upward</i></th>
<th role="columnheader" scope="col" aria-label="Path: Not sorted. Activate to sort ascending."
aria-sort="none" class="text-start sortable"><span>Path</span><i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;">arrow_upward</i></th>
<th role="columnheader" scope="col"
aria-label="Message: Not sorted. Activate to sort ascending." aria-sort="none"
class="text-start sortable"><span>Message</span><i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;">arrow_upward</i></th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="text-start">r3_ibmmq_jms_0.1</td>
<td class="text-start">Routes/MICROSERVICE</td>
<td class="text-start">cMQConnectionFactory component
"cMQConnectionFactory_1":MQTT_RECONNECT_DELAY of cMQConnectionFactory was changed to 10</td>
</tr>
<tr class="">
<td class="text-start">r4_ibmq_jms_job_0.1</td>
<td class="text-start">Routes/MICROSERVICE</td>
<td class="text-start">cMQConnectionFactory component
"cMQConnectionFactory_1":MQTT_RECONNECT_DELAY of cMQConnectionFactory was changed to 10</td>
</tr>
</tbody>
</table>
</div>
<div class="v-data-footer">
<div class="v-data-footer__select">Rows per page:<div
class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted v-select">
<div class="v-input__control">
<div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-101"
class="v-input__slot">
<div class="v-select__slot">
<div class="v-select__selections">
<div class="v-select__selection v-select__selection--comma">10</div><input
aria-label="Rows per page:" id="input-101" readonly="readonly" type="text"
aria-readonly="false" autocomplete="off">
</div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--append"><i aria-hidden="true"
class="v-icon notranslate material-icons theme--light">arrow_drop_down</i>
</div>
</div><input type="hidden" value="10">
</div>
<div class="v-menu">
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="v-data-footer__pagination">1-2 of 2</div>
<div class="v-data-footer__icons-before"><button type="button" disabled="disabled"
class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
aria-label="Previous page"><span class="v-btn__content"><i aria-hidden="true"
class="v-icon notranslate material-icons theme--light">chevron_left</i></span></button>
</div>
<div class="v-data-footer__icons-after"><button type="button" disabled="disabled"
class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
aria-label="Next page"><span class="v-btn__content"><i aria-hidden="true"
class="v-icon notranslate material-icons theme--light">chevron_right</i></span></button>
</div>
</div>
</div>
</div>
I figured out the issue. The vue component was using 'scoped' styles which stops styling from applying to child components. I removed the scoped from <style scoped> and now it works as expected.
I want a "large" table to be beautiful in both mobile devices and desktop. Without x-scrolling.
One way, I think, is to create a table row which is high (two rows, with rowspan=2).
But is there a smoother and more good-looking way to make this? This example below is okay, but I still think it's possible to make the result more clean and nicer.
One problem is also that I can't use ant filter plugins and pagination, as the scripts think that one row is two rows.
Any ideas?
<div class="container">
<div class="table-responsive">
<table class="table">
<tbody>
<tr class="bg-danger">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Christian A</h4></div>
</td>
<td>
<h4 class="pull-right">133 €</h4></td>
</tr>
<tr class="bg-danger">
<td colspan=2>
2014-05-05 - Not paid
</td>
</tr>
<tr class="bg-success">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Nicolaus S</h4></div>
</td>
<td>
<h4 class="pull-right">122 €</h4></td>
</tr>
<tr class="bg-success">
<td colspan=2>
2014-05-05 - Payed
</td>
</tr>
</tbody>
</table>
</div>
</div>
http://jsfiddle.net/weuf6vb3/
I am displaying my modal with angularjs and here is the template:
<div class="modal-lg" modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Cihaz Listesi - {{deviceCount}}</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 table-responsive">
<table st-table="devices" st-safe-src="displayedDevices" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>IMEI-1</th>
<th>IMEI-2</th>
<th>MSISDN</th>
<th>Yeni IMEI-1</th>
<th>Yeni IMEI-2</th>
<th>Durum</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="device in devices" ng-click="selectRow(device.ItsRepairImeiListId)" st-select-row="device" st-select-mode="multi">
<td>{{device.Imei1}}</td>
<td>{{device.Imei2}}</td>
<td>{{device.Msisdn}}</td>
<td>{{device.NewImei1}}</td>
<td>{{device.NewImei2}}</td>
<td>{{device.Status.StatusDescription}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="10" colspan="7"></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button ng-show="selectedRows.length > 0" class="btn btn-success" ng-click="activateSelected()">Aktif Et</button>
<button class="btn btn-default" ng-click="cancel()">Kapat</button>
</div>
</div>
class="modal-lg" is supposed to make the modal larger but here is what it looks like after using it:
What should I do to make both the content the container grow together ?
Türkmüsün :D table a width 100% ata telefondayım net olarak bakamıyorum şu an sonra döneceğim sana
.tabloSinifim {
Width:100%;}
Attribute olarakta atayabilirsin.
Below Pasted Code is working great on Chrome and Firefox but latest IE versions are not showing accordion-toggle collapse.
Chrome and FF Screenshot : https://drive.google.com/file/d/0BwCdx1TYINUsQjIwdnlhVDN5eGM/view?usp=sharing
How it appears on IE:
https://drive.google.com/file/d/0BwCdx1TYINUsajE5eExicmlaejg/view?usp=sharing
<div class="panel-collapse" collapse="!client.isDaySelected">
<div class="panel-body container-fluid">
<div class="col-lg-12">
<div class="panel panel-default" >
<div class="panel-heading">Select Goal/Allowable services for Data Collection</div>
<div class="panel-body">
<div class="pull-right">
<button type="button" class="btn btn-default btn-md" ng-click="">Absences</button>
<button type="button" class="btn btn-default btn-md" ng-click="hospitialization()">Hospitialization</button>
</div>
<br />
<div style="overflow-x:scroll;width:100%;">
<table class="table table-condensed table-responsive" style="border-collapse: collapse;">
<thead>
<tr>
--table headers
</tr>
</thead>
<tbody ng-repeat="service in serviceDetails">
<tr>
<td>
<button data-toggle="collapse" data-target="#tr_{{service.ResHabOutId}}" class="accordion-toggle btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
-- some more tds
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="tr_{{service.ResHabOutId}}" ng-if="service.lstDataCollectionSummary.length">
<table class="table table-striped" style="outline: 1px solid black;">
<thead>
--some rows
</thead>
<tbody>
--some rows
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
If you notice I have ng-repeat on tbody ( for Simplicity) because I want to display data on per goal basis.
If needed I can paste in the links and js references for your review.
Any help ?