When I add buttons to my Angular Datatables, it creates them with default themeing, which is causing the buttons to look different from the rest of my page (see Column Visibility button in the image below):
I have tried playing with CSS to get the buttons to mimic the Bootstrap buttons (like the other buttons on the page), but I'm not having much luck. I tried adding my CSS values to button.dt-button, div.dt-button, a.dt-button {} but had to override everything with !important which didn't seem right to me.
I also tried adding bower_components/datatables/media/css/buttons.bootstrap.css to my page <links> but it also had no effect.
Is there a pretty straight forward way to achieve this?
I use to remove the dt-button references. dt-button seems to cause all the trouble. It is dataTables own attempt to style different tags to a unified button look and this conflicts with bootstrap. So to have dataTables buttons that looks like the rest of the BS3 layout I add bootstrap classes to className :
.withButtons([
{ extend: 'pdf',
className: 'btn btn-sm btn-primary'
}
])
and remove any dt-button reference in initComplete :
.withOption('initComplete', function() {
$('.dt-button').removeClass('dt-button')
})
This ensures that the buttons is pure BS with no extra styling. I am sure this is not the "correct" way to do this. In theory there should be a working combination of withBootstrap() and withButtons() along with adequate package versions, but have never been able to find one successfully. I get all packages by CLI and do not want to mingle around with packages manually.
datatables.net
datatables.net-bs
datatables.net-buttons
angular-datatables
I believe the .net packages have low priority compared to dataTables download builder, cdn and github. They are not in sync.
You will need to adjust accordingly but in my case I added:
display: inline;
to the css of the elements on the left that are floating above. In my case (jQuery / Rails / Bootstrap) I was adding Buttons and the Bootstrap theme messes things up too (as mentioned above).
For bonus points you can override the default CSS classes on the elements:
https://datatables.net/reference/option/buttons.dom
So in my case (CoffeeScript notation):
$ ->
locations = $('#locations').dataTable
dom: 'Bfrtip'
ajax:
url: $('#locations').data('source')
type: 'GET'
order: [[ 3, 'desc' ], [ 2, 'desc' ]]
processing: true
serverSide: false
responsive: false
buttons:
dom:
container:
className: 'btn-group'
button:
className: 'btn btn-primary btn-outline'
This gets rid of the dt-buttons and dt-button which allows the base BS CSS to work properly.
<div class="btn-group">
<a class="btn btn-primary btn-outline buttons-copy buttons-html5" tabindex="0" aria-controls="locations" href="#">
<span>Copy</span></a>
<a class="btn btn-primary btn-outline buttons-pdf buttons-html5" tabindex="0" aria-controls="locations" href="#">
<span>PDF</span></a>
</div>
This then output the proper BS buttons.
Related
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
I'm build an Accelerated Mobile Page (AMP) template and was wondering if there is an easy way of toggling a CSS class on tab.
I know about stuff like:
<h2
class="headline"
on="tap:list.toggleVisibility"
>
<ul id="list"></ul>
But this writes inline-styles - I'd rather toggle a custom CSS class but couldn't find an example on the AMP page.
AMP.setState with bindings like <h2 [class]="myclasses"> looked like the way to go but manipulating the state is pretty hard with the tools they give you ...
This can be done via amp-bind. You can use an implicit state variable, e.g. visible, to track the current state. Here is a sample that toggles two classes show and hide:
<button [text]="visible ? 'Show Less' : 'Show More'"
on="tap:AMP.setState({visible: !visible})">
Show More
</button>
<p [class]="visible ? 'show' : 'hide'" class="hide">
Some more content.
</p>
Full sample on JSBIN
There is also an element specific action with AMP Bind toggleClass(class=STRING, force=BOOLEAN)
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<h2
class="headline"
on="tap:list.toggleClass(class='my-custom-class')">
<ul id="list"></ul>
When using ui-select with theme Bootstrap, the "select" looks the same size of a Bootstrap button, ie: btn btn-default
I want the select to look like a "btn-sm" button.
How can I do that? what classes should I modify?
A solution someone gave in the Github site of ui-select:
Wrap the directive in a div with form-group-sm, eg:
<div class='form-group-sm'><ui-select>...</ui-select></div>
https://github.com/angular-ui/ui-select/issues/169#issuecomment-298361767
I have an issue with the angular ng-show directive.
I have 2 buttons which are working like a toggle button.
index.html
<button class="btn btn-primary"
ng-show="!isShow"
ng-click="showDeleted()">
Show deleted items
</button>
<button class="btn btn-primary"
ng-show="isShow"
ng-click="showDeleted()">
Hide deleted items
</button>
myController.js
$scope.showDeleted = function(){
$scope.isShow = !$scope.isShow;
};
When i click on the button everything is working fine, but in IE10 I can see the hided button flickering. Here is a plunkr if you need one.
Thank you!
Did you try ng-cloak
https://docs.angularjs.org/api/ng/directive/ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display
I think all angular apps (that doesn't use ng-include to load template)
should use ng-cloak to prevent to hide all templates until angular compiles it.
I am updating an Angular app to use Bootstrap 3 glyphicons instead of some images, and have run into the following difficulty:
I have this glyph in a view that's in my content section:
<i class="glyphicon glyphicon-play"></i>
and this one in a pull-down menu:
<i class="glyphicon glyphicon-log-out"></i>
It seems that when I pull down the menu, the "-play" glyph is not hidden and still shows through it.
I'm not 100% sure what the issue is without seeing more of your code, but you could add some quick jQuery to show/hide the appropriate icon on click.
$('.the-dropdown').on('click', function() {
$('i.glyphicon-play').hide();
});