I am trying to use PrimeNg and bootstrap together. Maybe this inherently bad? Just seems that PrimeNg alone is not sufficient.
I'm trying to have a button centered in a column as shown in their documentation: https://www.primefaces.org/primeng/#/datatable/templating
For me however, it is always left aligned.
index.html
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" href="/node_modules/primeng/resources/primeng.min.css" />
foo.component.html
<p-dataTable [value]="mixData" [editable]="true" sortField="mixType" id="MixTypeTable">
<p-column id="deleteColumn" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body" >
<a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
</ng-template>
</p-column>
</p-dataTable>
foo.component.ts
#Component({
selector: 'qtyPane',
templateUrl: './app/register/foo.component.html',
styleUrls: ['./app/register/foo.component.css'],
providers: []
})
In my foo.component.css, it seems like no selector for the td with the button has any effect. Other styles work on other elements in foo.component.html so I know the css is being reached but does not work at all on the table.
foo.component.css, I tried all of these:
#deleteColumn td {
text-align: center;
}
table > tbody > td.col-button {
text-align: center;
}
.col-button {
width: 10%;
text-align: center;
}
td.col-button {
text-align: center;
}
I'm not positive what styleClass="col-button" does, so I might be wrong, but looking at the documentation I don't think it puts that class on the td.
Here's what I would try first:
<p-column id="deleteColumn" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body" >
<div class="my-center-text">
<a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
</div>
</ng-template>
</p-column>
The CSS:
.my-center-text {
text-align: center;
width: 100%;
}
If that doesn't work you might need to do some kind of deep selecting. I know Angular is in a state of flux but something like this might work for now:
#deleteColumn /deep/ td {
text-align: center;
}
Because Angular prevents styles in one component from affected another, you can't directly get access to the td inside of the p-component by default. By adding the /deep/ to the selector path it will apply the styles to nested components as well
If you target the hosting element context, it should also work. Let's say your datatable is hosted by tag 'app-datatabledemo' and you attached the class name 'demo' to it.
<app-datatabledemo class="demo"></app-datatabledemo>
If you write following css style to 'foo.component.css' file, it should align text to center.
:host-context(.demo) >>> .ui-datatable-data{
text-align: center;
}
Related
I hope someone can help a numpty :)
I am using Boostrap 5 and this Lightbox library https://trvswgnr.github.io/bs5-lightbox/
It uses data-toggle="lightbox" to initiate it and is working perfectly.
<a href="http://fpoimg.com/200x200?text=Forth" data-toggle="lightbox" data-gallery="gallery" >
<img src="http://fpoimg.com/200x200?text=Forth"></a>
I would like to apply some css styling eg. lightbox background-color, padding etc but I have no idea where to start.
I used to use the ekko-lightbox for BS4 which had its own CSS but I can't find one for this.
As I can see, bs5-lightbox library doesn't have it's own stylings, and using BS5 markups and stylings.
So you can apply BS5 stylings and HTML you want.
You can start by browsing .lightbox-carousel (CSS class selector) on your page and create custom styling.
Based on this class you can customize it's child nodes.
img {
width: 200px;
}
/* this is how you can add stylings to wrapper, f.e. */
.lightbox-carousel.carousel {
padding: 1rem;
background: #ffffff7a;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="module">
import * as Lightbox from 'https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.8/dist/index.bundle.min.js';
document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show();
}));
</script>
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid my-lightbox-toggle">
</a>
I am using b-tooltip tags of BootstrapVue to show information. I want to increase the width of b-tooltip (for long text message), text alignment, etc . How can i do it (basically how can i style it)?
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="hover">
I am tooltip <b>component</b> content!
</b-tooltip>
If you're using SCSS in your project, then the easiest way for a global solution would be to modify the SCSS variables to your liking.
If you want to only apply styles to a specific tooltip, or apply something there isn't a variable for. You can use the custom-class prop on b-tooltip to supply it with a custom class, which allows you to style it to your liking.
If you're placing this CSS in a scoped style tag <style scoped> you will need to use a deep selector to target the subcomponents such as .tooltip-inner.
new Vue({
el: '#app',
})
.custom-tooltip > .tooltip-inner{
/* Removes the default max-width */
max-width: none;
/* Apply whatever other styles you want */
font-size: 150%;
padding: 10px;
}
/* This styling is just for the example */
#app {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<!-- Use the variant prop to use your theme colors -->
<!-- If you want a custom color, you can use CSS -->
<b-tooltip target="tooltip-target-1" variant="primary" custom-class="custom-tooltip" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
</div>
</div>
The trick to change styles of bootstrapvue tooltip.
<style>
.tooltip-inner {
max-width: 800px;
}
</style>
Don't use scoped in style because the component render the html of tooltip outside of app so if you put scoped your css will not work.
I am trying to style my child components. Isit wrong to put the style in a parent component? It appears that does not work.
I put the style for .card-page in the top level element (containing expenses-module where I use it)
<dom-module id="expenses-app">
<template>
<style>
...
.card-page {
display: block;
width: 100%;
}
</style>
<app-drawer-layout>
<app-header-layout>
...
<iron-pages selected="{{routeData.view}}" attr-for-selected="name">
<dashboard-module name="dashboard" route="{{subroute}}"></dashboard-module>
<expenses-module name="expenses" route="{{subroute}}"></expenses-module>
<settings-module name="settings" route="{{subroute}}"></settings-module>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
In expenses module,
<paper-card heading="Expenses" class="card-page">...
</paper-card>
Seems like if I move the styles into expenses-module it works.
You cannot directly style elements inside custom element from their parents like that, because Polymer processes the style within <dom-module> and will apply styles only to direct child members. It will not descend into child custom elements.
In other words, standard CSS selectors will only work within the scope of the declaring component. Both in Shadow and Shady DOM.
For your styles to work with nested elements, you should use CSS mixins and properties. All PolymerElements and many 3rd party elements will come with such styling extension points. The naming usually follow the convention, where the main mixin is called same as the element itself. Additionally, there may be more specific mixins and properties, which style only parts of the element. <paper-card> docs for example lists --paper-card mixin, --paper-card-content mixin, --paper-card-header-color and more.
If you want to better control the styling of elements you use, you would want to create your own CSS mixins/properties and #apply() them to selected elements. See how in the example below --my-elem-card-page applies only to one of the two paper cards.
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-card/paper-card.html" rel="import"/>
</head>
<body>
<my-wrapper></my-wrapper>
<dom-module id="my-elem">
<template>
<style>
.card-page {
#apply(--my-elem-card-page);
}
</style>
<paper-card heading="my-elem specific style" class="card-page">
<div class="card-content">
Content here
</div>
</paper-card>
<paper-card heading="Default style" class="unstyled-page">
<div class="card-content">
Content here
</div>
</paper-card>
</template>
</dom-module>
<dom-module id="my-wrapper">
<template>
<style>
# will be ignored
paper-card {
width: 200px;
}
my-elem{
--paper-card: {
color: blue;
display: block;
}
}
my-elem {
--my-elem-card-page: {
color: red;
}
}
</style>
<my-elem></my-elem>
</template>
</dom-module>
<script>
Polymer({
is: 'my-elem'
});
Polymer({
is: 'my-wrapper'
});
</script>
</body>
</html>
Hi I am creating my polymer element in which i am using < paper-card >. I want to change the height & width of my paper-card so that it occupies the entire space. Also i want to make few more changes but I am finding it difficult. I can do it with inline styling like this :
<template>
<div >
<paper-card heading="OTS Task" animatedShadow="true" style="width: 100%">
<div class="card-content" >
<iron-label >Label 1 </iron-label>
<iron-label> Label 2</iron-label>
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
If you see here i have done style="width : 100%" to make it span the entire width. Can anyone tell me how can i write the same in < style > tag. I read few docs on this but found it very difficult * New to polymer *. Thanks in advance :)
Don't think that setting the paper-card element to 100% will work.
I believe that the correct way would be to use mixing as this is the way you style Polymer elements.
The correct way in this case would be:
paper-card {
--paper-card: {
width: 100%;
};
}
The alignment of the text would be in this case handled with:
paper-card {
--paper-card-header-text: {
text-align: center;
};
}
paper-card {
--paper-card-content: {
text-align: center;
};
}
A full list of the different selectors can be found in the element description here.
The equivalent CSS for <paper-card style="width: 100%"> would be:
<style>
paper-card {
width: 100%;
}
</style>
Here's a working demo:
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
paper-card {
width: 100%;
}
</style>
<template>
<div>
<paper-card heading="OTS Task" animated-shadow="true">
<div class="card-content" >
<iron-label >Label 1 </iron-label>
<iron-label> Label 2</iron-label>
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
codepen
You can use is="custom-style" in your style tag and then use paper-card properties as described on elements page or standard CSS properties
Like in this answer I'm trying to add icon to h3 tag. Here is a result:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Play it! <span class="glyphicon glyphicon-play text-primary"/></h1>
Also jsfiddle available.
But inside h3 tag the icon becomes too big. I would prefer something like this:
How can I make the icon smaller?
According to your HTML just add the CSS:
h1 span.glyphicon-play{
font-size: 0.5em;
vertical-align: 5px;
}
Change the font-size of the glyphicon
h1 .glyphicon {
font-size:.5em;
}
JSfiddle Demo
<h1>Play it! <span class="glyphicon glyphicon-play" style="font-size:15px;"></span></h1>
Try This code
There are many possible ways, one way is to write css for it, as mentioned in the above replies. Another possible way is using <small> tag. This would be answer if you don't want to dynamically decrease the font-size in css. Another solution is to give it a new class btn-sm especially if this is a button.
http://jsfiddle.net/agqqft99/10/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1>Play it! <span class="glyphicon glyphicon-play text-primary"/></h1>