i used this below css
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
for my html
<div class=" btn btn-primary fileContainer">
<div class="input-group">
<i class="fa fa-paperclip fa-inverse"></i> Attachment
<input type="file" ngf-select ngf-multiple="true"
ng-model="noteListData.files" name="files">
</i>
</div>
</div>
using this css i am not able to see that text .
help me out.
i want to display button as well as text also.
thank you
It turns out should be the attribute "opacity" instead of "filter". Try to set the "opacity" to 1.
Related
I have an image with a font awesome overlay of a plus. When I hover over the image (a tag) I want to display the plus, but I'm not sure if I have the correct css. The plus doesn't show when I hover over it!
Here is my code
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover > .addTeacher {
display: normal;
}
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i>
</div>
</div>
</a>
Your CSS should look like this
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost .addTeacher { display: none; }
a.registerTeacherAsHost:hover .addTeacher {
display: block;
}
And the HTML
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i>
</div>
</div>
</a>
There were three problems with your code,
You were using the ">" selector which will only select the child element (.addTeacher) which is right after the parent element (.registerTeacherAsHost) which in you case doesn't work.
Other than that, the problem was with HTML where you declared the CSS for .addTeacher in the style tag, browsers take the CSS in this tag into consideration over any other stylesheets. One thing that could've worked was adding an !important to a.registerTeacherAsHost:hover .addTeacher { display: block !important; }. But it's better to write styles in a stylesheet and avoid using the !important as much as possible.
Next thing was, you were using display: normal which I've never heard of before and I think the browser hasn't too. display: block does the job.
Here's a fiddle: https://jsfiddle.net/5ncprd90/
Hope it helps!
There's been plenty wrong with your CSS which has been discussed already. I am focusing on a quick solution which goes here. Some adjustments have been made in the HTML structure and you are advised to avoid inline CSS. Hope this is what you are looking for.
a.registerTeacherAsHost{
display:inline-block;
}
a.registerTeacherAsHost:hover .thumbnail img {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover i.addTeacher {
display: block;
cursor: pointer !important;
}
.thumbnail{
position:relative;
max-width:100%;
}
i.addTeacher{
display:none;
z-index: 200;
position: absolute;
top: 35%;
right: 42%;
color: grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher">
<i class="addTeacher fa fa-plus fa-2x"></i>
</div>
</a>
I am developing a website in Angular 2. I want to be able to upload images by clicking on a icon from font awesome, but i am having problems doing this. I can upload images when i use a label for this, but now when using font awesome icons i can't
What i have right now:
#pic {
border-radius: 200px;
width: 200px;
height: 200px;
background-size: 240px;
border-style: none;
border: 2px solid black;
outline: none;
cursor: pointer;
}
#pencilicon {
position: absolute;
margin-left: 85px;
margin-top: 85px;
font-size: 50px;
color: #fff;
visibility: hidden;
opacity: 0;
cursor: pointer;
transition: opacity .2s, visibility .2s;
}
#uploadinput{
position: absolute;
opacity: 0;
z-index: -1;
text-align: left;
}
<div id="picture">
<input type='file' (change)="readUrl($event)"id="uploadinput">
<i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-
hidden="true"> </i>
<img [src]="imageurl" id="pic" >
</div>
You have to include the font awesome library into your page and give the appropriate icon like so:
<i class="fa fa-upload"></i>.
See the code snippet below for an example and demo of your requirement.
input[type="file"].novisible {
display: none;
}
input[type="file"].novisible + label {
width:200px;
height:200px;
border-radius:50%;
border:2px solid #999;
display:inline-flex;
justify-content:center;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="file" class="novisible" id="file_upload">
<label for="file_upload" class="btn btn-md btn-teak"><i class="fa fa-upload"></i> <span>Upload</span></label>
Have you tried putting your icon in a label ?
Personnaly I do like that (with Ember.js)
<input type='file' (change)="readUrl($event)"id="uploadinput">
<label for="uploadinput">
<i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-hidden="true"></i>
<span>{{uploadLabel}}</span>
<!-- This is then switched to file name -->
</label>
CSS :
input[type="file"] {
position: absolute;
left: -9999%;
& + label {
// your label style
}
}
Fits your method is attached to input wich have z-index -1, it's impossible to click it now.
Change z-index to 999 and click on the top border of the circle.
Your method should be run when you click on the circle, not input.
I have a image when hovered should show a small pencil icon to change upload new image. I am new to css, I have set the visibility of the icon to hidden by default. But when i change the visibility on hover to visible. It doesn;t show up.
<div class="col-lg-3">
<img id = "personal_profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
<a href="#">
<span id="upload_pic_icon">
<label for="avatar" id="avatar_label">
<i class="fa fa-pencil" aria-hidden="true"></i>
</label>
</span>
</a>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</img>
</div>
Here is my css
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
visibility: hidden;
}
#personal_profile_pic:hover #upload_pic_icon{
visibility: visible;
}
I don't understand how to go about this.
You need to use + selector , it will select #upload_pic_icon that are placed immediately after #personal_profile_pic
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
visibility: hidden;
}
#personal_profile_pic:hover + #upload_pic_icon {
visibility: visible;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
<img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
<a href="#" id="upload_pic_icon">
<span>
<label for="avatar" id="avatar_label">
<i class="fa fa-pencil" aria-hidden="true"></i>
</label>
</span>
</a>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</div>
Or you can wrap img and edit in div and the set hover on .wrap, and use display:none instead.
.wrap {
position: relative;
display: inline-block;
}
.wrap #upload_pic_icon {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
.wrap:hover #upload_pic_icon {
display: block;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
<div class=wrap>
<img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
<a href="#" id="upload_pic_icon">
<label class="fa fa-pencil" for="avatar" id="avatar_label">
</label>
</a>
</div>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</div>
You shouldn't be wrapping html content inside an <img> tag, it's not syntatically correct.
Place all your content after the image tag, and trigger the css on hover using + selector. Use opacity instead of visibility as well for smoother transitions.
HTML:
<div class="col-lg-3">
<img id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"/>
<a href="#">
<span id="upload_pic_icon">
<label for="avatar" id="avatar_label">
<i class="fa fa-pencil" aria-hidden="true"></i>
</label>
</span>
</a>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</div>
CSS:
#upload_pic_icon {
opacity: 0;
}
#personal_profile_pic:hover + #upload_pic_icon {
opacity: 1;
}
Try changing opacity from a very small value which the img could be considered invisible to fully visible (1.0). But your logic is likely wrong as there is no sense to hover something previously invisible.
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
opacity: 0.000001;
}
#personal_profile_pic:hover #upload_pic_icon{
opacity: 1;
}
Very Simple Here is the Solution
https://jsfiddle.net/dineshkanivu/uddv4y9z/
HTML
<div class="MyImage">
<div class="penLayer">
<img src="https://cdn2.iconfinder.com/data/icons/snipicons/500/pencil-128.png"/>
</div>
</div>
CSS
.MyImage{
background: url("http://gretchenrubin.com/wp-content/uploads/2013/09/big_small_.jpg");
width: 350px;
height: 263px;
position:relative
}
.penLayer{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:none;
}
.penLayer img{width:60px;
height:60px;
position:absolute;
left:50%;
top:50%;
margin-top:-30px;
margin-left:-30px}
I have few elements, 2 i and 1 input.
The layout I using w3-col from a frameworks called w3.css, and a font icon library called FontAwesome.
Since s7 + s5 = s12, why my elements still drop to the new row?
The 3 elements in div s5 expected should be in the same line.
Hope you guys can help me on this.
<div class="w3-row w3-section">
<div class="w3-col s7">
<label><b>Apple</b></label>
</div>
<div class="w3-col s5">
<i id="plus" class="fa fa-plus" style="font-size:24px"></i>
<input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
<i id="minus" class="fa fa-minus" style="font-size:24px"></i>
</div>
</div>
w3.css doesnt currently support "input-group"s. I use the term input groups, because this is the term that Twitter Bootstrap uses to refer to what you're looking for. What we can do, is examine the Bootstrap input-group code, and extend w3.css's code to include similarly prefixed versions. Unfortunately, w3.css uses the class w3-input-group already, so we will use w3-inline-input-group.
HTML
<div class="w3-row w3-section">
<div class="w3-col s7">
<label><b>Apple</b></label>
</div>
<div class="w3-col s5 w3-inline-input-group">
<i id="plus" class="fa fa-plus w3-input-group-addon"></i>
<input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
<i id="minus" class="fa fa-minus w3-input-group-addon"></i>
</div>
</div>
CSS
.w3-inline-input-group {
position: relative;
display: table;
border-collapse: separate;
}
.w3-inline-input-group .w3-input {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.w3-inline-input-group .w3-input:focus {
z-index: 3;
}
.w3-input-group-addon,
.w3-inline-input-group .w3-input {
display: table-cell;
}
.w3-input-group-addon
{
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.w3-input-group-addon {
font-size: 24px;
font-weight: normal;
line-height: 1;
text-align: center;
}
JSFIDDLE
NOTE: JsFiddle doesnt allow inclusion of non-https external files, so please scroll to the BOTTOM of the css pane to find the new/above css
PS. If you havent come too far in your project, and you're going to be working with form elements a lot, I would strongly suggest looking into the Twitter Bootstrap CSS framework (you can customise an export of the library, to exclude all JS if you want to build all your own stuff, but again, they have a lot of very useful out-of-the-box code that I would recommend). It's a great place to start, and is far more widely used that w3.css (at least in terms of jobs asking for a knowledge of it)
Markup you had written is correct.
Your own code might be overwriting s7 and s5 class property float: left;
If you found it's overwriting then correct this.
Also add this style for input component
`.s5 {
position: relative;
}
.s5 input {
padding: 8px 15px;
}
.s5 i {
z-index: 1;
}
.s5 #plus {
position: absolute;
left: 0;
top: 5px
}
.s5 #minus {
position: absolute;
right: 0;
top: 8px
}`
Here is live example of your code :)
http://codepen.io/kaushik/pen/JERMwg
I have been trying to add labels to the left of my FAB. I am liking the Material Design, but I am having an issue on getting the labels to appear properly. Any tips would be appreciated. Everything is displaying correctly except adding labels.
Here is a working example:
http://codepen.io/petja/pen/OVRYMq
HTML
<div class="backdrop"></div>
<div class="fab child" data-subitem="1">
<img alt="" src="images/smile.jpg">
</div>
<div class="fab child" data-subitem="2">
<img alt="" src="about/smile.jpg">
</div>
<div class="fab visible-xs float-phone" id="masterfab">
<i class="fa icon-phone soft-white"></i>
</div>
CSS
.fab {
background: #1C9E00;
border-radius: 50%;
text-align: center;
color: #FFF;
position: fixed;
right: 70px;
font-size: 25px;
padding: 9px 2.5px 6px;
-webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .42));
}
.fab span {
vertical-align: middle;
}
.fab.child {
width: 53.666667px;
height: 37.666667px;
display: none;
opacity: 0;
background: transparent;
border-radius: 0%;
right: 63px;
padding: 0;
}
.fab img {
border-radius: 50%;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FAFAFA;
opacity: 0.7;
display: none;
}
JS
$(function(){
$(".fab,.backdrop").click(function(){
if($(".backdrop").is(":visible")){
$(".backdrop").fadeOut(125);
$(".fab.child")
.stop()
.animate({
bottom : $("#masterfab").css("bottom"),
opacity : 0
},125,function(){
$(this).hide();
});
}else{
$(".backdrop").fadeIn(125);
$(".fab.child").each(function(){
$(this)
.stop()
.show()
.animate({
bottom : (parseInt($("#masterfab").css("bottom")) + parseInt($("#masterfab").outerHeight()) + 70 * $(this).data("subitem") - $(".fab.child").outerHeight()) + "px",
opacity : 1
},125);
});
}
});
});
You want something like this?
There is .backdrop class in your css So, when I try to add materialize tooltipped it has same class name .backdrop which responsible to change background color of tooltip.
You added background: #ECECEC; in .backdrop So, tooltips had also same background color. So, I changed your .backdrop to .backdrop_gray and Now everything is fine.
HTML
<div class="backdrop_gray"></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am C" data-subitem="1"><span>C</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am B" data-subitem="2"><span>B</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am A" data-subitem="3"><span>A</span></div>
<div class="fab" id="masterfab"><span>+</span></div>
<h1>Floating Action Button</h1>
<p>(Hint: Button interacts with you)</p>
JS
$('.tooltipped').tooltip({delay: 50});
... // Your other JS.
Working Codepen
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>