I'm using react-spinkit/spinkit to create a three-bounce spinner that I want to use next to some text in place a static ellipsis.
Here is my current Typescript react code:
<div style={ {display:"flex", flexDirection:"row"} }>
<div>Loading server details</div>
<Spinner spinnerName='three-bounce' />
</div>;
It works well, but the spinner looks too big:
It looks especially out of place on an iPhone.
How can I scale down the spinner to about half that size?
(But in a "relative" kind of way, I don't want to specify pixel sizes.)
I tried surrounding the spinner element with div setting the width and height css style to 50%:
<div style={ {width:"50%", height:"50%"} }>
<Spinner spinnerName='three-bounce'/>
</div>
But that didn't seem to do anything.
After lookin at the css source for react-spinkit, I ended up adding this to my global css file:
.sk-three-bounce > div {
width: 9px;
height: 9px;
}
It doesn't do it in a "relative" way, but then neither does spinkit (the original is just hardcoded to 18px).
Related
so far I was trying to display a background image using css however, the image is not showing up on the screen.
this is what I did so far:
import React from 'react';
import './LoginScreen.css';
const LoginScreen = ()=>{
return (
<div className="container">
</div>
)
}
export default LoginScreen;
*,*::before,*::after{
box-sizing: border-box;
font-family:Arial, Helvetica, sans-serif;
}
.container {
background-image: url("../../Images/online_auction.jpg");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
and for my folder structure I have:
Images -->online_auction.jpg
and Screens -->LoginScreen --->LoginScreen.js + LoginSCreen.css
Add some content in container section or set height and width property to the container.
You can check in the browser devtools what the actual problem here is because it can be multiple things. First thing could be that the route is incorrect, if you select the div element in devtools you can hover over the url you provide in the css and it should show you the image if the route is correct. Or you can click on it and if it opens the image in a new tab everything is correct if not you have a wrong path to the image.
Second thing is you don't have any actual content in the div so the element has a width/height of 0px/0px. Since you are setting the image as a background you need to have actual space where that background can appear. I would suggest hardcoding some width and height values until you are sure the image is loading correctly.
you must adjust width class container if want to see background-image in class container, if you want to see background-image your page, you can write in tag body don't write in tag class.
or your address is not found maybe you can change:
background-image: url(".../Images/online_auction.jpg");
I have an app that contains 4 components inside it:
<div [#routerTransition] class="position-relative overflow-hidden pt-3 m-md-3">
<div class="mx-auto mb-5 pb-1 container">
<app-set-vehicle-details id="step1" (step1Finished)="enableStep2($event)" (busy)="setBusy($event)"></app-set-vehicle-details>
<app-product-selection id="step2" *ngIf="step2Enabled"></app-product-selection>
<app-product-details id="step3" *ngIf="step3Enabled"></app-product-details>
<app-customer-details id="step4" *ngIf="step4Enabled"></app-customer-details>
</div>
</div>
My view is supposed to look like this:
That corresponds to the app-set-vehicle-details component. Note the grey background there.
But when the second component is added, the background turns white:
But don't understand why this background is changing like that. Some css attached:
.theme-main [_nghost-etm-c5] {
background-color: #F0F0F7 !important;
color: #4D4F5C !important;
}
This is a screen capture of the main container:
I find no reason why the white part is appearing. The only thing that happens is that the second component appears dynamically, after an action. I'm not sure if that's the responsible of that height reprint?
Thanks for any help in advance!
To clarify a little bit:
Styles are being retrieved from a custom library, called styles.scss
This is the style applied to the body:
So h-100 from Bootstrap, what produces:
But still not working... Any ideas?
In your case, I suggest setting the background color for .pb-1 class in the main component CSS file.
Every Angular Element would be affected by common CSS (like bootstrap library) and its own CSS which reads from the CSS file of the component. The latter is specific to that component and wouldn't affect other components CSS even if they have shared class names.
Have you checked the height of your body? The body doesn't update it's height when components are added so the height of your component is limited to the height of the body. To avoid that, set the min-height of the body & html in your global css file to 100% like so:
body, html {
min-height: 100%;
}
set background color on the body tag in styles.css
body {
background-color: grey !important; /*Add the color you want to set */
}
you can also do this for the main div using some class
I have built my app using react-bootstrap
I have an image tab inside my component. It looks like this:
render() {
return (
<div id="homePage">
<div class="hero">
<Image src="/images/welcome-page-pic.jpg" responsive />
</div>
</div>
);
Yes, the tag for image in this framework is "Image" not "img".
This will display the image but its not very responsive, so I did some playing around in dev tools and found a styling that worked if I used the image as a background image in css using the following styling:
.hero {
background-image: url(/images/welcome-page-pic.jpg);
height: 400px;
background-size: cover;
background-position: center right;
}
This, of course, requires removing the tag and src altogether, but doing that just removes the image. If I try adding the styles to the HTML (or rather JSX) instead of the css, then the page just doesnt load at all. I also tried leaving the image and src and just adding the css minus the background-image styling - also a no go. Not sure if this is an issue with the framework or something stupid im doing. Thanks.
UPDATE: after playing around a bit more, I found that for whatever reason, my local host is not accepting the class "hero" into the nested div. If I add it in devtools manually, the image appears and responds how i want it to. Now the question is why the class isn't assigned to the div upon page load of the jsx.
I think it should be className in react, from memory.
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
When you change the .card height in chrome console you will see that the small card tiles in the background hiding behind the big card, suddenly disappear completely when the animation is done.
Is there a way to tell a hero transition to not remove the parent section? Or a way to make the parent section disappear but gradually?
In this case it is ok because you don't see them disappear but when the background has a number of small cards that do not fit behind the large card it would look way better if they just stay in the background.
EDIT1:
#mini {
display: block !important;
}
#mini *[hero] {
opacity: 0.5 !important;
}
<section id="mini">
<template repeat="{{items as item}}">
<div class="chip" hero-id="{{item.id}}" hero?="{{muts === item }}" on-tap="{{transition}}">
</div>
</template>
</section>
EDIT2:
The second hero is not in the middle of the view port anymore when the background chips exceed the screen size.
Another workaround I found is to add an id and a bit of CSS to the core-animated-pages component.
My core-animated-pages looks like this :
<core-animated-pages selected="{{page}}" transitions="hero-transition"
on-core-animated-pages-transition-end="{{complete}}">
<section id="mini">
<div class="chip-container" hero-p on-tap="{{transition}}">
...
</div>
<div class="chip-container" hero-p on-tap="{{transition}}">
...
</div>
</section>
<section id="details">
...
</section>
</core-animated-pages>
Nothing special, I just have two lines of "chips". Note the id on the "chip-container container", it's the one that enables us to do some css modification directly in components/core-animated-pages/core-animated-pages.css. Those modifications are the following :
/*
Enables us to keep the "chip-container container" visible even after the hero transition
*/
*#mini {
display: block !important;
}
/*
Fades out the "chip" that realized a transition ([active] and .core-selected are removed
from the "chip-container container" during the transition)
*/
*#mini *[hero] {
opacity: 0 !important;
}
/*
Fades in the "chip" when everything goes back to it's original state ([hero] isn't
removed from the chip, but [active] and .core-selected are re-set on the "chip-container
container", so we use this to distinguish wish state we're in, and so if it's "legit" to
see the "chip")
*/
*#mini[active] *[hero] {
opacity: 1 !important;
}
Might not be the cleanest way but it works, I hope I explained well enough how I managed to achieve this result, and every tiny part of my solution. Feel free to comment / ask if that's not the case :)
If you add cross-fade-all to the list of transitions, the background cards will more gracefully fade out, rather than disappearing at the end of the animation:
<core-animated-pages
selected="{{page}}"
transitions="hero-transition cross-fade-all"
on-core-animated-pages-transition-end="{{complete}}">
You can test it on JS Bin.
Can you show your .js Code? You need to remove object.flush(); from your .js code. Hope this help.
I use this wonderful tool, tinyMCE, for editing pages at my website.
But i have a problem with the resizing of images.
Is it possible to change the way tinyMCE changes the size of the image?
Now the software changes the width and height inside the ..
<img src="..." width="..." height="..." />
But this setting gets overridden by the CSS.
(I have some general img settings in the CSS, width, height:auto, and centering on page.)
If the users define a size for the image, i want this new size to override the general css.
But with the img parameter width & height. this is notpossible. CSS override their value.
So.
I want tinyMCE to change the size of the image by CSS. Is this possible?
ex:
<img src="..." style="width:...;height...;" />
(The size is set by draging the corner of an image to the size you want.. and not edited in html html code.)
Thanks for reading.
Matte
I bypassed this by adding a plugin in the project that handles the re-size event.
Just going to post it here in case someone ever needs it.
tinymce.PluginManager.add('imageresizing', function(editor, url) {
editor.on('ObjectResizeStart', function(e) {
if (e.target.nodeName == 'IMG') {
var selectedImage = tinymce.activeEditor.selection.getNode();
tinymce.activeEditor.dom.setStyle(selectedImage,'width', e.width);
tinymce.activeEditor.dom.setStyle(selectedImage,'height', e.height);
selectedImage.removeAttribute('width');
selectedImage.removeAttribute('height');
}
});
});
Of course you need to add the plugin to tinyMCE which is beyond the scope of this question, but it's not hard at all.
To solve the problem of getting the default image insert size to fit the container, i used
content_style: 'img {max-width: 100%;}'
Inside the tinymce.init({
It doesn't appear to be currently possible to easily change the way TinyMCE adds width and height tags to the img element. There is a feature request open to add this functionality Stop Prepopulating Image Dimensions.
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("height", "150");
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("width", "200");
Here "#ctl00_ContentPlaceHolder_RichTextBox_ifr" is id of textarea..
With this you can resize the image .. .. ..Sarath#f1