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
Related
I have the following snippet of code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-stack-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
</body>
</html>
This is from a larger project (simplified the code), and I need to have the style="width:auto" on the parent span class.
Without removing the style="width:auto", I am trying to achieve three things:
center the "1" in the box
make the 1 on the same line as "This is a sentence"
make the "This is a sentence appear next to the box instead of overlapping inside it.
This would look similar to the image here, except that the 1 isn't on the same line as "This is a sentence" - would anyone know how to achieve this?
Replace class fa-stack-2x with fa-2x in span.fa
fa-stack-2x class has position:absolute so that text is overlay it
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
Or You can do this without using font-awesome
.square {
display: inline-block;
border: 2px solid #000;
border-radius: 5px;
text-align: center;
width: 20px;
height: 20px;
font-weight: bold;
line-height: 20px;
}
<ul>
<li>
<span class="square">1</span>
This is a sentence.
</li>
</ul>
i am beginner in html and css and when i was trying to build this web page with it (html and css) ,the images always appears in the middle of the tab and i don't know how to organize it,
stackoverflow keep saying "It looks like your post is mostly code; please add some more details" i have nothing more to say lol , so thank you in advance:)
this my html code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>HOME</title>
</head>
<body>
<div class="mytabs">
<input type="radio" id="tabfree" name="mytabs" checked="checked">
<label for="tabfree">Free</label>
<div class="tab">
<h2>Free</h2>
<p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as quantity (number theory),[1] structure (algebra),[2] space (geometry),[1] and change (mathematical analysis).[3][4][5] It has no generally accepted definition.[6][7]
Mathematicians seek and use patterns[8][9] to formulate new conjectures; they resolve the truth or falsity of such b
h
.</p>
</div>
<input type="radio" id="tabsilver" name="mytabs">
<label for="tabsilver">Ser</label>
<div class="tab">
<h2>Sr</h2>
<p>jctivity from as far back as written records exist. The research required to solve mathematical problems can take years or even centuries of sustained inquiry.
Rigorous arguments first appeared in Greek mathematics, most notably in Euclid's Elements.[10] Since the pioneering work of Giuseppe Peano (1858–1932), David Hilbert (1862–1943), and others on axiomatic systems in the late 19th century, it has beco.</p>
</div>
<input type="radio" id="tabgold" name="mytabs">
<label for="tabgold">Gd</label>
<div class="tab">
<h2>Gd</h2>
<p>slow pace until the Renaissance, when mathematical innovations interacting with new scientific discoveries led to a rapid increase in the rate of mathematical discovery that has continued to the present day.[11]l
</p>
</div>
<!--
IMAGES
-->
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid2.jpg' >
<div class="image-text">
<h1>bride</h1>
<p>hapyy bride happy life</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid1.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride happy life2</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/image.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride</p>
<p>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
</p>
</div>
</div>
</div>
</body>
</html>
this is my css code:
/*tab*/
.mytabs {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 50px auto;
padding: 25px;
}
.mytabs input[type="radio"] {
display: none;
}
.mytabs label {
padding: 25px;
background: white;
font-weight: lighter;
}
.mytabs .tab {
width: 100%;
padding: 20px;
background: #fff;
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
}
.mytabs input[type="radio"]:checked + label {
background: #18ffff;
border-radius: 18px;
}
.all-image{
text-align: center;
}
.all-image .single-pic{
display: flex;
padding: 24px;
position: relative;
width: 30%;
height: 30%;
}
thank you in advance :).
Consider deleting
.mytabs .tab {
width: 100%;
padding: 20px;
background: rgb(114, 35, 35);
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
It already looks a whole lot better.
The all-image class have text-align set to center. Since you defined the class in the div element that is the parent element of your img tag, your image will be aligned to the center too.
To avoid your image being centered and I assume you only want your text to be aligned centered, try to set the CSS property text-align: center under the class image-text.
I'm developing an item list that is filled dinnamically with some data that is getting from a controller.
I had a problem when the data is shown because I need to show it into two columns (called "record_left_content" and "record_right_content"), but when the obtained text is too long, the two columns are merged into one.
Someone knows how to positionate the both colums in a fixed way regardless of the size of the text/content ?
Code:
<div class="col-lg-9" id="middle_column">
<div class="text-center text-muted" t-if="not education_timetable_ids">
<h1>No timetables found</h1>
</div>
<div class="text-center text-muted" t-else="">
<ul class="list-unstyled">
<li t-foreach="education_timetable_ids" t-as="timetable" t-attf-class="media">
<div itemscope="itemscope" class="media-body" itemtype="https://schema.org/learningResourceType" >
<h4>
<a t-attf-href="/" itemprop="url" onclick="return false"><span itemprop="schedule"><t t-esc="timetable.display_name" /> </span></a>
</h4>
<div id="record_left_content">
<div>
<span t-if="timetable.academic_year_id" class="badge badge-info">
<i class="fa fa-clock-o" role="img" aria-label="Academic year" title="Academic year"></i>
Academic year:
<t t-esc="timetable.academic_year_id.name" />
</span>
//more code
<div id="record_right_content">
//more code
</div>
.media {
padding: 10px;
background-color: #e9ecef;
border-radius: 0.25rem;
margin: 10px;
}
#record_left_content {
float: left;
margin-left: 20%;
}
#record_right_content {
float: right;
margin-right: 20%;
}
Thanks for reading!
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 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 ...