I would like to create an overlay effect to the results list after clicking on the search bar and starting typing a country name without the previous country being moved down.
CodeSandBox link
I would like something like this:
I have tried this:
<div>
<SearchBar value={search} onChange={onChange} />
{<div className="overlay">
<ul className="list ">
{search.length > 0 &&
filteredCountries.map((country) => (
<li key={country.name} onClick={() => handleSelect(country)}>
{country.name}
</li>
))}
</ul>
</div>
}
</div>
CSS:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
display: none;
}
Related
I need to darken the background of an image but not its contents inside like the below picture. The image is being painted programatically so I cannot have its url in the css.
Below how it should look like:
And now how it´s looking for me, I need the characters much whiter:
I´ve looked at different answers using ::before or ::after but given my image is being rendered inline it does not work. Below my code.
REACT.TSX
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
</div>
</div>
</Link>
))}
CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
}
.apartmentText {
color: white;
font-weight: bold;
}
Any idea on what to do?
Thanks a lot!
Try the following:
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
<div className='color-overlay'/>
</div>
</div>
</Link>
))}
And CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.apartmentText {
color: white;
font-weight: bold;
}
.apartmentText, .subApartmentText {
position: relative;
z-index: 1;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.3);
pointer-events: none;
}
I tried it and it worked for me, but locally I made some changes, so I can load an image. Please let me know if something is not working, so I can double check if I copied all the code correctly.
have you tried this with css?
background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),
I have a search screen
like this
. On click of search I am showing busy image with overlay.
But there is a stop button is there in screen which I am not able to click because its coming under the overlay.
Can you pls help to solve this issue?
<input type="button" value="Stop" style="z-index: 100;position: absolute;" />
#overlay {
position: fixed;
display: none;
width: 100%;
height: 97.5%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
height:97.5%%;
margin-top: .4%;
}
if you test it alone it works. But i think the problem is that your stop button is a child of an element with a relative position. Maybe you must make the entire sidebar menu absolute or not covered by the overlay. Try also putting the stop button in the same level as the loader image, it more comprehensive that way.
#overlay {
position: fixed;
display: block;
width: 100%;
height: 97.5%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
height:97.5%%;
margin-top: .4%;
}
<div id="overlay"></div>
<input type="button" value="Stop" style="z-index: 100;position: absolute;" />
My question is actually more complex then the title, but I couldn't come up with a better one.
Initial Setup:
I use Bootstrap v4.0.0-alpha.2 and I ripped out this simple sidebar. I'm not sure why and if it's relevant but I also set flex: true in my _library-variable-overrides.scss (I use css-burrito) but since I only set it to try it out, I'm probably okay with turning it off. ;-)
What I want to do:
I would like to have a button in the sidebar that is bottom aligned. Ideally it's centered horizontally in the sidebar and has about 1em margin to the bottom.
What my code looks like:
_shell.scss & _sidenav.scss:
#shell-wrapper {
padding-left: 0;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
padding-left: 250px;
#shell-content-wrapper {
position: absolute;
margin-right: -250px;
}
}
#media(min-width:768px) {
#shell-wrapper {
padding-left: 250px;
}
#shell-wrapper.toggled {
padding-left: 0;
#shell-content-wrapper {
position: relative;
margin-right: 0;
}
}
#shell-content-wrapper {
padding: 20px;
position: relative;
}
}
#sidenav-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
transition: all 0.5s ease;
}
#shell-wrapper.toggled {
#sidenav-wrapper {
width: 250px;
}
}
#shell-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
/* Sidenav Styles */
.sidenav-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
li {
text-indent: 20px;
line-height: 40px;
a {
display: block;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
a:active, a:focus {
text-decoration: none;
}
}
>.sidenav-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
a {
color: #999999;
}
a:hover {
color: #fff;
background: none;
}
}
}
#media(min-width:768px) {
#sidenav-wrapper {
width: 250px;
}
#shell-wrapper.toggled #sidenav-wrapper {
width: 0;
}
}
and index.html:
<div id="shell-wrapper" class="toggled">
<div id="sidenav-wrapper">
<ul class="sidenav-nav">
<li class="sidenav-brand">
Brand
</li>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li id="logout">
<button class="btn btn-danger-outline">Logout</button>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button">
☰
</button>
<div id="shell-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Main Content Here-->
</div>
</div>
</div>
</div>
</div>
The logout button is one in question. I just tried doing it as a <li> of the sidenav-nav but I'm not tied to this setup.
What I have tried so far:
a lot!
What came closest to what I want was adding this:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
It's pretty close to my goal on a desktop browser, but hitting that show me this on a phone button in chrome, the logout button is just gone.
i haven't worked with css-buritto, but you could look into giving the button a class or id and passing the position:relative argument you can then set a bottom: 1em and that should position the button at the bottom. alternativly you can also look into the other position elements like fixed that could also do the trick
like you mentioned a the end
#logout {
position: relative;
bottom: 1em;
}
I have these 3 boxes
Which are constructed in the following way:
<ul class="home_boxs">
<li class="home_box light_blue">
<div class="news clearfix"></div>
</li>
<li class="home_box blue">
<div class="news clearfix"></div>
</li>
<li class="home_box dark_blue">
<div class="news clearfix"></div>
</li>
</ul>
What I am looking to do now is to add a small shadow image (custom png) underneath each box. What would be the best way to have this achieved? Some advise would be very much appreciated.
See sample:
You could do something like that:
ul {
list-style: none;
}
li {
float: left;
}
.home_box {
position: relative;
width: 150px; /* to change with your size */
height: 100px;
/* To add more styling according to your needs */
}
.home_box:before {
content:' ';
position: absolute;
width: 100%;
height: 10px;
background: url(//placehold.it/150x10); /* placeholder */
border-radius: 50%;
bottom: -20px;
}
or, if you don't wanna use images:
.home_box:before {
content:' ';
position: absolute;
width: 100%;
height: 10px;
background-color: #999999;
border-radius: 50%;
bottom: -20px;
box-shadow: 0 0 10px #999999;
}
Example with image - Example without image
I am trying to create a dropdown menu that when you click it will open up a ul. The thing is I want the "View More" button to always be exactly where it is and the dropdown to open up centered below it.
if you go to the link below you will see what i mean. it opens up exactly like I want it to, but if you close the dropdown by clicking "View More" you will see the header move to the left when i want it to stay exactly where it is
I am building this to be able to be used in many many different locations so "hardcoding" sizes is not an option.
Please help! :)
HTML
<div id="testcontainer">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-340">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-340">
<li>Google</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer2">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-350">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-350">
<li>Google</li>
<li>THIS IS A TEST FOR WIDER SHIT</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer3">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-400">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-container-400">
<li>GOOOOOOOOOOOOOOOOOOOOOGLEASDASDSASD</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
CSS
#testcontainer {
position: absolute;
top: 20px;
left: 100px;
text-align: center;
}
#testcontainer2 {
position: absolute;
top: 20px;
left: 150px;
text-align: center;
}
#testcontainer3 {
position: absolute;
top: 200px;
left: 500px;
text-align: center;
}
.dropdown-activator-active {
background-color: #000;
color: #fff;
}
.dropdown a {
display: inline-block;
}
.dropdown-activator {
display: inline-block;
border: 1px solid black;
padding: 3px;
}
.dropdown-content {
visibility: hidden;
height: 0;
opacity: 0;
position: relative;
text-align: left;
margin: 0 auto;
border: 1px solid black;
}
.dropdown-content-active {
visibility: visible;
height: auto;
opacity: 1;
}
.dropdown-content ul li {
list-style: none;
}
JQuery
$(function(){
$(".dropdown-activator").click(function() {
$this = $(this);
var current = $this.attr('dropdownContent');
if (!$(current).hasClass('dropdown-content-active')) {
$this.addClass("dropdown-activator-active", 100);
$(current).addClass('dropdown-content-active', 100, function() {
$('html').unbind('click');
$('html').not($this).one('click', function() {
$(current).prev().removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100);
});
});
} else {
$this.removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100)
}
});
});
you can see an example of it here www.chrisworrell.com (temporary)
display: none; removes your element from the document flow, which is why your parent div resizes. On the other hand, visibility: hidden; hides your element while keeping it in the document flow.
What you could do is instead of manipulating the display property of your <ul> element, set visibility: hidden; and height: 0; That way the unexpanded link will continue to use the width of the UL element it is bundled with.
It's kind of hacky, but should get the job done.
In order to manipulate visibility instead of display none with jQuery UI, use .animate({opacity: 1}) for fadeIn() and .animate({opacity: 0}) for fadeOut()