Is there a way to align the dbc.card image to center in Plotly Dash Bootstrap? I have gone through the documentation and I could find only "Top" and "Bottom". Thanks. Below is the code snippet:
import dash_bootstrap_components as dbc
import dash_html_components as HTML
card = dbc.Card(
[
dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
dbc.CardBody(
[
html.H4("Card title", className="card-title"),
html.P(
"Some quick example text to build on the card title and "
"make up the bulk of the card's content.",
className="card-text",
),
dbc.Button("Go somewhere", color="primary"),
]
),
],
style={"width": "18rem"},)
Needed to solve the same question, this is what I found using Bootstrap cheatsheet:
dbc.CardImg(src="/static/images/placeholder286x180.png", className = 'align-self-center')
I'm new to this so it might not be the most correct, but it worked for me.
Related
original title: VueJS with Bootstrap, stretched link with hidden button
I am trying to make clickable bootstrap cards in a VueJS project, I want clicking the card to open a collapsible element within the card, right now I have something that works using a button with the "stretched-link" class
<b-card
v-bind:img-src="`https://via.placeholder.com/200`"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<b-button v-b-toggle="'collapse-' + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
<b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
<b-card>This is the collapsed content</b-card>
</b-collapse>
</b-card>
I'm trying to make this work without having a visible button in the card, I've tried using the invisibile class and the d-none class (class="stretched-link d-none" and class="stretched-link invisible")
In both cases, the button is made invisible but so is the stretched link. Is there any way to maintain the active stretched link area while hiding the button icon?
ok I figured out a solution for my particular use case with JQuery,
What I was really after was a clickable image with the functionality of a bootstrap button. So this is a solution for that problem, not exactly hidden stretched links.
In my Vue component I define the triggerButton method, which finds a button by its id and clicks it.
<script>
import $ from 'jquery'
export default {
props: //just filling this for structure,
data() {
return {
//stuff
}
},
async mounted() {
//more placeholder structure
},
methods: {
//here is the sauce
triggerButton(id) {
$("#"+id).click();
},
}
}
</script>
Then in the <template> body I have a hidden button. "unique-identifier" is just a unique number that is put in, it's needed in my case because im generating many of these elements in a for loop and they need to have distinct ids.
In this case I'm using the bootstrap button to trigger a unique modal.
<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>
Then finally I have an image displayed in the bootstrap card, and on click i call the triggerButton method that will now display my modal.
<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>
I am trying to create a website using React and Tailwind for the first time.
I want to display a Hero Section at the top and Nav bar at the bottom of the screen.
My strategy for doing this would be to have two separate divs. The hero section at 80vh and the Navbar at 20vh to cover the full page.
When trying to set this up I am trying to set my Hero Component up as such:
const HeroSection = () => (
<div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>
);
export default HeroSection;
I am using the documentation of h-4/5 for 80% screenspace as document here:
https://tailwindcss.com/docs/height
Unfortunately the front end does not show this effect and here is the result, the Hero Section is the green div, it does not fill 80%vh but remains as big as high as the content.
Here is where the app is being compiled:
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection />
<Navbar />
</NFTProvider>
);
export default Marketplace;
And here is the Provider im using to transfer data that wraps the two components and what is returns
return (
<NFTContext.Provider value={{ nftCurrency, buyNft, createSale, fetchNFTs, fetchMyNFTsOrCreatedNFTs, connectWallet, currentAccount, isLoadingNFT }}>
{children}
</NFTContext.Provider>
);
From I can tell this is not interfering with the CSS in any way, what am I doing wrong in regards to tailwind and how do I achieve my desired composition?
Thanks alot
You have set the height of your div (hero section) to h-4/5 which is indeed 80% height. But that height is only relative to its parent window. In order to do the styling you're thinking of you have to specify that you want the height of the whole viewport.
So change it to <div className="h-[80vh] bg-green border-nft-gray-1">Hero Section</div>
Instead you can provide the height when you use the components.
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection className="h-4/5" />
<Navbar className="h-1/5" />
</NFTProvider>
);
export default Marketplace;
And remove h-4/5 from the herosection component itself .
I want to set a svg image as background image in my React project. However the code is not working. I have tried the following ways:
import log_bg from './Login background.svg'
useEffect(() => {
document.body.style.background = `url(${log_bg})`
}, [])
Method 2.
<div style = {{backgroundImage: `url(${log_bg})`}}>
TEXT
</div>
I have also tried using only background tag instead of backgroundImage. I have also tried background: log_bg [also backgroundImage: log_bg], but it also does not works. How to fix this?
I would like to make a custom toolbar for my quill editor. Therefore I would like to add another button to the toolbar for converting the text I enter into html code. I have tried several methods but they didn't work out. Please help me with an idea.
What i have in component.html:
<quill-editor [styles]="{height: '200px'}" [modules]="editorModules" (onEditorChanged) = "changedEditor($event)"></quill-editor>
And here is what i have in component.ts:
editorText='';
editorModules = {
toolbar: [
['bold', 'italic', 'underline'],
[{align:''}, {align:'center'}, {align:'right'}, {align: 'justify'}],
[{'indent': '-1'},{'indent': '+1'} ],
[{'size' : ['small', false, 'large', 'huge']}],
['color'],
['link'],
[{'list': 'bullet'}, {'list': 'ordered'}],
['image']
]
}
changedEditor(event: EditorChangeContent | EditorChangeSelection) {
console.log('editor got changed');
this.editorText = event['editor']['root'];
}
Here is a photo of my current Text Editor:
Text Editor
I would very much appreciate if you would try to help me, thank you.
My goal is to render different pages with different layouts to one div on my index page. The idea is that only one div ("create-focus") changes and I want the other pieces to only have to load once.
This is a proof-of-concept so everything that I am building is local (I have no addresses to redirect to. Only local files to import.)
I have an index.jx as thus:
<div class="col-md-12">
<div id="create-header"></div>
<div id="create-top-banner"></div>
<div id="create-menu"></div>
<div id="create-focus"></div>
<div id="create-footer"></div>
</div>
I would like to replace the id "create-focus" with new html from another jsx :
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./AdBanners.css";
class AdBanners extends Component {
render() {
return (
<div className="AdBannerBody" id="ad-banners" ref={this.myRef}>
<h2>Stuff and Things</h2>
</div>
);
}
}
export default AdBanners;
const wrapper = document.getElementById("create-adBanner");
wrapper ? ReactDOM.render(<AdBanners />, wrapper) : false;
I have tried to load just the html, but it simply prints the code to my screen as text. Do I need to run another render call? How is that possible?
I don't understand very good what you're trying to do, is it to set the inner html of the div "create focus"?
take a look at:
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
You are misusing ReactDOM.render. The second argument should be a reference to a normal HTML element you want to render your element as the child of. So in your case you would want to call:
ReactDOM.render(<AdBanners />, document.getElementById("create-focus"))
Although I'm not sure this is exactly what you're trying to do. The setup for this app seems very strange to me.