Am trying to create navbar with logo but unable to increase the size of image.
This is written in kotlin/js but concept should be same for native html/js code.
Html index file:
fun HTML.index() {
head {
title("Welcome to Seller Service")
link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/bulma#0.9.2/css/bulma.css") { }
link(rel = "stylesheet", href = "static/styles/index.css") {}
}
body {
div {
id = "index"
}
script(src = "/static/output.js") {}
script(src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js") {}
}
}
React kotlin/js code to replace div with index id:
override fun RBuilder.render() {
div(classes = "section") {
div(classes = "container") {
nav(classes = "navbar") {
div(classes = "navbar-brand"){
a(classes = "navbar-item"){
img(classes = "img-style", src = "static/images/logo-text.png", alt = "Site logo") {
}
}
}
}
}
}
}
}
css seen from console in browser:
.navbar-item img {
max-height:1.75rem
}
.img-style {
<strike>max-height:4rem;</strike>
}
max-height:4rem;
my max-height is not applied, any idea why?
It is overall governed by order of properties. I solved this problem by overriding the same rule in my css and linking it to the page.
.navbar-item > img { max-height: 4rem; }
I override this rule of navbar-item class direct children img.
Related
I have this code. I print the content of a DIV via its ID, but omit an image. I would like your support to know how to make that image be included. (the image is also inside the DIV)
impresion = The DIV to print
function printDiv(impresion) {
var contenido= document.getElementById(impresion).innerHTML;
var contenidoOriginal= document.body.innerHTML;
document.body.innerHTML = contenido;
window.print();
document.body.innerHTML = contenidoOriginal;
}
I have tried many things and nothing works
Here is a simple solution using just CSS:
#media print {
body * {
visibility: hidden;
}
#impresion, #impresion * {
visibility: visible;
}
#impresion {
position: absolute;
left: 0;
top: 0;
}
}
Try this, using a div with id="impresion":
function Print() {
let data = document.getElementById("impresion").innerHTML;
let mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title></title></head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
setTimeout(function(){mywindow.print()},1000);
return true;
}
I have a button web component built that I am trying to style using CSS parts. In my web component below you can see that the button is colored tomato because I have used exportparts and then in my consumer CSS I have styled it using btn-comp::part(btn) { ... }.
However, I would prefer to not have to style it using btn-comp, instead I would like to just use :root to style it like this author does.
For example I should be able to do this:
:root::part(btn) { /* my styles here */ }
But that does not work, it only works when I use the component name. How can I style my CSS parts using :root?
const template = document.createElement('template');
template.innerHTML = `<button part="btn">I should be a green button</button>`;
class BtnComp extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
const button = this.shadowRoot.querySelector("button");
button.addEventListener("click", () => alert('Clicked'));
}
}
window.customElements.define('btn-comp', BtnComp);
:root::part(btn) {
background-color: green !important; /* I want this color to be applied! */
}
btn-comp::part(btn) {
background-color: tomato;
color: white;
padding: 1rem 2rem;
border: 0;
cursor: pointer;
}
<btn-comp exportparts="btn" />
I try to define a custom field, containing either a SVG or a Canvas. But my example shows some strange rendering. I expect two boxes 400 pixel wide and 300 pixel high. But both boxes seem to collapse in different ways. How can I fix this?
class TestSvg extends HTMLElement
{
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const container = document.createElement('svg');
container.setAttribute('width', '400');
container.setAttribute('height', '300');
shadow.appendChild (container);
}
}
class TestCanvas extends HTMLElement
{
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const container = document.createElement('canvas');
container.setAttribute('width', '400');
container.setAttribute('height', '300');
shadow.appendChild (container);
}
}
customElements.define ('test-svg', TestSvg);
customElements.define ('test-canvas', TestCanvas);
test-svg, test-canvas {
border: 1px solid black;
}
svg
<test-svg>
</test-svg>
canvas
<test-canvas>
</test-canvas>
end
Same without custom elements:
svg, canvas {
border: 1px solid black;
}
svg
<svg width="400" height="300"></svg>
canvas
<canvas width="400" height="300"></canvas>
end
Why is there a difference between the version with custom elements and the version without custom elements?
Your SVG element is not being created correctly. It needs to be in the correct SVG namespace. Change it to this:
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
By default, your custom elements will be display: inline. Set them to block or inline-block depending on your need.
test-svg, test-canvas {
display: inline-block;
border: 1px solid black;
}
Updated test:
class TestSvg extends HTMLElement
{
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
container.setAttribute('width', '400');
container.setAttribute('height', '300');
shadow.appendChild (container);
}
}
class TestCanvas extends HTMLElement
{
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const container = document.createElement('canvas');
container.setAttribute('width', '400');
container.setAttribute('height', '300');
shadow.appendChild (container);
}
}
customElements.define ('test-svg', TestSvg);
customElements.define ('test-canvas', TestCanvas);
test-svg, test-canvas {
display: inline-block;
border: 1px solid black;
}
svg
<test-svg>
</test-svg>
canvas
<test-canvas>
</test-canvas>
end
Good to see more people are combining Custom Elements and SVG, they are a good match
Your core problem was the SVG NameSpace, so Paul his answer is correct.
Some additional comments:
Your constructor can be optimized:
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const container = document.createElementNS('http://www.w3.org/2000/svg','svg');
container.setAttribute('width', '400');
container.setAttribute('height', '300');
shadow.appendChild (container);
}
super() returns the element scope
Google documentation that says to use super() first is wrong,
they mean: Call super() before you can use the 'this' scope reference.
attachShadow() boths sets AND returns this.shadowRoot for free
.appendChild() returns the created element
So you can chain everything:
constructor() {
const container = super()
.attachShadow({mode:'open'})
.appendChild (document.createElementNS('http://www.w3.org/2000/svg','svg'));
container.setAttribute('width', '400');
container.setAttribute('height', '300');
}
If you do not do anything special with this in memory Custom Element,
you can scrap the whole constructor and create the element with HTML in the connectedCallback
connectedCallback(){
this.innerHTML = `<svg width='400' height='300'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 20 20'></svg>`;
}
Note: I also ditched shadowDOM above; if you do want shadowDOM its:
connectedCallback(){
this.attachShadow({mode:"open"})
.innerHTML = `<svg width='400' height='300'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 20 20'></svg>`;
}
There is another sizing problem
Depending on your Font family and size there will be a gutter below your inline-block SVG Custom Element (see RED below) to allow for pgjq characters that stick out below the base line.
To counter that you have to set vertical-align: top on the SVG element:
<style>
body { font-size: 3em }
svg-circle { background: RED }
svg-circle svg {
background: grey;
display: inline-block;
width: 80px;
}
#correct svg { vertical-align: top }
</style>
<div>
<svg-circle radius="40%" color="green"></svg-circle>
<svg-circle x="50%" y="100%" color="blue"></svg-circle>
<svg-circle></svg-circle>
</div>
<div id="correct">
<svg-circle radius="40%" color="green"></svg-circle>
<svg-circle x="50%" y="100%" color="blue"></svg-circle>
<svg-circle></svg-circle>
</div>
<script>
customElements.define("svg-circle", class extends HTMLElement {
static get observedAttributes() { return ["x", "y", "radius", "color"] }
connectedCallback() { this.render() }
attributeChangedCallback() { this.render() }
render() {
let [x = "50%",y = "50%",radius = "50%", color = "rebeccapurple"] =
this.constructor.observedAttributes.map(x => this.getAttribute(x) || undefined);
this.innerHTML = `<svg viewBox='0 0 96 96'>
<circle cx='${x}' cy='${y}' r='${radius}' fill='${color}'/></svg>`;
}
});
</script>
Note: There is no shadowDOM attached to <svg-circle>, so the SVG inside can be styled with global CSS
Make it an IMG
If you do not want any CSS bleeding, and want to work with the SVG as if it is an image,
without pointer-events issues, then create an IMG:
this.innerHTML = `<img src="data:image/svg+xml,<svg viewBox='0 0 96 96'>
<circle cx='${x}' cy='${y}' r='${radius}' fill='${color}'/>
</svg>">`.replace(/#/g, "%23");
Note: The # is the only character that needs to be escaped here. In CSS url() usage you also need to escape the < and >
Add a grid
If you are going to create an Icon Toolbar or Chessboard like layout with SVGs, add a grid:
#correct {
display: grid;
grid-template-columns: repeat(3, 80px);
}
svg-circle svg {
background: grey;
display: inline-block;
width: 100%;
height: 100%;
}
In the first custom element TestSvg, change the element type from svg to canvas
const container = document.createElement('canvas');
HTML elements reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
'canvas' is an HTML element.
where as 'svg' is not. 'svg' is Container element, structure element
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
width: '620px',
height : '100%',
});
}
if height 100 % UI looks like this(under upload button not necessary empty spaces)
if I put fix height in px(it makes UI scrollable)
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
width: '620px',
height : '250px',
});
}
I want actual this type if I SELECT File it automatic increase its height(when i choose image that time i want to increase automatic height of matdialogbox)
Try this, it will take complete height of the page for your matdialog
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
width: '100%',
minHeight: 'calc(100vh - 90px)',
height : 'auto'
});
}
The dialog does automatically adapt to the content as long as its html is wrappend inside mat-dialog-content. :
<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>...>
<div mat-dialog-actions>...>
The default max height of content of material dialog is 65vh. It can be increased by styling .mat-dialog-content
::ng-deep {
.mat-dialog-content {
max-height: 90vh;
}
}
Add a class to your dialog:
uploadFiles(): void {
const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
panelClass: 'myClass',
});
}
Then add the following style to the class in your CSS:
.myClass {
max-height: 95%;
width: 620px;
overflow-y: auto;
}
I am new to iTextSharp, currently working on conversion of HTML to PDF using Html2pdf (iTextSharp extension). I am able to generate pdf but not able to add logo to pdf on every page.
Image coming but I can't change width of images.
CSS what I am using for pdf logo is below:
#page {
#top-left {
content:"test ";
background:url(../images/template/test_logo_pdf.jpg) no-repeat 0px 0px;
border:1px solid red;
background-color: #cccccc;
margin-top:10px;
}
#top-right {
content: flow(header);
}
#bottom-right {
content: "Page " counter(page) " of " counter(pages);
font: 8pt Arial, sans-serif;
}
#bottom-left {
content: string(repname);
font: 8pt Arial, sans-serif;
}
}
It's indeed not entirely easy to control dimensions of images added to the page margin boxes. One possible approach that I can suggest is to add image as a content (rather than as background-image) and make use of custom tag worker, that would specify height and width as desired for page margin box children images:
HTML:
#top-left {
content: url(../images/template/test_logo_pdf.jpg);
border:1px solid red;
background-color: #cccccc;
margin-top:10px;
}
This is Java code, however .NET version has exact same API, only differing in code style (captial letters in the beginning of method names, etc.):
private static class PageMarginBoxImagesTagWorkerFactory extends DefaultTagWorkerFactory {
#Override
public ITagWorker getCustomTagWorker(IElementNode tag, ProcessorContext context) {
if (tag.name().equals(PageMarginBoxContextNode.PAGE_MARGIN_BOX_TAG)) {
return new PageMarginBoxImagesWorker(tag, context);
}
return super.getCustomTagWorker(tag, context);
}
}
private static class PageMarginBoxImagesWorker extends PageMarginBoxWorker {
public PageMarginBoxImagesWorker(IElementNode element, ProcessorContext context) {
super(element, context);
}
#Override
public boolean processTagChild(ITagWorker childTagWorker, ProcessorContext context) {
if (childTagWorker.getElementResult() instanceof Image) {
// Or set fixed dimensions via setWidth/setHeight
((Image) childTagWorker.getElementResult()).setAutoScale(true);
}
return super.processTagChild(childTagWorker, context);
}
}
And make use of the PageMarginBoxImagesTagWorkerFactory by specifying it in ConverterProperties:
HtmlConverter.convertToPdf(htmlSrc, pdfDocument,
new ConverterProperties()
.setTagWorkerFactory(new PageMarginBoxImagesTagWorkerFactory()));