I am working on a website (built in HTML/CSS) in which I want to move the blinking cursor towards the right so that its not on the top of icon.
The snippets of HTML and CSS which I have used in order to make a search icon is:
.searchicon {
position: absolute;
left: 34.5%;
top: 22.4%;
transform: translateY(-50%);
color: red;
pointer-events: none;
}
<div class="input-searchicon">
<input class="form-control search_radius mb-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
Problem Statement:
I am wondering what changes I should make in the HTML/CSS so that I can move the blinking cursor slight towards the right so that the icon is full visible.
At this moment, the blinking cursor is all over icon as seen in the screenshot:
Use padding on the input element to adjust the position of the blinking cursor.
I have edited the code. But in your case all you need to do is add
.input-searchicon input{
padding-left: 35px;
}
That will do it. Adjust the position either by increasing or decreasing the padding.
.input-searchicon{
position: relative;
}
.input-searchicon input{
padding-left: 35px;
}
.searchicon {
position: absolute;
left: 5px;
top: 10px;
transform: translateY(-50%);
color: red;
pointer-events: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-searchicon">
<input class="form-control search_radius mb-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
Instead of changing the css of the span element (which is the Search Icon), try to change the style within the input element. Assuming you're using Bootstrap, you could add pl-1 to adjust the padding-left;
<div class="input-searchicon">
<input class="form-control search_radius mb-4 pl-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
You could visit this Jsfiddle here to see what the sample output.
Related
i am trying to make a home page for my browser
when i hover over stackoverflow many others divs(clickable links) become visible
but when i move my mouse to click over them the hover state is undone and i am unable to click them does anyone can give me general idea of how to deal with it , i want to make the hover affect stay even after removing the house for some time
.wrapper{
border:1px solid red;
}
label#stackoverflow:hover ~ a
{
opacity: 1;
height: auto;}
a{
transition: all 5s ease;
opacity: 0;
height: 0;}
<div class="searchcontainer">
<div class="wrapper">
<label
id="stackoverflow" for="stackoverflow"><img
name="stackoverflowask"
class='selector'
src="./assets/Stack_Overflow_icon.svg"><span
class="stack black">stack</span><span
class="overflow black">overflow</span>
</label></br>
<a href="https://stackoverflow.com/questions/ask">
<label
id="substackoverflow"><span
class="ask black">Ask </span><span class="question black">Question</span>
</label>
</a></br>
<a href="https://stackoverflow.com/questions">
<label
id="substackoverflow"><span
class="see black">See </span><span class="question black">Question</span>
</label>
</a></br>
<a href="https://stackoverflow.com/users/14266024/infinity">
<label
id="substackoverflow"><span
class="look black">Look At </span><span class="question black">Profile</span>
</label>
</a></br>
</div>
</div>
Something along these lines should point you in the right direction.
When the a tag is inside the label tag, you are technically still hovering over the label when your cursor is over it's children.
a.subitem {
opacity: 0;
transition: all 0.5s;
}
label:hover a.subitem {opacity: 1}
<div>
<label>Stackoverflow <a class="subitem" href="#">SomeLink</a></label>
</div>
I have 3 elements that are displayed when hovering on the img element.
the problem is that when I hover over the icons, hovering over image disrupts and icons start flashing.(hovering happens back and forth between image and icon)
I know that I can add some class like this:
.dark-shield {
pointer-events: none;
}
to icons, and it fixes it but then I wont be able to apply the click event.
I appreciate if someone can help.
here is my code for display bellow:
.invisible {
visibility: hidden;
}
<div class="container transition-3d-hover ">
<a href="{% url "gallery-post" post.id %}">
<img id="{{ post.id }}" class="rounded "
src="{{ post.photo.url }}"
onmouseenter="f(this)"
onmouseleave="f(this)"
>
</a>
<i id="complain-icon-{{ post.id }}"
class=" fas fa-angry complain-box invisible icon-big dark-shield"></i>
<i id="fav-icon-{{ post.id }}"
class=" fa fa-hand-point-up like-box invisible icon-big "></i>
<i id="score-icon-{{ post.id }}"
class=" fas fa-heart fav-box invisible icon-big "></i>
</div>
<script>
function f(e) {
var complain = "#" + "complain-icon-" + e.id
var fav = "#" + "fav-icon-" + e.id
var score = "#" + "score-icon-" + e.id
$(complain).toggleClass('invisible')
$(fav).toggleClass('invisible')
$(score).toggleClass('invisible')
}
</script>
In your code, as you can see, the icons are not a part of the image. So, the icons become invisible when you hover them. After they are invisible, you hover over the image again, and the icon becomes visible. This keeps repeating. So, here is a code snippet that would solve this issue:
.img1 {
width: 100%;
height: 100%;
}
.icon {
color: white;
font-size: 30px;
position: absolute;
top: 40%;
left: 40%;
display: none;
}
#wrapper {
float: left;
width: 50%;
height: 30%;
cursor: pointer;
}
#wrapper:hover .icon {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div id="wrapper">
<img src="https://cdn.mos.cms.futurecdn.net/wtqqnkYDYi2ifsWZVW2MT4-1200-80.jpg" class="img1">
<i class="fas fa-angry icon"></i>
<i class="fa fa-hand-point-up icon" style="top: 20%;"></i>
<i class="fas fa-heart icon" style="left: 10%; top: 20%;"></i>
</div>
</body>
</html>
Please note: This code might not work in the snippet, but it would work if you create a new file with this code.
Code explained
As I have already explained, the icons are not a part of the image. So, when you hover them, they become invisible. However, in my code, I have inserted the images, as well as the icons inside one div. Now, whenever you hover the div, the icons are visible. Since the icons are a part of the same div, they would remain visible.
I have buttons which follow the following structure:
<button type="button" class="btn btn-dark btn-sm"(click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
They look like this:
I can change the height and width of the buttons and the inline icons will stay centered:
.btn.btn-dark.btn-sm {
height: 80px;
width: 200px;
}
But then when im making them smaller for mobile, all of the sudden, the inlined icons stop being centered after i fall below a certain width/height:
#media (max-width: 690px){
.btn.btn-dark.btn-sm {
width: 10px;
height: 20px;
}
}
Why do they stop being centered on small width/height? How would i fix it? I tried alligning them to the center etc, but didnt find a working solution yet.
It looks like the button may have some padding that interferes when too small. Try this snippet
.btn.btn-dark.btn-sm {
height: 20px;
width: 20px;
padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button type="button" class="btn btn-dark btn-sm" (click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
I am working in a e-commerce website ,In this I need to fix the following issue.
when I add product to the cart count is added but the span grow it's size based on count how can I fix this issue...
When I add 100 products this is the span width.
When I reduce the product count Span width also reduced
If I remove the product Span get's it's normal width
What I need is I want the span width as it's normal width ,when I add products to the cart the counter span only grows it's width.
This is the code I written...
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend ">
<span class="input-group-text" id="crt">
<span class=" notification-counter badge badge-danger">{{nCount}}</span>
<i class="fas fa-cart-plus fa-flip-horizontal text-primary" style="font-size:30px"></i>
</span>
</div>
<input type="text" class="form-control bg-white" value="My Cart ({{nCount}})" readonly>
</div>
</form>
CSS
.notification-counter {
position: relative;
bottom: 12px;
background-color: rgba(212, 19, 13, 1);
color: #fff;
border-radius: 10px;
padding: 2px 2px 2px 2px;
font: 11px Verdana;
}
and how to make the counter span shape as round ,when I add a single product it's look like this
Thanks ...
Maybe it's a bug, I'm not sure, but when using the mobile collapse menu, the icons and the text are not aligned (see images).
The reason is because of these CSS properties:
HTML:
.side-nav a {
color: #444;
display: block;
font-size: 1rem;
height: 64px;
line-height: 64px;
padding: 0 30px;
}
nav i.material-icons {
display: block;
font-size: 2rem;
height: 56px;
line-height: 56px;
}
<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
<img src="images/costum_logos/logo3.png" class="custom-logo">
<div class="divider"></div>
<a href="index.php" class="waves-effect waves-light">Albums
<i class="material-icons left notranslate">collections</i>
</a>
<a href="?page=settings" class="waves-effect waves-light">Settings
<i class="material-icons left notranslate">settings</i></a>
<a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
<i class="material-icons left notranslate">power_settings_new</i>
</a>
</ul>
Of course, the interesting bits are the line-height and height properties on both the anchor tag, and the icon tag. They are not equal. If I override either one of them, to be exactly like the other - they are perfectly aligned.
My question is: Am I doing something wrong? I can easily get around it, but I want to have a good practice with materialize CSS. Don't wanna hack around and break their conventions.
Thanks in advance!