I'm trying to show a fontawsome icon to come on top of a materialize css progress/determinate div. But with no luck. the icon shows but not completely part of it is clipped/hidden. I have tried a lot of solution but no help.
.progress .determinate {
overflow: visible;
z-index: 1;
}
.progress .determinate .fa {
position: absolute;
top: -5px;
font-size: 12px;
right: 0px;
visibility: visible;
z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"></script>
<div class="col l9 m9 s9 ">
<div class="col l12 m12 s12">
<div class="progress">
<div class="determinate" style="width:70%">
<i class="fa fa-circle"></i>
</div>
</div>
</div>
</div>
Below is the image showing what it should look like. But i m not able to figure out how to achieve this even after hours of struggling. In the image the circle is the fa-circle icon
Below are some of the posts i have tried
First
Second
Third
Tried several other things but could make it work. Any help will be appreciated. Thanks in advance.
Your .progress overflow is hidden, so make it visible
.progress {
overflow: visible;
}
Here is the solution
http://codepen.io/Bhupinderkumar/pen/dOLOPJ check here i created with codepen and got the solution or you just need to add this
.progress{ overflow:inherit!important }
Your .progress overflow is hidden, so make it visible by adding code as below,
.progress{
overflow:visible !important;
}
!important - by adding !important to your CSS overflow property, you are telling to unseen other important rules and apply this first.
.progress{
overflow:visible !important;
}
.progress .determinate {
width:70%;
}
.progress .determinate .fa {
position:absolute;
top:-5px;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="col l9 m9 s9 ">
<div class="col l12 m12 s12">
<div class="progress">
<div class="determinate">
<i class="fa fa-circle"></i>
</div>
</div>
</div>
</div>
Related
I would like to create a div with text Some meaningful text and a heart icon behind word meaningful exactly.
I am using font awesome icon, so the icon is <i class="fas fa-heart"></i> with width.
How can I can achieve with existing DOM?
<div id="text-over-icon">
<span>Some</span>
<span>meaningful</span>
<span>text</span>
</div>
Hopefully, it can be done without float or position: absolute.
Hopefully, it can be done without float or position: absolute.
You can make use of CSS grid, and position both items on the same column/row.
The only drawback is you'll have to edit the html and nest another span to wrap the text.
[grid] {
display: inline-grid;
}
[grid]>i {
grid-row: 1/1;
grid-column: 1/1;
text-align: center;
color: red;
}
[grid]>span {
grid-row: 1/1;
grid-column: 1/1
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="text-over-icon">
<span>Some</span>
<span grid>
<i class="fas fa-heart"></i>
<span>meaningful</span>
</span>
<span>text</span>
</div>
Using position:absolute you can achieve this
.parent {
position: relative;
}
.fa.fa-heart {
color: #ff0;
}
.fa.fa-heart:before {
font-size: 50px;
}
#text-over-icon {
position: absolute;
top: 0;
left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="parent">
<div class="fa fa-heart"></div>
<div id="text-over-icon">
<span>Some</span>
<span>meaningful</span>
<span>text</span>
</div>
</div>
In my project, I implement bootstrap and I use it's grid system. I create a row, and then I add a span inside the row which acts as a column (col-12).
This span I use is underlined, and I add <br> elements within the span to separate line. The first line auto-indents to the right more than the other two lines. I attempt to use the tag, however this doesn't work as my text is underlined and it creates an unwanted underline before the text.
Does anybody know the issue? Thank you.
Here is my code:
.mainBodyTxt {
color: white;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
.container-fluid {
background:lightgrey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- <div class="col-md-4 col-lg-6">-->
<u style="color: white;"><span class="col-12 mainBodyTxt">I really like <br>
Blue <br>Sandwiches</span> </u>
</div>
</div>
Your layout is giving you a right indentation probably because you're using a <u> outside the <span class='col-12'>
col-x elements should be direct descendants of row elements!
To solve this, you could:
Put the <u> tag inside the span (example 1)
Remove the <u> tag and give span the CSS attribute text-decoration:underline (example 2)
Remove the <span> tag and give u the classes col-12 mainBodyTxt (example 3)
.mainBodyTxt {
color: white;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
.container-fluid {
background:lightgrey;
}
.mainBodyTxtUnderlined{
color: white;
text-decoration:underline;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<!-- example 1 -->
<div class="container-fluid">
<div class="row">
<span class="col-12 mainBodyTxt"><u style="color: white;">I really like <br>
Blue <br>Sandwiches</u></span>
</div>
</div>
<br>
<!-- example 2 -->
<div class="container-fluid">
<div class="row">
<span class="col-12 mainBodyTxtUnderlined">I really like <br>
Blue <br>Sandwiches</span>
</div>
</div>
<br>
<!-- example 3 -->
<div class="container-fluid">
<div class="row">
<u class="col-12 mainBodyTxt">I really like <br>
Blue <br>Sandwiches</u>
</div>
</div>
Today I tried to practice, and use HTML to code a simple email design. But until now I have a few questions not clearly, please see the image sample, so may I ask some help:
The middle white background. How to code this part use HTML?
The two pink lines, I tried use <hr> for this, but I don't know why the color won't change and the middle space which from first line to image top is not correct, so is there any other way to code the line?
The 4 buttons, how to HTML the 4 buttons? The image sample button pink background looks like use as a shape?
I know these can used CSS to reach the effect but currently want all things ONLY done in HTML, is this possible based on this sample?
Please let me know if any guy who know how to solve these problems.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="mainDiv">
<div class="lines"></div>
<div class="title">MEMORIAL DAY</div>
<div class="title2">SALE</div>
<div class="lines"></div>
<div class="text1">stock up blah blah</div>
<div class="row">
<div class="sm-col margin">
<button type="button" class="btn btn-info">but1</button>
<button type="button" class="btn btn-info">but2</button>
</div>
<div class="row">
<div class="sm-col">
<button type="button" class="btn btn-info">but1</button>
<button type="button" class="btn btn-info">but2</button>
</div>
</div>
</div>
You need css to do the margins by the way. Really recommend Using it.
CSS:
.mainDiv {
background-color: white;
width: 350px;
height: 500px;
display: inline-block;
text-align: center;
}
.lines {
margin-top: 50px;
display: inline-block;
text-align: center;
margin-bottom: 10px;
height: 6px;
width: 200px;
background-color: pink;
}
.title {
color: black;
font-size: 25px;
}
.title2 {
color: black;
font-size: 60px;
}
.text1{
font-size:17;
}
.margin{
margin-bottom:30px;
}
LINK TO JSFIDDLE :)))
I'm doing a site and I'm starting with the mobile stylesheet first.
But the container-fluid's width isn't the same as the window's width.
What I tried to do to fix this was:
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
100% doesn't work since I already said that it's not the full width of the window.
Here's the entire body from the HTML file:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
Bootstrap containers are padded.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
Edit: Bootstrap 4
#Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."
This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.
<div class="container-fluid px-0">
This text hits the left side of the viewport.
</div>
Try this, wrap all the content inside container-fluid with a bootstrap row class. It should work, thanks.
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }
With Bootstrap 4:
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0 and m-0 and they will set the 15px padding from .container-fluid and -15px margin from .row to 0.
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
This is the only thing I could get to work, after trying most of these answers.
css:
#mydiv {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background-color:#2A2A52
}
html:
<div class="container-fluid px-0">
<div id="mydiv">
<div class="row">
<div class="col-md-12">
<p>YOUR CONTENT HERE</p>
</div>
</div>
</div>
</div>
note: I needed to specify px-0 on the container and wrap the row in a separate div in order for the text to line up horizontally with additional text on the page that was part of a typical container-fluid div.
If none of this works try:
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
I am using skeleton css framework, I want to vertically align my fontawesome icon to the right of a textarea, but it seems the common "vertical-align:middle; display: table-cell;" doesn't work. I also want when the textarea resizes, the icon still aligns in the middle, without hard code a height inside the style, is it possible?
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
}
</style>
<div class="row">
<div class="six columns">
<label for="inputA">labelA</label>
<textarea class="u-full-width" id="inputA" type="text"></textarea>
</div>
<div class="one colum">
<span class="icon"> <i class="fa fa-check-circle"></i> </span>
</div>
</div>
You may need to fake it, due to the way skeleton styles its columns.
As such, you can use absolute positioning to offset the icon as necessary:
.six.columns {
position: relative; /* <-- ensure the icon positions relative to the parent column */
}
#inputA {
margin-bottom: 0; /* <-- remove the textarea margin, making the icon look like its not centered */
}
.icon {
position: absolute; /* <-- position the icon */
/* transform:translateY(-50%); OPTIONAL, use for true vertical alignment */
top: 50%;
right: -20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
<div class="six columns">
<label for="inputA">labelA</label>
<textarea class="u-full-width" id="inputA" type="text"></textarea>
<span class="icon"> <i class="fa fa-check-circle"></i> </span>
</div>
<div class="one column">
</div>
</div>
You can try creating a javascript function wich reubicates the icon. Anyways, it could be a little bit of trouble if you're handling with many dinamic icons/textareas.
css:
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
position:absolute; <--- additions
padding-top:52px; <--- additions
padding-left:269px; <--- additions
}
HTML (Notice the onClick="resiz()" instruction)
<textarea onClick="resiz()" class="u-full-width" id="inputA" type="text"></textarea>
<span id="ico" class="icon"> <i class="fa fa-check-circle"></i> </span>
JavaScript
document.resiz=function(){
var he = document.getElementById("inputA").offsetHeight;
var wi = document.getElementById("inputA").offsetWidth;
document.getElementById("ico").style.paddingTop=(he/2+20)+'px';
document.getElementById("ico").style.paddingLeft=wi+'px';
}
Here's the code: https://jsfiddle.net/ko2dzcfc/
You can also make the resiz() instruction to execute when the page loads, so it will automatically place the icon correctly at start, and avoid editing the css.
Update: I tested it in Firefox, and it worked well. In chromium it does not work so well. Maybe you'll have to edit the code for differents browsers