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 ...
Related
I have a movie card where the content is dynamic. I'm trying to select the first child DIV of the left-side-bar, however, since the content is dynamically generated, the background-color is changed to all divs.
#left-side-bar div:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
The :first-child selector is intended, like the name says, to select the first child of a parent tag.
But in your example there is a tag as a parent element on the div. So if you apply nth-of-type to it, you will solve your problem. So this example will work as follows.
#left-side-bar a:nth-of-type(1) .card-sb {
background:red;
}
#left-side-bar .card-sb:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
Add an Id to your div, then refer to it to change the attribute of that specific element.
<div class="card-sb" id="CardSb">
then refer to it in your style sheet:
#CardSb {background-color: #e50914}
or try this:
/* Selects every first element among any group of siblings */
#left-side-bar a:nth-child(1n) {color: #e50914;}
I have an input-group as follow:
<div class="input-group" style="width:100%;"> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-primary" onclick="CaptureMapLocation('DependentRelation','0');" role="button"><i class="fa fa-map-marker"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-search"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-remove"></i></a> </div> </div>
I need the last button to have a fixed width, how to do that?
You can achieve this with CSS - the following will target the input group button that is the last child of the input group and apply a width to it.
You should move all your inline styling to a separate (external) CSS sheet which will make the code cleaner and easier to read.
Note the following will apply to all input group buttons in your page so you might want to apply a specific class or id to the parent input group div.
.input-group-btn:last-child {
width: 100px; // or whatever your desired width is
}
You can also do this with flex
.input-group {
display: flex;
}
.input-group-btn {
flex-grow:1;
}
.input-group-btn:last-child {
flex-grow: 0;
flex: shrink:0;
flex-basis: 100px; // or whatever your desired width is
}
If you want to apply the fixed witdh to the second button then it would be
.input-group-btn:nth-child(2){
width: 100px; // or whatever your desired width is
}
Ultimately - if any button could be afffected - you could create a "fixed-width-class" and apply it to the button / s you want affected.
.input-group-btn.fixed-width {
width: 100px; // or whatever your desired width is
}
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.
I'm having some trouble trying to implement a quantity counter like so
Here is what I have so far (Codepen)
My problem is that I keep getting random white space and it feels the way Im going about wrapping the elements is inefficient. Is there any other way to go about making this?
HTML
<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
<div class="quantity-wrapper">
<i class="add-down add-action fa fa-minus"></i>
<input id="prodQuantity" type="text" name="quantity" value="700" />
<i class="add-up add-action fa fa-plus"></i>
</div>
<div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->
SCSS
.quantity-number-v2{
margin: 50px;
#prodQuantity{
width: 60px;
height: 30px;
border: 1px solid #222;
}
i{
padding: 6.8px 10px;
border: 1px solid #222;
}
}
The space is caused as you are lining up inline elements (think words in a sentence - they have spaces between them). You can comment out the space between your elements to remove the space:
<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
<div class="quantity-wrapper">
<i class="add-down add-action fa fa-minus"></i><!--
--><input id="prodQuantity" type="text" name="quantity" value="700" /><!--
--><i class="add-up add-action fa fa-plus"></i>
</div>
<div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->
Updated Pen
I am trying to get a similar look like Reddit or HackerNews voting where up/down arrows are get stacked. What I tried rather gives me following look:
My Code is given below:
HTML
<ul class="list-unstyled">
<li class="entry">
<div class="row">
<div class="col-sm-2 entry__rank">
<span class="pull-left">1.</span>
<i class="fa fa-icon fa-caret-up fa-2x pull-left"></i>
<i class="fa fa-icon fa-caret-down fa-2x pull-left"></i>
</div>
<div class="col-md-9">
<span class="entry__title">
This is a great billboard
</span>
</div>
</div>
</li>
</ul>
CSS
.entry {
padding: 5px;
margin-bottom: 20px;
}
.entry__rank {
font-size: 20px;
font-weight: bold;
color: grey;
padding: 5px 0 5px 0;
margin-top: -10px !important;
}
.entry__title {
font-weight: bold;
font-family: Helvetica Neue, Helvetica, Arial;
font-size: 16px;
}
.entry__title a {
color: #285ddf !important;
}
Desired Look
Event something like Stackover flow voting would work.
Edited to provide a better plugin:
Using the following will probably be a better and less bloated solution:
https://github.com/janosgyerik/upvotejs
Reddit actually has their code available for people to take and basically create their own Reddit clone if they wanted:
https://github.com/reddit/reddit
Look through this and you'll probably find exactly what you're looking for.
U can use html button and any javascript variable to display the count.
In the button tag add onclick property and call a JavaScript method which increases the variable value on click of button
Similar approach for down count just decrease the value in the method
https://codeshare.io/Xv5xB
Use bootstrap lib [http://getbootstrap.com/] which has more features & follow this code.
<div className = "row">
<div className = "u-full-width u-cf link-item">
<div className = "u-pull-left link-vote">
<div className = "u-pull-left vote-buttons">
<div className = "arrow-up upvote" onClick={this._onVoteUp}></div>
<div className = "arrow-down downvote" onClick= {this._onVoteDown}></div>
</div>
<span className="points">{this.state.points}</span>
</div>
<div className="u-pull-right link-content" onClick={this._onLineClick}>
{this.props.title}
<span className="u-pull-right info">{domain}</span>
</div>
</div>
</div>
Write method for UpVote , DownVote & etc.