Could anybody tell me how can I achieve this style using flexbox? Pls note the modal close button in the right side of the photo.
This is what i have so far. I don't know how to place the close button on top of the image.
Below is my code for the bootstrap modal dialog box:
<Modal show={this.props.show} onHide={() => this.props.onHide()}
>
<Modal.Body className ="modal-body">
<div className = "data-container">
<div class="callout" data-closable>
<button class="close-button" onClick={() => this.props.onHide()} aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
{this.props.data}
</div>
</Modal.Body>
{/* <Modal.Footer className = "modal-footer">
{this.props.title}
</Modal.Footer> */}
</Modal>
And here is the CSS:
.modal-dialog {
display: flex;
max-width: 800px;
height:auto;
flex-direction:column;
justify-content: center;
padding-top:150px;
margin: auto;
}
.modal-content {
overflow: hidden;
border:none;
justify-content: center;
margin:auto;
}
.modal-body {
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:rgb(221, 221, 221);
padding: 2px;
}
.callout {
display:flex;
border: none;
display: block;
margin-left:47rem;
}
.close-button {
border: none;
background-color:rgb(221, 221, 221);
color:red;
margin:auto;
/* font-weight: bold; */
font-size:50px;
/* width:30px;
height:30px; */
}
Any help is greatly appreciated.
Thanks ✌️
First you need to specify your parent containers position as relative
.data-container {
position: relative;
}
And then set position as absolute and right to 0 on container that containers your close button
.callout {
position: absolute;
right: 0;
}
Demo here
Related
This following css works (it makes visible button2 when hovering on button1)
#btn1:hover ~ #btn2 { visibility: initial;}
But if I want to make the same for the pseudo element #btn2:after, the following code doesn't work
#btn1:hover ~ #btn2:after { visibility: initial;}
Is there a reason or a workaround for it ?
It could be that you need to add the content property to btn2 🤔
#btn1:hover ~ #btn2 {
visibility: initial;
background-color:red
}
#btn1:hover ~ #btn2:after{
visibility: initial;
content:' Soy el after';
}
<button id="btn1">Botón 1</button>
<button id="btn2">Botón 2</button>
You can also use display:none;
When you use visibilty:hidden; your buttons will still have width and height in your body element but when using display:none; you can place any element to that position.
body {
position: relative;
height: 100vh;
background-color: bisque;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap:1rem;
}
button{
height: 50px;
width:100px;
}
#btn2::after{
content: '';
width:20px;
height: 20px;
background-color: red;
display: none;
}
#btn1:hover ~ #btn2::after {
display: inline-block;
}
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
Obviously you are both right. I made some adjustments and it works... can't figure what was wrong
I used visibility parameter
I have button element which have icon and text inside of it. I would like to position icon to left side of button and text center of button.
Here is my button element:
<button className='button'>
<span className='buttonSpan>
<span className='buttonIcon'>
<Icon />
</span>
<span className='buttonText'>
Next
</span>
</span>
</button>
I tried to position each of them with justify-content but that doesn't work. Like this:
.button {
.buttonSpan {
display: flex;
justify-content: center;
.buttonIcon {
justify-content: flex-start;
}
.buttonText {
justify-content: center;
}
}
}
Any ideas?
If you can change button element to div, you can use css-grid:
.button {
display: grid;
grid-template-columns: auto 1fr;
justify-content: center;
max-width: 10em;
padding: 1em .5em;
background: transparent;
border: 2px solid grey;
border-radius: 1em;
cursor: pointer;
}
.button:hover {
background-color: gray;
color: white;
}
.buttonIcon {
justify-self: start;
}
.buttonText {
justify-self: center;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class='button'>
<i class="buttonIcon fas fa-cannabis"></i>
<span class='buttonText'>
Next
</span>
</div>
I am making a pretty simple bottomnav for a project I am working on, and I am having difficulty with the view in mobile mode. From standard desktop, I have a pretty simple, bottomnav with 4 icons, however when I inspect the page in mobile view, it only shows you either the first, or the first and 2nd icon. all of my styling for this component is:
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: rgb(75, 90, 72);
overflow: hidden;
position: absolute;
bottom: 0;
min-width:800px;
height:64px;
/* width: 100%; */
}
.navCont {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
.navButton {
margin-left:10vh;
margin-right:10vh;
min-width:10px;
}
.navButtonLeft {
margin-left:10vh;
margin-right:10vh;
min-width:10px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
img {
width:32px;
height: auto;
float:left;
margin-bottom: 20px;
}
#media screen and (max-width: 100px) {
.navbar {
display: inline-block;
height:64px;
}
.navCont {
display: flex;
align-content: space-between;
}
.navButton,
.navButtonLeft {
padding: none;
display: inline-block;
}
img {
display: inline-block;
}
}
Any advice or tips would be greatly appreciated!
edit: Here is the component i am working with.
import React from "react";
import home from "./home.png"
import post from "./post.png"
import profile from "./profile.png"
import search from "./search.png"
import "./Footer.css";
class Footer extends React.Component {
render() {
return (
<div class="navCont">
<div class="navbar">
<img src={home} alt="home icon"/>
<img src={profile} alt="home icon"/>
<img src={post} style={{width:"44px", height: "auto"}} alt="home icon"/>
<img src={search} style={{width:"44px", height: "auto"}} alt="home icon"/>
</div>
</div>
);
}
}
export default Footer;
I've revamped your css to use flexbox for laying out the icons in a row; got rid of all the floats and some other rules that seemed unnecessary. I'm not sure this does exactly what you're trying to do (since I don't know exactly what you're trying to do) but I think this is at least a better starting point.
.navCont {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: rgb(75, 90, 72);
}
.navbar {
height: 64px;
display: flex;
justify-content: center;
}
/* Style the links inside the navigation bar */
.navbar > * {
flex: 0 0 auto;
padding: 14px 16px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
img {
width: 32px;
max-width: 100%;
height: auto;
}
<div class="navCont">
<div class="navbar">
<a href="/" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000/?text=A" />
</a>
<a href="Profile" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=B" />
</a>
<a href="Post" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=C" />
</a>
<a href="Search" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=D" />
</a>
</div>
</div>
This question already has answers here:
Change CSS element that comes after another
(2 answers)
Make :focus change css of another class
(3 answers)
Closed 4 years ago.
Is it possible to change one class when another is in focus with CSS? For example, .ClassA when .ClassB is in focus
I'm trying to achieve something similar to the apple.com search feature where the menu hides and the search input field expands when selected.
Try this out, it may give you a scent of hope O:-)
However it is very unlikely, that you will get a better solution with pure CSS, it truly is usually made with JavaScript, while each HTML element has list of classes and you may add a class or remove a class quite easily.
<html>
<head>
<style>
#spawner {
display: none;
}
#spawner ~ div {
display: none;
}
#spawner:checked ~ div {
display: block;
}
</style>
</head>
<body>
<label for="spawner">
<div>Click me to show content!</div>
</label>
<input type="checkbox" id="spawner">
<div>
Was that a JavaScript? I doubt it!
</div>
</body>
</html>
Maybe something like this?
input { width: 35%; -webkit-transition: width .35s ease-in-out; transition: width .35s ease-in-out;}
input:focus { width: 100%; }
const menu = document.querySelector('.menu');
const search = document.querySelector('.search');
search.addEventListener('focus', () => {
console.log('Focuse');
search.classList.add('search--active');
menu.classList.add('menu--hidden');
});
search.addEventListener('blur', () => {
search.classList.remove('search--active');
menu.classList.remove('menu--hidden');
});
html, body {
padding: 0;
margin: 0;
}
.menu {
display: flex;
flex-direction: row;
}
.menu > a {
padding: 10px;
color: white;
text-decoration: none;
transition: background-color 0.3s;
}
.menu > a:hover {
background-color: rgba(0,0,0,0.5);
}
.wrapper {
display: flex;
flex-direction: row;
background-color: #eae;
box-shadow: 0 0 5px #888;
align-items: center;
justify-content: space-between;
padding-right: 10px;
}
.search {
width: 200px;
border-radius: 10px;
transition: width 0.5s;
}
.search--active {
width: 500px;
margin-left: auto;
}
.menu--hidden {
display: none;
}
<div class='wrapper'>
<div class='menu'>
<a href='#'>Home</a>
<a href='#'>About</a>
<a href='#'>Contact Us</a>
<a href='#'>Support</a>
<a href='#'>Page</a>
</div>
<input class='search' type='search' name='search' />
</div>
I'm trying to create a picture link that includes a question mark glyph that a user can click on to reveal a popover with instructions.
Right now, the question mark glyph appears at the bottom, but ideally I would like that to be right next to the title of the link "My Information".
My code looks like this:
a.picture {
margin: 20px 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: top;
}
a.picture > h3 {
margin: 0;
width: 100%;
text-align: center;
}
a.picture > h3 span {
display:block;
color: white;
font-weight: bold;
background: $blue;
padding: 10px;
}
<a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}" >
<h3><span>{{::options.title}}</span></h3>
<img src="{{::options.picture}}" height="100%" width="100%"/>
<div><a tabindex="0" class="glyphicon glyphicon-question-sign" role="button" data-toggle="popover" data-placement="top" data-trigger="focus" title="My Information" data-content="This is what this link will display"/></div>
</a>
What do I have to do in the css in order for the popover glyph to be next to the title? I tried putting the glyphicon class next to the title, but having a link within a link doesn't seem to work well.
Thanks.
Here the code you need :) Use flexbox
Method used: use a container div for the title and help mark, set to top using position absolute and centering it with flex.
Flexbox guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.image {
position:relative;
width:200px;
height:250px;
}
img {
max-width:100%;
max-height:100%;
}
.header {
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255, .5);
color:#000;
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
}
span {
margin:0 5px;
}
.help {
width:15px;
height:15px;
background:red;
/** or use margin 0 5px 0 auto to align right **/
}
<div class="image">
<div class="header">
<span>My info</span>
<div class="help"></div>
</div>
<img src="http://maximumwallhd.com/wp-content/uploads/2015/07/fonds-ecran-paysage-de-reve-161-660x330.jpg">
</div>