I wanted to create a search form in my navigation bar which will expand on focus.
But somehow, the field gets focused even if I'm not clicking into the field.
Here is a demo: http://gaming-corp.de/
If you try to click on the white content area right under the search button on the top, it will focus it anyway. This only occurs in chrome.
Does anybody know what could cause this and how to fix it?
Thank you
EDIT:
Here is the code:
form#search {
position: relative;
}
form#search input {
width: 0;
height: 40px;
padding: 0 0px 0 40px;
cursor: pointer;
border: 0;
background: transparent url(../images/search.png) no-repeat 10px center;
outline: none;
position: absolute;
right: 40px;
top: 20px;
transition: all .6s;
font-size: 12px;
}
form#search input:focus {
background-color: #fff;
color: #666;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
width: 100px;
}
I don't know why, but it seems to be caused by the "clearfix" code:
.container:after, .row:after {
display: block;
width: 100%;
height: 0px;
content: ".";
overflow: hidden;
clear: both;
}
Since neither .container nor .row need to be cleared like that, I'd suggest you just remove that code.
Related
There is a div element that has an input field. When we change the class of input field, the tooltip that div element has the input field stays behind the input. How can I fix this problem?
Here is html code:
<div class="table-cell-input">
<input type="text">
</div>
CSS:
.table-cell-input { //Div class.
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 15px 5px;
}
.table-cell-input > input {
width: 100%;
min-width: 50px;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
border-radius: 5px;
padding: 2px;
transition: none;
}
.table-cell-input-warn > input {
border: 2px solid crimson;
background-image: url('../../../../../assets/icons/warning-soft.svg');
background-repeat: no-repeat;
background-size: 14px 14px;
background-position: right 3px center;
padding: 2px 18px 2px 2px !important;
}
I change the class of the div element but the class affected input. My custom data-tooltip stays behind the input.
Here is a screenshot.
I use my custom data-tooltip attribute throughout the project.
[data-tooltip] {
--arrow-size: 5px;
position: relative;
z-index: 1000;
}
[data-tooltip]:before,
[data-tooltip]:after {
position: absolute;
visibility: hidden;
opacity: 0;
left: 50%;
bottom: calc(100% + var(--arrow-size));
pointer-events: none;
transition: 0.2s;
will-change: transform;
}
I tried setting z-index but did not work. Input field is child of the div, therefore I dont understand this issue.
I know there is variety of JS libs for custom scroll but I believe with modern browsers it's better to go with native behaviour as more consistent and predictable. I assume I will have nice scrollbars in Chrome/Edge(Blink), acceptable in FF with their own simple color/sizing customisations and I won't care about other browsers.
The only problem I'm facing now is - I want li elements to go under the scrollbar. I tried to move content under it via transform: translateX(15px) / margin-right: -15px / right: -15px / overflow: overlay and nothing helped (while overflow:overlay does the job for <body/> it doesn't help with inner containers).
Any trick to achieve desired behaviour without JS?
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar {
background-color: transparent;
transition: .3s;
}
*:hover::-webkit-scrollbar {
width: 15px !important;
}
*::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid #444;
}
ul {
margin: 0;
padding: 0;
height: 100vh;
width: 70vw;
overflow-y: scroll;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}
li {
cursor: pointer;
height: 40px;
transition: background .2s;
display: block;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
ul:after {
content: "Scroll ↧";
color: white;
letter-spacing: 10px;
position: fixed;
left: 50%;
top: 50%;
font-size: 40px;
line-height: 1;
transform: translateX(-50%) translateY(-50%);
mix-blend-mode: difference;
}
body {
background: #12c2e9;
background: #c471ed20;
background: #444;
justify-content: center;
display: flex;
padding: 0;
margin: 0;
}
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
The overflow: overlay does what you want. But take in account that this feature is not a standard. Also Edge will have another property -ms-overflow-style: -ms-autohiding-scrollbar; to hide scrollbar. Also test carefully in Firefox.
The overflow prop should be put on the body element, so scrollbar overlay on the top of ul.
body {
padding: 0;
margin: 0;
overflow: overlay;
}
ul {
margin: 0;
padding: 0;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}
Working sample (tested in Chrome)
I was experimenting around with box-shadows and thought it would be possible to make a window effect (as in the example below) so that you can hide text or an image underneath that can only be seen - or "opened" - when you hover/click.
Unfortunately it doesn't work like that, because the shadow will always be below the text or image, which I didn't realize until I was done.
Is there a fix for this, or should I use another way to get the same result without box-shadows?
body {
background: #20262E;
}
.window {
display: inline-block;
height: 200px;
width: 300px;
margin: 20px;
background: #F8F8F8;
text-align: center;
line-height: 200px;
}
.window {
box-shadow: inset 0 200px #0084FF;
transition: box-shadow 1s ease-in-out;
}
.window:hover {
box-shadow: inset 0 0 #0084FF;
}
<div class="window">
box 1
</div>
*Note: I haven't been able to figure out why the transition is flickering :/
Agree that it's probably a bug with box-shadow. If you're looking for another CSS way to handle this, how about the :before or :after pseudo elements?
body {
background: #20262E;
}
.window {
display: inline-block;
height: 200px;
width: 300px;
margin: 20px;
background: #F8F8F8;
text-align: center;
line-height: 200px;
position: relative;
}
.window:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #0084FF;
transition: bottom 1s ease-in-out;
}
.window:hover:after {
bottom: 100%;
}
<div class="window">box 1</div>
I am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}
your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input
I have a CSS tooltip that is being cut off when the hovered item is too close to the edge of the content area. See the links towards the bottom of this post: http://blog.betbright.com/top-stories/manchester-united-v-club-brugge-betting-preview/
Here is the code I'm using for the tooltip:
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #00A1E0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltip span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 100%;
margin-left: -76px;
z-index: 999;
}
Any solutions you can recommend to stop the tooltip being cut would be appreciated.
Thanks,
Paul
You should set the overflow property on your .entry-content class to visible instead of hidden. Your current setting hides everything that does not fit within that div. Since your tooltip would be displayed partly outside your .entry-content div, a part is cut of unless you change the overflow property. So, your error is not in the tooltip, it's in a parent element.