I'm trying to apply the Bootstrap theme to my datatable. I'm using ngx-datatable version 10.4.0 because I'm still on Angular 4 and 11.0 isn't compatible. According to the changelog, the Bootstrap theme was added in version 10.3.0.
Below is my component.html:
<div>
<ngx-datatable class="bootstrap" [rows]="rows" [columns]="columns" (select)='onSelect($event)' [selected]="selected" [selectionType]="'single'"
[limit]="10" [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="'auto'">
</ngx-datatable>
</div>
However, this doesn't add the styling as in the demo. I think I have included everything the documentation shows.
I'm using Bootstrap 3.3.7. Is 4.0 required? Am I not including something correctly?
Make sure you are including the scss file to your build.
In .angular-cli.json you should add it:
"apps": [
{
...
"styles": [
...
"../node_modules/#swimlane/ngx-datatable/release/themes/bootstrap.css",
...
],
also the <ngx-datatable> element should have both bootstrap and ngx-datatable classes:
<ngx-datatable class="bootstrap ngx-datatable">
Related
I have a simple sass variables declarations as below
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
This is what I need for dark theme that is a default theme. BUt I want to add a light theme as well. In my brain it is very simple.
if .wrapper.darktheme{
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
} else {
$theme-primary-dom: #FAFAFAff
$theme-primary-sub: #C4C4C4ff
$theme-secondary-dom: #181818ff
$theme-secondary-sub: #29292Bff
$theme-primary-sub-transparent: #C4C4C422
}
Now I have no idea how to do this in SASS.
Also, I have
<button class="theme__switch theme__switch--light">theme is light</button>
in header component
and,
<div class="wrapper darktheme"></div>
in main app.vue. which increase complecations as the trigger button and the trigger area are in different components.
I can easily get this using jquery of course, But since I am using vue.cli, adding jquery code didn't felt right. I have been searching all over stackoverflow and google for past 3 days but I haven't found a relative solution yet.
I am creating a web page using Nuxt.js. (Static file built with the
nuxt generate command)
As a requirement,I need to write the original tag in the static file
that I built. The original tag is for displaying the data obtained
on the server side. Writing an original tag in a vue file naturally
gives an error.
For example, in the image below,
Is there a way to ignore original tags in the vue file?
vue file(example)
// disabled-next-line
{{^ server-side-display-data}}
<button> button </ button>
// disabled-next-line
{{/ server-side-display-data}}
Build file(example)
{{^ server-side-display-data}}
<button> button </ button>
{{/ server-side-display-data}}
Tried
It seemed possible to ignore certain "files" like below, but I haven't found a way to ignore certain "tags"
https://ja.nuxtjs.org/api/configuration-ignore/
Please help
I had the same issue and was looking for a solution... you can try with this solution i've used.
in your nuxt.config.js
...
vue: {
config: {
ignoredElements: [string or regexp],
},
},
...
see this documentation for more details
I am using bootstrap 4 alpha-6,I want to modify bootstrap 4's primary color(#0275d8),is there a variable that can set the value?
You could overwrite the relevant css styles with your own custom styles, otherwise it might be worth it to look into using Less. Less is a CSS Preprocessor that allows you to store variables used in your css such as color values. You can see an example of this below:
#brand-primary: darken(#428bca, 6.5%); // #337ab7
#brand-success: #5cb85c;
#brand-info: #5bc0de;
#brand-warning: #f0ad4e;
#brand-danger: #d9534f;
.masthead {
background-color: #brand-primary;
}
You can read more on bootstraps use of Less here
Update 2019 Bootstrap 4
It's easily done with SASS. Just set the $brand-primary $primary variable.
$primary: hotpink;
Demo on Codeply
See: How to change the bootstrap primary color?
I want to update from dojo 1.7 to 1.8.3 so I have to replace the dojo.connect command.
switch:
< div id="universalPushSwitch" data-dojo-type="dojox.mobile.Switch" style="float:right" class="mblSwRoundShape1"></div>
Now I have:
dojo.require("dijit/registry");
dojo.require("dojo/ready");
dojo.require("dojox/mobile/ListItem");
dojo.require("dojo/aspect");
dojo.ready(function(){
dojo.aspect.after(dijit.registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
}
)});
Firebug says: "aspect is not defined"
PS: I know I don't use the new AMD loader. This is an old project and I am also new to all the dojo stuff. A simple translate from dojo.require("x");dojo.require("y"); to require(["x","y"], function (x,y){...} doesn't work for me so there is still the old style require.
Try using:
dojo.aspect.after(...);
instead of
aspect.after(...);
And do not stop at the next function ! :-)
If that doesn't work at once, try loading aspect the global way (with a dot, not a slash):
dojo.require("dojo.aspect");
It also could be possible, that the old dojo is not compatible with "/" and that it only works with dots !
Source:
http://livedocs.dojotoolkit.org/dojo/require
Edit
Here is a working fiddle based on your fiddle:
http://jsfiddle.net/9Xdv2/
The main problem with your code was that you did not parse the html. dojo parser converts some specific html to "dojo javascript objects" ! You use that kind of html a lot ! You should have done a:
dojox.mobile.parser.parse();
Everything is in the jsfiddle !
Since you are using dojo 1.8.3 and have been using dojo 1.7, why don't you use the AMD syntax instead of the pre-1.7 ?
You would do something like :
<div id="universalPushSwitch" data-dojo-type="dojox/mobile/Switch" style="float:right" class="mblSwRoundShape1"></div>
And in your js :
require(["dijit/registry",
"dojox/mobile/ListItem",
"dojo/aspect",
"dojo/parser",
"dojo/domReady!"
], function(registry, ListItem, aspect, parser){
parser.parse().then(function(instances){
aspect.after(registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
});
});
});
jQuery UI starting from version 1.8.4 html-encodes Autocomplete suggestions (according to this issue).
This became a problem for me now. I used to theme the output for the suggestions, but now (if I use version 1.8.4 or higher) Autocomplete just html-encodes my theming. All tags like <b>, <span> are being printed to the user instead of displaying the actual styling.
So the suggestions now look like:
<b>su<b>suggestion
another <b>su<b>suggestion
instead of:
suggestion
another suggesion
I've read about custom data, but I use Yii framework and the output is being generated from certain actions (PHP code).
So, how do I theme the output now?
Thank you!
Better use a HTML plugin
You can use open function from jQuery UI to replace the encoded text.
Here's an example:
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>"bug",
'source'=>$this->createUrl('/autocomplete'),
// additional javascript options for the autocomplete plugin
'options'=>array(
'open'=> 'js:function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, "<");
htmlString = htmlString.replace(/>/g, ">");
$(this).html(htmlString);
});
}'
),
));