Since I'm learning html/css I'm working and making some examples, and I want to create a div which would look like this, but my content is 'glued' together.
I've tried varios ways and noone of them is near this, since I'm really new to html / css!
If you run code below you might see it looks bad, there is no space between texts, nothing is vertically aligned, and I don't know how to position size to the middle of div.
Here is my code :
<div style={{ background: '#e1e1e1', marginBottom: '5px' }}>
<span id="delete" style={{ float: 'right', display: 'inline-block', padding: '2px 5px' }}>
x
</span>
<i className="icon ion-md-checkmark-circle" />
TestImg1.PNG
3.98KB
</div>
Could anyone help me to achieve this with explanation how it's done so I might learn a lot from it.
Thanks and cheers!
Thanks
You could use bootstrap's grid system instead.
<div class="container">
<div class="row row-grey align-items-center">
<div class="col-2">
<i class="material-icons icon-green">
check_circle
</i>
</div>
<div class="col-3">
File.png
</div>
<div class="col-6">
52kb
</div>
<div class="col-1">
x
</div>
</div>
</div>
Here's the fiddle
You could utilize Flexbox to handle the layout and ordering of your elements. Set display: flex on the parent <div>. Define the ordering of your elements using the ordering property with one being the first and three being the last. After that, assign margin-left: auto; to the delete element to push it to the end of the parent <div>. You can see the code rendered here: Codepen example
<div style={{ display: 'flex', background: '#e1e1e1', marginBottom: '5px', padding: '2px 5px' }}>
<span id="delete" style={{ order: '3', marginLeft: 'auto' }}>
x
</span>
<i className="icon ion-md-checkmark-circle" style={{ order: '1' }} />
<span style={{ order: '2', marginRight: '10px' }}>
TestImg1.PNG 3.98KB
</span>
</div>
You can also try Flex.
<div style={{ background: '#e1e1e1', marginBottom: '5px', display:flex }}>
<I style={{flex: 0}} className="icon ion-md-checkmark-circle" />
<span style={{flex: 1, marginLeft: 8px}}>
TestImg1.PNG
</span>
<span style={{flex: 1}}>
3.98KB
</span>
<span id="delete" style={{ flex: 0, padding: '2px 5px' }}>
x
</span>
</div>
display: flex is applied to the container.
flex: 1 applied to texts and it means automatically stretch with ratio 1.
flex: 0 applied to icons and it means don't stretch.
If you want to learn more, take a look at here
Related
im trying to put an element Badge to the right of header menu in my page, but I don't know how do that, currently de Menu element of ant design push to another position the badge (bell icon):
The code:
const HeaderComp = (props) => {
let navigation = useNavigate()
const root= AppConfig.BucciaratiRoot.length>0 ? "/"+AppConfig.BucciaratiRoot:"/"
return (
<Layout>
<Header className="header" style={{position:'fixed', zIndex: 1, width: '100%'}}>
<div style={{float:'left', marginRight:'5%'}}>
<img style={{width: 120, height:31}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} >
<Menu.Item key="1" onClick={()=>navigation(root)}>Home</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
<div style={{float:'right', marginLeft:'5%'}}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</Header>
</Layout>
)
}
How cain I put the badge to the right of the header menu ?
You can use flex instead of float, and then but every element you want to be at the right in a div and every element to the left in another div, and using some justify-content:"space-between" property in flex you can make the space left in the navbar to be in between those to divs.
See more on FlexBox
your code should look like:
return (
<Layout>
<Header
className='header'
style={{
position: "fixed",
zIndex: 1,
width: "100%",
display: "flex", // make the header flex
justifyContent: "space-between", // put all the space between the left and right sections of the menu
}}
>
<div className='header-left'>
{/* The left side of the menu */}
<div style={{ /* remove float */ marginRight: "5%" }}>
<img
style={{ width: 120, height: 31 }}
src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png'
/>
</div>
<Menu
theme='dark'
mode='horizontal'
defaultSelectedKeys={["1"]}
>
<Menu.Item key='1' onClick={() => navigation(root)}>
Home
</Menu.Item>
<Menu.Item key='3'>About</Menu.Item>
</Menu>
</div>
<div className='header-right'>
{/* The right side of the menu */}
<div style={{ /* remove float */ marginLeft: "5%" }}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</div>
</Header>
</Layout>
);
<Layout>
<Header
className="header"
style={{
position: 'fixed',
zIndex: 1,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
}}
>
<div>
<div style={{ marginRight: '5%' }}>
<img
style={{ width: 120, height: 31 }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"
/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
<Menu.Item key="1" onClick={() => navigation(root)}>
Home
</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
</div>
<div style={{ marginLeft: '5%' }}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</Header>
</Layout>;
Here you will see the start of the NotesFromCoachesForWrestlers component circled
The problem is When the notes on the component on the left increase the component on the right adds whitespace which I don't want, if anything I would want it at the bottom of the component.
PLease note so far I have tried:
position: relative and top: 0 on the containing div
It seems the card div with class card-body is growing
Even if I set the div to have a height of 50px it still grows tho
<div className="col-12">
<div className="d-flex flex-wrap justify-content-around">
<div className="card my-1 p-1 col-sm-12 col-md-6" style={{ border: "1.3px solid black" }}>
<div className="card-body">
<GradingDashboardMadeByLuke UID={wrestler1UID} />
<div
className="card-text"
style={{ color: "black", fontSize: "smaller" }}
>
The previous 5 Logins for {props.wrestler1FullName} were:{" "}
{allLoginsForWrestler1.map((login) => {
return (
<p>
<Moment fromNow>{login.login_was_created_at}</Moment> -{" "}
</p>
);
})}
</div>
</div>
<div>
<NotesFromCoachesForWrestlers UID={wrestler1UID} />
<SubmitNoteForWrestler
wrestlerID={wrestler1UID}
wrestlerFullName={props.wrestler1FullName}
/>
</div>
</div>
<div
className="card my-1 p-1 col-sm-12 col-md-6"
style={{ border: "1.3px solid #ff7824" }}
>
<div className="card-body">
<h5 className="card-title">
<strong>{/*{props.first_name} {personalInfo.last_name}*/}</strong>
</h5>
<GradingDashboardMadeByLuke UID={wrestler2UID} />
<div
className="card-text"
style={{ color: "black", fontSize: "smaller" }}
>
The previous 5 Logins for {props.wrestler2FullName} were:{" "}
{allLoginsForWrestler2.map((login) => {
return (
<p>
<Moment fromNow>{login.login_was_created_at}</Moment> -{" "}
</p>
);
})}
</div>
</div>
<div className="mb-auto">
<NotesFromCoachesForWrestlers UID={wrestler2UID} />
<SubmitNoteForWrestler
wrestlerID={wrestler2UID}
wrestlerFullName={props.wrestler2FullName}
/>
</div>
</div>
</div>
</div>
I'm using an image and trying to position some text in front of the image and center, as seen in the screenshot from my design below:
I'm using the below code and found out how to layer the text over the top with z-index, but I'm wondering how I can center the text inside the parent div as seen in the design?
Code:
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `50%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
</div>
However, this gives me the text centered on the entire page i think? Perhaps due to the 50% top/left properties?
you should set a width to the parent div to see the difference in flex alignment.
See the code below.
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `10%`,
width: `80%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
As you can see i just changed the left and width parameters to get the expected result. I hope this will solve your problem
The words, and buttons are right next to each other to the left. How can I make the words stay on the left and the buttons stay on the right?
The picture of the page is below.
This is a page written in React.
The issue is somewhere in the Accordian.Header container. If you remove it, the elements stay on opposite sides of their container as desired.
<MainScreen title='Welcome Back Anthony!'>
<Button style={{ marginLeft: 10, marginBottom: 6 }} size='lg'>
Create New Note
</Button>
{notes.map((note) => (
<Accordion>
<Accordion.Item>
<Card style={{ margin: 10 }} key={note._id}>
<Accordion.Header style={{ width: '100%'}}>
<Card.Header style={{ display: 'flex' }}>
<span
style={{
color: 'black',
textDecoration: 'none',
flex: 1,
cursor: 'pointer',
alignSelf: 'center',
fontSize: 18,
}}
>
<div as={Card.Text}
variant='link'
eventKey='0'>
{note.title}
</div>
</span>
<div>
<Button href={`/note/${note._id}`}>Edit</Button>
<Button
variant='danger'
className='mx-2'
onClick={() => deleteHandler(note._id)}
>
Delete
</Button>
</div>
</Card.Header>
</Accordion.Header>
<Card.Body>
<Accordion.Body>
<h4>
<Badge variant='success'>
Category - {note.category}
</Badge>
</h4>
<blockquote className='blockquote mb-0'>
<p>
{note.content}
</p>
<footer className='blockquote-footer'>
Created on - date
</footer>
</blockquote>
</Accordion.Body>
</Card.Body>
</Card>
</Accordion.Item>
</Accordion>
))}
</MainScreen>
I am trying to make my page responsive and I would like in the mobile version of the page to change the width of a button to take up the whole width of the page. This is how the desktop version should look:
And this is the mobile version how it should look:
I can't figure out how to change my button so that it takes part all the screen width using bulma. This is my code:
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span className="mx-4">Back</span>
</button>
<button className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span>Go to Basket</span>
</button>
</div>
I have tagged HTML, CSS and Bulma because I am not sure which of the following could solve the problem, as I am using bulma but this is an external problem to bulma reactiveness
You could also use #media tags in CSS.
<style>
/* Default Styling */
.button {
width: 300px;
}
/* Only applies if the window with is under 600px */
#media only screen and (max-width: 600px) {
.button {
width: 100%;
}
}
</style>
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span className="mx-4">Back</span>
</button>
<button className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span>Go to Basket</span>
</button>
</div>
Try This
#test {
width: 100%;
min-width: 50px; // add this if you want
max-width: 300px; // add this if you want, adjust accordingly
}
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button id="test" className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span className="mx-4">Back</span>
</button>
<button id="test" className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
<span>Go to Basket</span>
</button>
</div>