I've juste created a card group on my homepage but I can't center my component CardGroup (see enclosure).
This is the sm-mode. But in lg mode I want my cards to be next to each other. In both cases, it should be centered. I tried to add a margin on the CardGroup or a display (flex, wrap) .. Nothing worked ^^ Any ideas? Thanks!
there is no CSS on both of them :)
HOME
// import react-Bootstrap's component(s)
import {
CardGroup,
Row,
Col,
} from 'react-bootstrap';
import SearchBar from 'src/components/SearchBar';
import EventCard from '../EventCard';
const Home = () => (
<div>
<SearchBar />
<div className="list">
<Row sm={1} md={2} className="g-4">
<Col className="card-columns">
<CardGroup>
<EventCard />
<EventCard />
<EventCard />
</CardGroup>
</Col>
</Row>
</div>
</div>
);
export default Home;
EVENT CARD
import './eventCard.scss';
import {
Card,
Button,
} from 'react-bootstrap';
const EventCard = () => (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
export default EventCard;
try this
.list {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
check the dom elements whether these properties are applied else try to add !important since some bootstrap's class override yours.
refer: https://codesandbox.io/s/gallant-haze-6hxg1s?file=/src/App.js
Related
when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}
I am working on functionality in alpine js where I need to add a radio button inside the template tag.
Here is what I am doing.
<div class="customRadioStyle">
<template x-for="name in record.names">
<input type="radio" :value="name.value" :id="name.id">
<label :for="name.id" x-text="name.value"></label>
</template>
</div>
But this code gives me the following error.
Alpine: <template> tag with [x-for] encountered with an unexpected number of root elements. Make sure <template> has a single root element.
Is there any solution for this?
I check this link too but still not able to find a solution for this.
https://github.com/alpinejs/alpine/issues/539
Any help would be appreciated.
Just do what the error says and make sure there's a single element inside the <template>. In you case, you can just add the <input> inside the <label> or wrap them both with a <div>:
window.MyComponent = () => ({
names: [{
id: 'name1',
value: 'Name 1',
}, {
id: 'name2',
value: 'Name 2',
}, {
id: 'name3',
value: 'Name 3',
}],
});
body {
font-family: monospace;
}
label {
display: flex;
align-items: center;
padding: 4px 0;
}
input {
margin: 0 8px 0 0;
}
<div x-data="MyComponent()">
<template x-for="name in names">
<label :for="name.id">
<input type="radio" :value="name.value" :id="name.id" name="radioGroup">
<span x-text="name.value"></span>
</label>
</template>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
Note that in the event handler I'm still calling it e, but in the HTML I've used download($event) instead of download(e).
What`s wrong with this code? After render div element scroll has to be in the bottom of div element. scrollTop not saving the value after func
<main>
<div v-if="messages">
<ul ref="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</div>
</main>
mounted() {
this.scrollToEnd();
},
methods: {
scrollToEnd() {
const height = this.$refs.messagesContainer.scrollHeight;
this.$refs.messagesContainer.scrollTo(0,height)
// doesnt work
// this.$refs.messagesContainer.scrollTop = height
}
}
main {
background-color: #fff;
height: 56vh;
ul {
height: 100%;
overflow: auto;
flex: auto;
}
}
you can get the y position of the element via the offsetHeight property like this:
var offsetTop = this.$refs.messagesContainer.offsetHeight;
You can find more information regarding offsetHeight, clientHeight and scrollHeight properties here
Note you need to call the scrollTo method on the window element:
example:
methods: {
scrollToEnd() {
var scrollHeight = this.$refs.messagesContainer.offsetHeight;
this.$refs.messagesContainer.scrollTop = scrollHeight;
}
}
Hope this helps :)
<main>
<ul v-if="messages" id="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</main>
scrollToEnd() {
const element = document.getElementById('messagesContainer')
element.scrollTop = element.offsetHeight + element.scrollHeight
}
This seems to work on Nuxt. This also provides a smooth scrolling as well.
const element = this.$refs.messagesContainer;
element.scrollIntoView({ behavior: "smooth", block: "start" });
I am trying to dynamically change font-size in v-text-field default slot based on the length of the text. However, it seems that v-text-field ignores any specification I specify in the section.
Here is the code
<v-text-field
v-model="attr.name"
hide-details
:readonly="true"
class="core-select"
label="Core Attribute"
>
<template
v-slot:default
>
<div :class="attrNameStyle[0]">
{{ attr.name }}
</div>
</template>
</v-text-field>
I have verified that attrNameStyle[0] is gets set correctly, however that style never gets applied to the default slot. I can change the way input slot looks via this CSS class .v-text-field__slot input { ... } however, I can't update that CSS dynamically.
Thanks for help!
Edit: Adding more context.
.core-select {
width: 180px;
}
.short-core-select {
font-size: 12px;
}
attrNameStyle[0] is set to either '', or 'short-core-select'.
Since v-text-field__slot is working, you could edit that CSS from a higher level.
<v-text-field
v-model="attr.name"
hide-details
hide-details
class="core-select"
:class="attrNameStyle[0]"
label="Core Attribute"
>
<template>
<div>
{{ attr.name }}
</div>
</template>
</v-text-field>
<style>
.short-core-select .v-text-field__slot {
font-size: 12px;
}
</style>
I am using latest version of Microsoft ChatBot, when i send or receive messages,
the display does not scroll down to the latest one
the entry bar is starting at the top of the window(not from the bottom of the window, attached image) not sure if this is the intended behaviour.
react component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</main>
</Aux>
)
}}
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!