:
give me the suggestion to add upload button in image using html5 and css and 1.7
for below java 1.6 image i need to add upload button in the corner of that (+) image..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/stylejava.css">
</head>
<body>
<h1>Welcome to Java</h1>
<div class="imagewrap">
<button type="submit" class="button" value="Button">
<img src="../images/symbol1.png" alt="Submit"
style="width: 50px; height: 50px">
</button>
<img src="../images/java166.jpg" alt="Mountain View"
style="width: 200px; height: 200px">
</div>
<div class="imagewrap">
<button type="submit" class="button1" value="Button 1">
<img src="../images/symbol.png" alt="Submit"
style="width: 50px; height: 50px">
</button>
<img src="../images/java177.jpg" alt="Mountain Viewm"
style="width: 200px; height: 200px">
</div>
</body>
</html>
this is my html5 code
You can use label tag to implement what you want.
Here is an example: http://jsfiddle.net/tvtespeq/
HTML:
<input type="file" id="img-upload">
<label id="img-label" for="img-upload"></label>
CSS:
#img-label {
width: 100px;
height: 100px;
display: block;
background: url("http://placehold.it/100x100");
cursor: pointer;
}
#img-upload {
display: none;
}
Related
I would like that the calendar to appear outside the .row div but div must have both scrolls bar.
If div have overflow popierty cut off calendar.
I tried set widgetParent to body, but then position of calendar is wrong. Not near input.
<div class="container">
<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: scroll;">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' style="width: 40px;" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
example
$(function() {
$('#datetimepicker1').datetimepicker();
// $('#datetimepicker1').datetimepicker({widgetParent: 'body'});
});
.row {
position: relative;
border: 1px solid #000;
width: 150px;
height: 200px;
overflow: show;
}
.row #datetimepicker1 {
position: absolute;
z-index: 10001;
top: 20px;
right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Try not to write inline css , instead you can give class and then write css in that class.
Is this the same that you are looking for?
Hope this helps.
Change your .row's overflow to 'show.'
So:
<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: show;">
I want to change my bottom off-canvas height, but I'm using only css and not sass. How can I do it?
based on the docs I think this will do the work:
In your custom apps.css:
.off-canvas.position-bottom{
height: 150px;
transform: translateY(150px);
}
Edit:
This is the exact example on what I tested before posting... once again... at me is working... the example is hazadous, but its not long and it's easy to understand, I let only the off-canvas bottom
<html>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<style type="text/css">
.fill{
height: 400px;
width: 200px;
background-color: red;
display: block;
}
.off-canvas-wrapper{
height: 1500px;
width: 400px;
}
.position-bottom{
height: 50px;
}
</style>
<div class="off-canvas-wrapper">
<div class="off-canvas position-bottom" id="offCanvasBottom1" data-off-canvas>
<div class='fill'></div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<button type="button" class="button" data-toggle="offCanvasLeft1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRight1">Open Right</button>
<button type="button" class="button" data-toggle="offCanvasTop1">Open Top</button>
<button type="button" class="button" data-toggle="offCanvasBottom1">Open Bottom</button>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
I've created a profile picture structure in Bootstrap.
I want ask how can I add an hover effect which allows the apparition of a plus symbol, like = + , which indicates to the user that they can add a new image or something like it.
Thanks.
#import url( 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points </span>
</div>
</div>
EDIT: gave parent div .profile-header-img the img's width and height to set :hover on it and prevent flickering:
.profile-header-img {
width: 120px;
height: 120px;
margin: 0 auto;
}
.glyphicon.glyphicon-plus-sign {
display: none;
color: white;
position: absolute;
z-index: 1;
left: 50%;
top: 44px;
transform: translate(-50%, 0);
font-size: 32px;
}
.profile-header-img:hover .glyphicon.glyphicon-plus-sign {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<span class="glyphicon glyphicon-plus-sign"></span>
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points
</span>
</div>
</div>
</div>
</div>
I have a modal with a close button on the bottom. It seems like it is moving up and down depending on how long the comment section right on top. I'm trying to fix the position of it on the bottom no matter how long the comment section is. So I used relative, but I would appreciate it if you guys have better idea to fix this. Thanks.
View:
<div class="form-horizontal">
<div class="modal-title title">
<p>#ViewBag.name<span> Info</span></p>
</div>
<div id="info">
<p>#Html.Label("Name: ") #ViewBag.name</p>
<p>#Html.Label("Age: ") #ViewBag.age</p>
<p>#Html.Label("Comment: ") #ViewBag.comment</p>
</div>
<div id="close">
<div class="col-md-12">
<input type="button" id="closeButton" value="Close" class="btn btn-default" />
</div>
</div>
</div>
CSS:
.btn {
border: 2px solid transparent;
background: white;
color: black;
font-size: 16px;
line-height: 15px;
padding: 10px 0;
display: block;
width: 150px;
margin: 0 auto;
}
.title {
position: relative;
top: 20px;
}
.title p {
text-align: center;
font-size: 30px;
}
.title span {
color: black;
}
#info {
position: relative;
top: 50px;
left: 20px;
}
#info p {
font-size: 15px !important;
width: 310px;
}
#close {
position: relative;
top: 70px;
}
Just gave fixed height to the modal body so that body can be scrolled with out changing the button position
enter code h
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" style="height:200px; overflow-y:scroll;">
<p>#Html.Label("Name: ") #ViewBag.name</p>
<p>#Html.Label("Age: ") #ViewBag.age</p>
<p>#Html.Label("Comment: ") #ViewBag.comment</p>
</div>
<div class="modal-footer">
<input type="button" id="closeButton" value="Close" class="btn btn-default" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ere
Just add position: fixed and sink it to the bottom if thats what you want.
#close {
position: fixed;
bottom: 0px;
left: 50%;
}
I'm trying to expand md-textfield on full width of outer-table element. However, it is not expanding correctly when I set width: 100%, the part of it goes belong the right side of a screen, and it's size has some problems. I'm not giving outer-table exact width, since it should change depending on the device. Could somebody please give me a hint on what I'm doing wrong, here's what I've done at the moment.
.outer-table {
width: 100%
}
.table-header {
position: relative;
left: 9px;
bottom: 3px;
width: 100%;
}
.table-header div.mdl-textfield {
position: absolute;
right: 10px;
z-index: 9999;
width: auto;
}
.full-width {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>mdl textarea</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</head>
<body>
<div class="outer-table">
<div class="table-header">
<div class="mdl-textfield mdl-js-textfield full-width">
<label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder full-width">
<input class="mdl-textfield__input full-width" type="text" id="expando1">
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
</div>
</div>
</div>
</div>
</body>
</html>
Updated after Brian's answer
I want label element to stick on the right side, and on click expand to the left.
Change this css:
.table-header div.mdl-textfield {
position: absolute;
right: 10px;
z-index: 9999;
width: auto;
}
To this css:
.table-header div.mdl-textfield {
position: absolute;
right: 10px;
z-index: 9999;
width: 100%;
}
you just interchange location of the <label> and the <div></div>
<div class="table-header">
<div class="mdl-textfield mdl-js-textfield full-width">
<div class="mdl-textfield__expandable-holder full-width">
<input class="mdl-textfield__input full-width" type="text" id="expando1">
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
</div>
<label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
<i class="material-icons">search</i>
</label>
</div>
</div>