Adding bootstrap glyphicons in the text entity of a-frame - aframe

Like normal webpage, i wanted to include a glyphicon inside a text entity. For example, in below scene, i have included a text with value "Stop watch" on a plane.
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded>
<a-plane position="0 0 0" rotation="-90 0 0" text="value:Stop watch;align:center;width:5;color:black;"></a-plane>
</a-scene>
</body>
Now, like normal webpage, i wanted to replace this text value with a glyph from bootstrap.
<span class="glyphicon glyphicon-time"></span>
Is it possible?

a-text renders the sets of text from preset font libraries. I'd suggest using the glyphicon as an image.
<a-plane material="src: myimage.png"></a-plane>
You could use the glyphicons, if you had a font in the necessary format, which would have the glyphicons.

Related

how to find the name of the div that corresponds to the label used in the code inspector?

I am trying to find a way to add margin-auto to a tailwinds css class, so that I can center an svg image across a container. I can add the attribute in code inspect, but I cannot find the corresponding div tag in my code.
The inspect panel shows the div as tailwinds.css.1, but I don't have a class with that name. I have tried adding margin-auto to the svg tag itself and all the surrounding div tags, as well as the Logo component in which the svg is defined. None of them work to center the image.
How can I find the name of the div tag from the inspect panel?
<footer className="bg-slate-50">
<Container>
<div className="py-16 display-block mx-auto">
<Logo className="display-block mx-auto" />
mx-auto on the svg should do the trick
https://play.tailwindcss.com/o33Y2yn5KP
In order to inspect the required component you can use the DOM methods. For example if you want to target the <div className="py-16 display-block mx-auto"> , you can use like
document.getElementByTagName("Container").getFirstElementChild()
For centering the Logo, you just to need the mx-auto to that component only .I have rewritten your code below.
<script src="https://cdn.tailwindcss.com"></script>
<footer class="bg-slate-50">
<div class="container mx-auto"> <!-- adding the container class to the this outer div -->
<div class="py-16 display-block">
<!-- Consider it as you LOGO component -->
<svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mx-auto" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="11" />
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
</svg>
<!-- LOGO compnent ends -->
</div>
</div>
</footer>
Try to implement this but remember to replace class with className.
Also you can view the code with more better preview here
Did you tried to change display-block by only block on your logo component ?
display-block doesn't exist in tailwindcss

Using Bulma CSS, implement scrollbar-free page that fills the viewport with a central inline SVG that scales to fill the space

This question is about using Bulma css.
I'm looking for a way to size my content so that there are no scrollbars.
At the moment there is just a navbar and an inline SVG.
The goal is for the SVG to be scaled so that it maintains its aspect ratio, and expands so that its largest dimension matches the available width and remaining height of the viewport.
The pure CSS version is basically this answer (and many others like it), but I want to stick with Bulma css classes (v 0.9.1).
It feels like it should be easy, but I'm not getting the result that I want.
I found that putting height="92vh" on the svg element was almost ok, but I don't want to have to continue tuning the height as I add elements to the document.
My document looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Tool</title>
</head>
<body height="100vh" class="is-flex is-flex-direction-column">
<nav class="navbar" role="navigation" aria-label="main navigation">
<!-- navbar details elided -->
</nav>
<div class="container is-fluid is-flex-grow-1 is-flex-shrink-1" id="scene_parent">
<!-- inline svg element is added here programmatically -->
</div>
</body>
</html>
The SVG element looks like:
const svg = `
<svg id="picture" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
${polyOne}
${polyTwo}
</g>
</svg>`;
where vb is a calculated viewBox, middle is the horizontal middle of the viewbox, and polyOne and polyTwo are strings representing polygons.
What I thought I could achieve was to have the parent div (#scene_parent) resize itself and then get the svg to choose its height from the parent div.
It doesn't work. The svg is invariably rendered too high, thus scrolling down the page.
I would be grateful if you could show me my mistake.
This worked for me although it's not exhaustively tested with different SVGS's:
<figure class="image is-16by9">
<svg class="has-ratio" width="200" height="50" viewBox="0 0 200 50">
...
</svg>
</figure>
I wrapped the SVG with <figure class="image is-16by9"> and added has-ratio class to the SVG element.
So SVG becomes:
const svg = `
<svg id="picture" class="has-ratio" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
${polyOne}
${polyTwo}
</g>
</svg>`;

I can't get any custom url cursor to work

This is my first bug so be gentle. I just can't get a custom url cursor to work. When using a standard one like "pointer" everything works, but when using a url, either local or remote it just does nothing.
I've come across similar issues being solved here but none of them are working for me (checking the sizing, file type, url location...)
My goal was for it to appear when hovering an svg image. I've tried styling it inside the svg file itself, it works fine for "pointer" but not for "url".
I've tried adding the svg file inside an tag, and styling the cursor inside it, works with "pointer", doesn't work with "url".
Tested on different browsers, none of them respond to it.
What am I doing wrong? See below some of the stuff I've tried:
<svg ...>
<style>
svg {cursor: url(01ssss3326.cur);}
</style>
</svg>
doesn't work
<svg ...>
<style>
svg {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=107471);}
</style>
</svg>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: url(http://www.rw-designer.com/cursor-extern.php?id=109070);">
</body>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: pointer;">
</body>
this works
<svg ...>
<style>
svg {cursor: pointer;}
</style>
</svg>
this works too
Is that working in this way? I guess you are just missing ""
<svg ...>
<style>
svg {cursor: url("01ssss3326.cur");}
</style>
</svg>
This is another example which I used in one of my project and it works. I am passing it in my css
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='38' viewport='0 0 100 100' style='fill:black;font-size:19px;'><text y='50%'>🚀</text></svg>") 16 0,auto;

How do I change my checkbox colours on the following page?

I'm trying to adapt some code from the following page:
https://plnkr.co/edit/plSzOtlpPXFguBIY1JwB?p=preview
When I click 'Column', the checkboxes are pink.
The style seems controlled as follows:
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
<script src="https://unpkg.com/ag-grid-enterprise#18.1.1/dist/ag-grid-enterprise.min.js"></script></head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-material"></div>
I'm trying to follow and trace the .css but I'm having trouble doing so.
How would I, for example, change the checkboxes to blue?
I'm trying to follow and trace the .css but I'm having trouble doing
so.
How would I, for example, change the checkboxes to blue?
Here's how to do this using Chrome's Developer Tools:
Inspect a checked checkbox: <span class="ag-icon ag-icon-checkbox-checked"></span>
Look for this CSS in the styles panel:
.ag-theme-material .ag-icon-checkbox-checked:empty {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiNGRjQwODEiLz48L3N2Zz4=);
}
Right-click the underlined data:image... part, click "Open in new tab".
In the new tab, right-click "View page source".
Here's your SVG (formatted):
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z"
fill="#FF4081"
/>
</svg>
You need to change the fill to the desired colour. I went for #1976D2 (blue[700]).
You can just save the SVG file and point to that in the CSS if you want to. Otherwise, here's how to get it back as a data URI.
Put your SVG into some random web tool. You don't particularly have to use base64 these days for SVG, but I'm not going to get in to that.
I used this one: https://dopiaza.org/tools/datauri/index.php
Put the output in the original CSS:
.ag-theme-material .ag-icon-checkbox-checked:empty {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiMxOTc2RDIiLz48L3N2Zz4=);
}
Put this new CSS somewhere in your code. It must be after the original ag-grid CSS.
The end: https://plnkr.co/edit/BuxqByk5Py0vW0qUfPbx?p=preview
They are not using real checkboxes, see the HTML structure
<span class="ag-column-select-checkbox" role="presentation" ref="cbSelect">
<span class="ag-checkbox-checked" role="presentation">
<span class="ag-icon ag-icon-checkbox-checked"></span>
</span>
<span class="ag-checkbox-unchecked ag-hidden" role="presentation">
<span class="ag-icon ag-icon-checkbox-unchecked"></span>
</span>
<span class="ag-checkbox-indeterminate ag-hidden" role="presentation">
<span class="ag-icon ag-icon-checkbox-indeterminate"></span>
</span>
<span class="ag-checkbox-label" role="presentation"></span>
</span>
they're using spans, when you check those elements styling you can see they have images set up as background like this one that its being used for the ag-icon-checkbox-checked element.
They're using javascript to achieve this.
But here you can see an article and a codepen on how to customize checkboxes with css:
w3schools - How TO - Custom Checkbox
CodePen - Custom checkboxes CSS only
Hope it helps,

cursor:pointer and default not reflecting immediately

I have two banners (images) which keep switching every 4 seconds. One image is clickable and the other is not. Below is the code,
<div class="contentdiv">
<h:commandLink action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
<img src="imagePath" width="590" height="210" border="0" style="cursor: pointer;"/>
</h:commandLink>
</div>
<div class="contentdiv">
<img src="imagePath" width="590" height="210" border="0" style="cursor: default;"/>
</div>
I have specified style for 1st and 2nd image as pointer and default respectively.
When images switch, 1st image will appear as Pointer to user when he moves his cursor over the image. When a switch happens to 2nd image, and when user has not moved his cursor away from the image, 2nd image will also appear as Pointer instead of Default.
Only when User clicks on 2nd image, it will change as Default and then User will come to know that 2nd image is not clickable.
Same thing happens with 1st image. When User is in 2nd image and when a Switch happens from 2nd image to 1st image, Cursor will still be default instead as Pointer. So, User doesn't know that 1st image is clickable.
Instead of using inline style.,just create two simple classes for your cursor styles like as follows.
For CSS :
<style type="text/css">
.clickable {
cursor:pointer;
}
.not_clickable{
cursor:default;
}
</style>
For HTML :
<div class="contentdiv">
<h:commandLink action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
<img src="imagePath" width="590" height="210" border="0" class="clickable"/>
</h:commandLink>
</div>
<div class="contentdiv">
<img src="imagePath" width="590" height="210" border="0" class="not_clickable"/>
</div>
After that you can easily switch over the classes as per your wish, while you triggering or clicking the image.
Try pointer-events:none; css property mention where ever you want.

Resources