I have created a library containing some components for use in an Angular 4 application. Functionally, everything works as expected when I use components from the library in an application. The CSS styling from the components is not being applied though.
I compile the library with the Angular compiler (ngc) and have a build step where all templates and styles get inlined. An example of some output in the generated .js bundle:
AppComponent.decorators = [
{ type: Component, args: [{
selector: "app",
styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"],
encapsulation: ViewEncapsulation.None,
template: "<router-outlet></router-outlet>"
},] },
];
As you can see, the styles are inline here using the styles property. The styles that are shown there, are not applied though.
Does anyone know why this happens? I'm kind of clueless about this particular problem. I followed all the guidelines for creating Angular packages in the Angular Package Format.
Edit:
I bootstrap the Angular application with the AppComponent from the example output above as follows:
import { NgModule } from '#angular/core';
import { AppComponent as LibraryAppComponent, AppModule as LibraryAppModule } from '#myscope/library';
#NgModule({
imports: [ LibraryAppModule ],
bootstrap: [ LibraryAppComponent ]
})
export class AppModule {}
Guessing you need :host /deep/. component styles guid
You should remove double quotes from styles and add backquote/acute and your styles will be applied see below:
Instead of this:
styles: ["h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }"]
Replace it with backquote/acute:
styles: [`h1, h2, h3, h4, h5, h6 { display: inline; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h4 { font-size: 12px; } h5 { font-size: 10px; } h6 { font-size: 8px; } #placeholder { min-width: 100%; min-height: 100vh; height: 100vh; overflow-x: hidden; overflow-y: hidden; }`]
Button is right below esc key in left key with tilde:~ and acute:`
Related
I have a navbar,Home and login elements. It is simple login page. I want to add api to go home and login page. For this i have router.js file. I am sharing all of file here.
This is my Main.js
import Vue from 'vue'
import App from './App.vue'
import useRoute from './router'
Vue.config.productionTip = false
new Vue({
useRoute,
render: h => h(App),
}).$mount('#app')
And Router.js
import Vue from 'vue'
import { useRoute } from 'vue-router'
import Home from './components/Home.vue'
import LoginPage from './components/Login.vue'
Vue.use(useRoute)
export default new useRoute({
routes: [
{ path: '/', component: Home },
{ path: '/login', component: LoginPage }
]
})
App.vue
<template>
<div id="app">
<NavBar />
<div class="auth-wrapper">
<div class="auth-inner">
<router-view />
</div>
</div>
</div>
</template>
<script>
import NavBar from './components/Nav.vue'
export default {
name: 'App',
components: {
NavBar,
}
}
</script>
<style>
#import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
* {
box-sizing: border-box;
}
body {
background: #1C8EF9 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Fira Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
label,
.span {
font-weight: 500;
font-family: 'Fira Sans', sans-serif;
}
body,
html,
#app,
#root,
.auth-wrapper {
width: 100%;
height: 100%;
}
#app {
text-align: center;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.auth-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.auth-inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.auth-wrapper .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.auth-wrapper h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}
</style>
And for easy finding i am sharing console error
And also i want to share this information that if i write "/login" or "/" it just going to home page,and nothing changing
vue.runtime.esm.js?c320:4605 [Vue warn]: inject() can only be used inside setup() or functional components.
warn # vue.runtime.esm.js?c320:4605
vue.runtime.esm.js?c320:4605 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
<Root>
I have a question about SCSS in this GitHub. I learn this and find one thing confusing.
The repo is showing different filetypes like jpg, docx or pdf.
I created a Codesandbox of this repo to ask questions about it.
Opening that Codesandbox you see the file-viewer.jsx in the viewer and it loads import '../styles/main.scss'; that contains;
.pg-viewer-wrapper {
height: 100%;
display: flex;
flex-direction: row;
.pg-viewer {
height: 100%;
position: relative;
flex-grow: 2;
.pg-driver-view {
margin: auto;
width: 100%;
height: 100%;
.loading {
position: relative;
}
I can see in the file-viewer.jsx render() that it uses the SCSS .pg-viewer-wrapper and children.
When I select in the App.js to show a docx file like this;
import React, { Component } from "react";
import FileViewer from "./components/file-viewer";
import docx from "../example_files/SampleSpec.docx";
class App extends Component {
render() {
return (
<div>
<FileViewer fileType="docx" filePath={docx} />,
</div>
);
}
}
export default App;
Then it loads the docx-viewer.jsx that have the import '../../styles/docx.scss'; SCSS. Viewing this SCSS it looks like this;
.pg-viewer-wrapper {
overflow-y: scroll;
#docx {
width: 100%;
height: 100%;
}
.document-container {
padding: 30px;
width: 700px;
background: white;
margin: auto;
}
html,
bodyaddress,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
frame,
frameset,
h1,
h2,
h3,
h4,
h5,
h6,
noframes,
ol,
p,
ul,
center,
dir,
hr,
menu,
pre {
display: block;
unicode-bidi: embed;
}
li {
display: list-item;
list-style-type: disc;
}
head {
display: none
}
table {
display: table
}
img {
width: 100%
}
tr {
display: table-row
}
thead {
display: table-header-group
}
tbody {
display: table-row-group
}
tfoot {
display: table-footer-group
}
col {
display: table-column
}
colgroup {
display: table-column-group
}
th {
display: table-cell
}
td {
display: table-cell;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 0.2em 0.5em;
}
caption {
display: table-caption
}
th {
font-weight: bolder;
text-align: center;
}
caption {
text-align: center
}
body {
margin: 8px
}
h1 {
font-size: 2em;
margin: .67em 0;
}
h2 {
font-size: 1.5em;
margin: .75em 0;
}
h3 {
font-size: 1.17em;
margin: .83em 0;
}
h4,
p,
blockquote,
ul,
fieldset,
form,
ol,
dl,
dir,
menu {
margin: 1.12em 0
}
h5 {
font-size: .83em;
margin: 1.5em 0;
}
h6 {
font-size: .75em;
margin: 1.67em 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
font-weight: bolder
}
blockquote {
margin-left: 40px;
margin-right: 40px;
}
i,
cite,
em,
var,
address {
font-style: italic
}
pre,
tt,
code,
kbd,
samp {
font-family: monospace
}
pre {
white-space: pre
}
button,
textarea,
input,
select {
display: inline-block
}
big {
font-size: 1.17em
}
small,
sub,
sup {
font-size: .83em
}
sub {
vertical-align: sub
}
sup {
vertical-align: super
}
table {
border-spacing: 2px
}
thead,
tbody,
tfoot {
vertical-align: middle
}
td,
th,
tr {
vertical-align: inherit
}
s,
strike,
del {
text-decoration: line-through
}
hr {
border: 1px inset
}
ol,
ul,
dir,
menu,
dd {
margin-left: 40px
}
ol {
list-style-type: decimal
}
ol ul, ol ul,
ul ol, ul ol,
ul ul, ul ul,
ol ol, ol ol {
margin-top: 0;
margin-bottom: 0;
}
u,
ins {
text-decoration: underline
}
br:before {
content: "\A";
white-space: pre-line;
}
center {
text-align: center
}
:link,
:visited {
text-decoration: underline
}
:focus {
outline: thin dotted invert
}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
BDO[DIR="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}
*[DIR="ltr"] {
direction: ltr;
unicode-bidi: embed;
}
*[DIR="rtl"] {
direction: rtl;
unicode-bidi: embed;
}
#media print {
h1 {
page-break-before: always
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid
}
ul,
ol,
dl {
page-break-before: avoid
}
}
}
As you see it also have the .pg-viewer-wrapper {...
My question is since docx-viewer.jsx don't have in its render().. any references to the .pg-viewer-wrapper {.. so how can it still be used in the docx-viewer.jsx? I just learn this so probably its basic stuff :)
The .pg-viewer-wrapper is applied in the <FileViewer ... >, which is the file file-viewer.jsx, and which imports and wraps the file docx-viewer.jsx.
file-viewer.jsx renders:
render() {
const Driver = this.getDriver(this.props);
return (
<div className="pg-viewer-wrapper">
<div className="pg-viewer" id="pg-viewer">
<Driver ... />
</div>
</div>
);
}
The resulting HTML including the Driver would be like:
<div className="pg-viewer-wrapper">
<div className="pg-viewer" id="pg-viewer">
<div id="docx">
<div class="document-container">
... the generated HTML ...
</div>
</div>
</div>
</div>
Currently working on a large project that uses React and CSS Modules. I want to implement 'react-anything-sortable' on a bunch of list items.
So far the implementation has gone to a standstill because 'react-anything-sortable' adds the following classes to any child inside the 'react-anything-component': .ui-sortable, .ui-sortable-item, .ui-draggable and .ui-sortable-placeholder. I assume these are classes which are passed for the 'react-anything-sortable' to recognize which DOM elements are being dragged, placed, etc.
I import my List component's styles by referencing to a .scss file like so:
import styles from './WidgetList.scss'
To use the styles on a component, you would need to add styles.CLASS to use a class:
<div className={styles.container}>Something</div>
Therefore, it's understandable that the .ui-sortable being placed by 'react-anything-sortable' has no way of referencing a stylesheet since it doesn't add .styles.
One can easily see how other div elements have a 'hashed' className (indicating the class in their respective css modules have been found), however, the div with the ui-sortable only has the class but no way of accessing the .scss file containing the style properties of .ui-sortable
How do I fix this?
EDIT: Here's how I'm implementing it
WidgetList.js:
import React from 'react';
import ThinScrollbar from 'components/Scrollbars/ThinScrollbar';
import PureComponent from '../PureComponent';
import Sortable from 'react-anything-sortable';
import { sortable } from 'react-anything-sortable';
import styles from './WidgetList.scss';
#sortable
class WidgetListItem extends PureComponent {
render() {
return (
<div {...this.props}>
{this.props.children}
</div>
)
}
}
export default class WidgetList extends PureComponent {
constructor() {
super();
this.state = {};
}
handleSort(data) {
this.setState({
result: data.join(' ')
});
console.log(this.state.result)
}
toggleCheckbox(evt) {
console.log(evt)
}
render() {
let items = [1,2,3,4,5,6]
// TODO: move widget creation to its own component <WidgetItem/>
const widgetItems = items.map(i => {
return (
<WidgetListItem className="vertical" sortData={i} key={i}> //<--- this is where .ui-sortable-item is added on render
<div className={styles.item} i={i}>
<i className={styles.fa}></i>{`Widget ${i}`}
<div className={styles.checkbox} onClick={this.toggleCheckbox}></div>
</div>
</WidgetListItem>
)
})
return <div className={styles.container}>
<ThinScrollbar>
<Sortable onSort={::this.handleSort} className="vertical-container" direction="vertical"> //<--- this is where .ui-sortable is added on render
{widgetItems}
</Sortable>
</ThinScrollbar>
</div>
}
}
WidgetList.scss
#import "../../theme/variables";
.container {
width: 100%;
height: calc((100% - 335px) / 2);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 4px 0 10px;
}
.item {
border-left: 5px solid #46484C;
background-color: #303236;
padding: 8px;
min-height: 36px;
font-size: 12px;
line-height: normal;
cursor: pointer;
margin-bottom: 5px;
margin-right: 15px;
}
.item:hover {
background-color: #34363b;
}
.item:last-of-type {
margin-bottom: 0;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #b7b7b7;
margin-right: 8px;
}
.fa:before {
content: '\f07b';
}
.checkbox {
width: 20px;
height: 20px;
float: right;
background: url('img/checkboxes.gif') 0 0 no-repeat;
}
.activeCheckbox {
composes: checkbox;
background-position: 0 -20;
}
.ui-sortable {
display: block;
position: relative;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ui-sortable:before,
.ui-sortable:after {
content: " ";
display: table;
}
.ui-sortable:after {
clear: both;
}
.ui-sortable .ui-sortable-item {
float: left;
cursor: move;
}
.ui-sortable .ui-sortable-item.ui-sortable-dragging {
position: absolute;
z-index: 1688;
}
.ui-sortable .ui-sortable-placeholder {
display: none;
}
.ui-sortable .ui-sortable-placeholder.visible {
display: block;
z-index: -1;
}
.vertical-container {
width: 200px;
height:500px;
padding: 10px;
border: 1px #ccc solid;
background-color: red;
}
.vertical.ui-sortable-item {
float: none;
display: block;
width: 100%;
padding: 10px 5px;
margin-bottom: 10px;
border: 1px #eee solid;
background-color: red;
}
If you have no control over the ui-sortable className, i.e. you can't use css modules you can instead export those classNames as 'global' classes:
/* Will be hashed */
.activeCheckbox {
background-position: 0 -20px;
}
/* Will be left as 'ui-sortable' */
:global .ui-sortable {
display: block;
}
If you have a combination of global and local classNames in the same selector you can also specify individual classNames as 'global':
/* 'ui-sortable' will be left as 'ui-sortable', 'bar' will be hashed */
:global(.ui-sortable) .bar {
display: block;
}
Hi guys I've made a lot of progress on this project but now I seem to have run into a slight issue when integrating the disqus commenting system.
I've looked at the other questions but it seems with html and css things can go sideways in so many different ways those questions didn't help too much.
It's overlapping the footer at the bottom of the page. I'll post a link to a sample page, please help. Thanks.
http://blubee.me/journal/ "disqus overlaps footer"
here's a screenshot below
css for the article section, the div article-footer which houses the disqus comment code doesn't have any styles applied to it.
.article-header .title {
text-transform: uppercase;
font-weight: 500;
font-size: 1.5em;
padding: 0 0 10px 0;
}
.article-meta {
text-align: left;
margin-top: -10px;
}
.article-meta img {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.article-meta ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.article-meta ul li {
display: inline-block;
}
.article-meta ul li a {
text-decoration: none;
}
.article-meta ul li a:hover {
color: #fff;
}
.journals h1, .journals h2, .journals h3, .journals h4, .journals h5, .content h1, .content h2, .content h3, .content h4, .content h5 {
text-transform: uppercase;
font-weight: bold;
font-size: 1.5em;
padding: 20px 0 15px 0; }
You said : the div surrounding the comments has no styles on it at the moment...
That being said, it's obvious why the overlap is occurring, you have not set a width, height and position for the div containing the comments section.
In order for that to be fixed, you must define those.
That will fix your problem.
I created a site in wordpress and I want to hide the menu from this page
http://www.dawaf.co.uk/es/
but keep it visible on all of the other pages once you click on the logo in the top left to take you through to the site
http://www.dawaf.co.uk/es/portraits
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: BebasRegular;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: #FFFFFF;
padding: 0px;
}
h1.entry-title {
display: none;
}
#page.hfeed {
margin: 0px;
}
/*Header
------------------------------------------------------------ */
#branding {
border: 0px;
}
#branding #searchform {
display: none;
}
.site-title {
width: 300px;
height: 132px;
}
/*Nav
------------------------------------------------------------ */
#access {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
width: 140px;
margin-left: 20px;
}
#access a {
color: #8E8E8E;
padding: 0px;
line-height: 2.2;
}
#access li {
font-size: 11px;
}
#access li:hover > a, #access a:focus {
background: #FFFFFF;
}
#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
font-weight: normal;
}
/*Photospace
------------------------------------------------------------ */
.photospace {
margin: 0px !important;
top: -236px;
left: 175px;
}
.nav-controls {
font-size: 11px;
}
.ss-controls {
font-size: 11px;
}
.photospace .gal_content a:hover{
text-decoration: none !important;
}
/*Super Sized Splash Page
------------------------------------------------------------ */
#supersized {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#page.hfeed {
background: transparent;
}
.widget_search form {
display: none;
}
form#searchform {
display: none;
}
/*Footer
------------------------------------------------------------ */
#colophon {
display: none;
}
#post-0 .entry-content {
display: none;
}
You'll notice that your main page has a class of home which is unique to that section. This makes it real simple to do something like:
.home nav{
display:none;
}
or if you need something more specific:
.home nav#access{
display:none;
}
I'd edit the theme and check is_home() to hide the menu.
if( !is_home() )
{
# Show your menu on pages that are not the home page
}
You could hide it from the home page by doing the following css
.home #access {
display: none;
}
It will still appear on all of your other pages once you enter via the logo.