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;">
Related
.surveyform-class {
background: yellow;
margin: 0 25%;
width: 50%;
border-right: 40px solid yellow;
}
.main-div{
background: lightgrey;
width: 50%;
height:100%;
margin: 0 25%;
border-right: 20px solid yellow;
border-left: 20px solid yellow;
}
form {
/* Center the form on the page */
margin: 0 auto;
width: 400px;
}
form >div {
margin-top: 1em;
}
form >div >div {
padding-left: 95px;
}
label{
width: 90px;
text-align: right;
display: inline-block;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div style="
text-align: center;">
<h1 class="surveyform-class">Survey Form</h1>
<div class="main-div">
lwt us know how we can improve freecode camp
<form >
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div >
<label>
which option best describes your current role
</label>
<select >
<option>student</option>
<option>engineer</option>
</select>
</div>
<div >
<label>
Things that should be improved in future
</label>
<input type="checkbox" name="a">
<span> Front end projects</span>
<div>
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div>
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I am trying to align these select element and labels to start at same line.
Can someone help me ?
Here is jsfiddle link : http://jsfiddle.net/v650o2dL/2/
Use the css property vertical-align:top. Be sure to separate the containers of the left and right containers like I did below;
.yellow {
background: yellow;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
.yellow>h1 {
text-align: center;
}
.grey {
background: lightgrey;
height: 200px;
}
.row {
width: 100%;
display: block;
margin-bottom: 10px;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
.input-group {
display: block;
margin-bottom: 10px;
}
<DOCTYPE! html>
<html>
<head>
<title>Survey Form</title>
<link href="surveyform.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="yellow">
<h1>Survey Form</h1>
<div class="grey">
<center>
Let us know how we can improve freecode camp
</center>
<br>
<form>
<div class="row">
<div class="left">
<label>
Which option best describes your current role
</label>
</div>
<div class="right">
<select>
<option>student</option>
<option>engineer</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label>
Things that should be improved in future
</label>
</div>
<div class="right">
<div class="input-group">
<input type="checkbox" name="a">
<span> Front end projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Backend Projects</span>
</div>
<div class="input-group">
<input type="checkbox" name="a">
<span> Structure </span>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
How to put a awesome icon font inside the bootstrap input type text aligned at left and with some margin-right relative to the placeholder text using bootstrap? Im doing like this: https://jsfiddle.net/tbeay2vd/1/ and using the bootstrap class "input-group-addon" it works but I would like to have a input text like:
Do you know how to do that using bootstrap?
Html:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- How to do this input text below using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i> Search..
</div>
</div>
</div>
</div>
Try this:
$('input').on('focus', function () {
$(this).parent().addClass('active');
});
.example {
margin-top:30px;
border:1px solid gray;
border-radius:4px;
padding:15px;
}
.example >i {
margin-right:10px;
}
.search-input {
border: none;
width: 90%;
}
.search-input:focus{
outline: none;
}
.example.active {
border-color: #80bdff;
}
.search-box .input-group-addon {
background: none;
}
.search-box input {
border-left: none;
}
.search-box.active .input-group-addon {
border-color: #80bdff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group search-box">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- Hpw to do this layout using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i>
<input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
.input-group >.fa{
position: absolute;
z-index: 10;
top: 37%;
left: 20px;
}
.input-group .form-control{
padding-left: 40px;
height: 60px;
border: black solid 1px;
position: relative;
border-radius: 5px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
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'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>
:
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;
}