As per the below code, by default home tab is showing blank. Content will display below when we click on product ordering tab. I have written this code in Javascript. But when i tried to convert these into bootstrap im struggling more to create this.
Anybody can help to resolve this?
<!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<link type="text/css" rel="stylesheet" media="all" href="images/style.css" />-->
<style>
.wrapper {
margin: 0px auto 0px auto;
padding: 3px 0px 0px 0px;
width: 100%;
}
.container{
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
height: 500px;
background-color: white;
border: 1px solid green;
}
.clear{
clear: both;
}
.menu_container{
margin: 0px;
padding: 0px;
width: 900px;
}
.middle_container{
margin:0px;
padding:0px;
width: 900px;
}
.middle_container_left{
margin:0px;
padding:0px;
width: 300px;
height: 246px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
float:left;
}
.middle_container_right{
margin:0px 0px 0px 10px;
padding:0px;
width: 580px;
height: 300px;
/*border: 1px solid black;*/
float:left;
}
.menu_font{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
background-color: #8eaf64;
border-radius:5px 5px 0 0;
color: white;
}
.menu_font:hover{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
color: white;
background-color:#64A70B !important;
border-radius:5px 5px 0 0;
}
.onoffswitch {
position: relative; width: 63px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 6px;
background-color: #85a857; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 2px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 30px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: -4px;
bottom: 0;
right: 26px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: -5px;
}
.green{
color: green;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
function show_menu(elementId) {
document.getElementById("home").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById(elementId).style.display="block";
}
function show_left_menu(elementId) {
document.getElementById("quick_add").style.display="none";
document.getElementById("solution_builder").style.display="none";
document.getElementById("bulk_load").style.display="none";
document.getElementById("product_search").style.display="none";
document.getElementById("saved_cart").style.display="none";
document.getElementById("view_favorites").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h2 align="center">Demo</h2>
<div class="menu_container">
<div class="menu_font" onclick="show_menu('home');">Home</div>
<div class="menu_font" onclick="show_menu('id2');">Product Ordering</div>
<div class="clear"></div>
</div>
<div class="middle_container">
<div id="home" style="height: 300px;"></div>
</div>
<div class="middle_container" id="id2" style="display:none">
<div class="middle_container_left">
<ul style="list-style-type: none;margin:0px;padding:0px;">
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li>
<li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li>
</ul>
</div>
<div class="middle_container_right" id="quick_add">
<h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="width: 300px;">
<tr>
<td>Item Name:</td>
<td>
<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
<div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
<div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
<div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
<div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
MY Bootstrap code
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #666; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
body{ background: #EDECEC; padding:50px}
</style>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<!--<div class="container-fluid text-center"> -->
<div class="container">
<div class="row content">
<div class="col-sm-2 sidenav" style="border: 1px solid red;">
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-8 text-left">
<h1 style="text-align: center;">DEMO</h1>
<div class="row">
<div class="col-md-6" style="border: 1px solid red;width:100%;">
<!-- Nav tabs --><div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<!--<li role="presentation">Messages</li>
<li role="presentation">Settings</li>-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"></div>
<div role="tabpanel" class="tab-pane" id="profile"><h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="border: 1px solid red;">
<tr>
<td>Item Name:</td>
<td>
<!--<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>-->
<div class="col-sm-10">
<input class="form-control" type="text" id="sm">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<!--<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>-->
<input type="checkbox" checked data-toggle="toggle">
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<!--<div role="tabpanel" class="tab-pane" id="messages"></div>
<div role="tabpanel" class="tab-pane" id="settings"></div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Not even sure where to start here. But one main cause for unexpected display results may be that bootstrap-toggle.min.css is after your embedded styling so the default bootstrap CSS will override your custom styling which I am assuming is the opposite to what you are trying to do.
i dont know exactly what your saying but you could just line for line convert it by hand to a seperate language thats compatable, im sure theres a better way to do this but this is how i personaly do it.
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
So this is how my project currently looks like:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<style>
body {
background-color: lightgray;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
</style>
</head>
<body>
<!-- <img class="feed-avatar" src="img_avatar.png"> -->
<div id="main-container">
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div> <!-- main-container -->
</body>
</html>
And this is basically what I want it to look like:
So basically, what I want is to split up the div, and where the X is in the image I want to have a small icon (on the left side there). I tried split using float left, and float right, but can't make it work. Any ideas?
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<style>
body {
background-color: lightgray;
}
div#main-container { /* flex css */
display: flex;
}
.closeBtn { /*left side btn css */
background: lightgray;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
color: #fff;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
</style>
</head>
<body>
<!-- <img class="feed-avatar" src="img_avatar.png"> -->
<div id="main-container">
<div class="closeBtn">X</div> <!-- ADD here X btn -->
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div> <!-- main-container -->
</body>
</html>
Using flex you can achieve this
body {
background-color: lightgray;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
.flex{
display: flex;
align-items:center;/*play with this to align picture to box*/
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flex">
<img class="feed-avatar" src="img_avatar.png">
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div>
</body>
</html>
image image2I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
Any help is greatly appreciated. Thanks!
body {
font-family: 'Poppins';
overflow: hidden;
}
.navbar-inverse {
background-color: #fff !important;
border-color: #ffffff !important;
border-bottom: 1px solid #979797 !important;
}
#media (min-width: 768px){
.navbar {
border-radius: 0px !important;
}
}
.color-1{
color: #FCB900;
}
.sidebar{
color: #FCB900;
font-size: 21px;
float: left;
padding: 10px 5px;
cursor: pointer;
margin: 0 10px;
}
.logo a{
color: #424242 !important;
}
.logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
font-weight: 600;
}
.logo-a{
padding: 0 !important;
font-size: 13px !important;
}
/* Sidebar CSS */
.sidebar-logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 10px 20px;
font-size: 14px;
width: 50%;
margin-left: 10%;
text-align: center;
font-weight: 600;
}
.sidebar-title{
margin-left: 10%;
font-size: 12px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fcb900;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 12px 8px 10px 25px;
text-decoration: none;
font-size: 14px;
color: #101010;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #101010;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 15px;
font-size: 25px;
margin-left: 50px;
}
.cart-icon{
font-size: 16px;
}
/*------------------------Profile Account----------------------------*/
.widget-author {
margin-bottom: 58px;
}
.author-card {
position: relative;
padding-bottom: 48px;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .09);
}
.author-card .author-card-cover {
position: relative;
width: 100%;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.author-card .author-card-cover::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0.5;
}
.author-card .author-card-cover > .btn {
position: absolute;
top: 12px;
right: 12px;
padding: 0 10px;
}
.author-card .author-card-profile {
display: table;
position: relative;
margin-top: -85px;
padding-right: 15px;
padding-bottom: 16px;
padding-left: 20px;
z-index: 5;
}
.author-card .author-card-profile .author-card-avatar, .author-card .author-card-profile .author-card-details {
display: table-cell;
vertical-align: middle;
}
.author-card .author-card-profile .author-card-avatar {
width: 85px;
border-radius: 50%;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
overflow: hidden;
}
.author-card .author-card-profile .author-card-avatar > img {
display: block;
width: 100%;
}
.author-card .author-card-profile .author-card-details {
padding-top: 50px;
padding-left: 15px;
}
.author-card .author-card-profile .author-card-name {
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
}
.author-card .author-card-profile .author-card-position {
display: block;
color: #8c8c8c;
font-size: 12px;
font-weight: 600;
}
.author-card .author-card-info {
margin-bottom: 0;
padding: 0 25px;
font-size: 13px;
}
.author-card .author-card-social-bar-wrap {
position: absolute;
bottom: -18px;
left: 0;
width: 100%;
}
.author-card .author-card-social-bar-wrap .author-card-social-bar {
display: table;
margin: auto;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .11);
}
.btn-style-1.btn-white {
background-color: #fff;
}
.list-group-item i {
display: inline-block;
margin-top: -1px;
margin-right: 8px;
font-size: 1.2em;
vertical-align: middle;
}
.mr-1, .mx-1 {
margin-right: .25rem !important;
}
.list-group-item.active:not(.disabled) {
border-color: #e7e7e7;
background: #fff;
color: #ac32e4;
cursor: default;
pointer-events: none;
}
.list-group-flush:last-child .list-group-item:last-child {
border-bottom: 0;
}
.list-group-flush .list-group-item {
border-right: 0 !important;
border-left: 0 !important;
}
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
a.list-group-item, .list-group-item-action {
color: #404040;
font-weight: 600;
}
.list-group-item {
padding-top: 16px;
padding-bottom: 16px;
-webkit-transition: all .3s;
transition: all .3s;
border: 1px solid #e7e7e7 !important;
border-radius: 0 !important;
color: #404040;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
.list-group-item {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.125);
}
.list-group-item.active:not(.disabled)::before {
background-color: #ac32e4;
}
.list-group-item::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: transparent;
content: '';
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 15px;
}
}
#exTab1 .tab-content {
color : #FCB900;
background-color: #fff;
padding : 5px 15px;
}
#exTab2 h3 {
color : #FCB900;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* Sidebar CSS */
.navbar-inverse .navbar-nav>li>a:hover {
color: #333;
}
.banner{
background-image: url('img/banner.jpg');
background-position: center center;
background-size: 100%;
margin: 0;
width: 100%;
height: 250px;
}
#media (min-width: 320px) and (max-width: 600px) {
.logo{
border: 1px solid #fff;
}
.head{
border-bottom: 0px solid #fff !important;
}
.header-right{
display: none !important;
}
.logo-media{
background: white;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
width: 50%;
text-align: center;
font-weight: 600;
}
.no-margin{
margin-top: 0px !important;
margin-bottom: 0px;
}
.icon{
position: absolute !important;
top: 11px;
right: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travelling | Account Settings </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-inverse head">
<div class="container-fluid">
<span style="" onclick="openNav()" class="sidebar">☰</span>
<div class="navbar-header logo">
<a class="logo-media" href="#">Logo</a>
</div>
<div id="mySidenav" class="sidenav">
×
<div class="sidebar-logo">
<a class="logo-a" href="#">Logo</a>
</div>
<span class="sidebar-title">My Account</span>
<span class="glyphicon glyphicon-home p-r-10"></span> Home
<span class="glyphicon glyphicon-road p-r-10"></span> My Booking
<span class="glyphicon glyphicon-envelope p-r-10"></span> Messages
<span class="glyphicon glyphicon-user p-r-10"></span> Account
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Settings</span>
Language
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Information</span>
Customer Service
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="fa fa-sign-in p-r-10" aria-hidden="true"></span>Login
<span class="fa fa-user-o p-r-10" aria-hidden="true"></span>Sign Up!
</div>
<ul class="nav navbar-nav navbar-right no-margin">
<li class="icon"><span class="glyphicon glyphicon-shopping-cart color-1 cart-icon "></span></li>
<li class="header-right">Login</li>
<li class="header-right">Sign Up</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-4 pb-5">
<!-- Account Sidebar-->
<div class="author-card pb-3">
<div class="author-card-cover">
<!-- <a class="btn btn-style-1 btn-white btn-sm" href="#" data-toggle="tooltip" title="" data-original-title="You currently have 290 Reward points to spend"><i class="fa fa-award text-md"></i> 290 points</a> --></div>
<div class="author-card-profile">
<div class="author-card-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</div>
<div class="author-card-details">
<h5 class="author-card-name text-lg">Daniel Adams</h5><span class="author-card-position">Joined February 06, 2017</span>
</div>
</div>
</div>
<div class="wizard">
<nav class="list-group list-group-flush">
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Account Setting</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">My Booking</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-tag mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Wish List</div>
</div>
</div>
</a>
</nav>
</div>
</div>
<!-- Profile Settings-->
<div class="col-lg-8 pb-5">
<!-- <form class="row">
<div class="col-md-6">
<div class="form-group">
<label for="account-fn">First Name</label>
<input class="form-control" type="text" id="account-fn" value="Daniel" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-ln">Last Name</label>
<input class="form-control" type="text" id="account-ln" value="Adams" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-email">E-mail Address</label>
<input class="form-control" type="email" id="account-email" value="daniel.adams#example.com" disabled="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-phone">Phone Number</label>
<input class="form-control" type="text" id="account-phone" value="+7 (805) 348 95 72" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-pass">New Password</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-confirm-pass">Confirm Password</label>
<input class="form-control" type="password" id="account-confirm-pass">
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="custom-control custom-checkbox d-block">
<input class="custom-control-input" type="checkbox" id="subscribe_me" checked="">
<label class="custom-control-label" for="subscribe_me">Subscribe me to Newsletter</label>
</div>
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form> -->
<h1>Account Settings </h1>
<div id="exTab1">
<ul class="nav nav-pills">
<li>
Personal Information
</li>
<li>Travel
</li>
<li>Security
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane" id="1a">
<form class="row">
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="sel1" placeholder="Gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Passport No.">Passport No.</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Date of Birth">Date of Birth</label>
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Country">Country</label>
<select class="selectpicker countrypicker form-control" data-flag="true" ></select>
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h4> Change Password </h4>
<form>
<div class="form-group">
<label for="email" style="color:#2EC4B6">Current Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Current Password">
</div>
<div class="form-group">
<label for="email" style="color:#2EC4B6">New Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
<button type="submit" class="btn" style="background: #FCB900; color:#fff;">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Maybe you should consider something like this! :)
.author-card-shape {
width: 85px;
height: 85px;
border-radius: 50%;
overflow: hidden;
}
.author-card-img {
max-width: 100%;
height: auto;
}
<figure class="author-card-shape">
<img class="author-card-img" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</figure>
I have two navbars in my application which seems to be off-sync. i.e, this:
I would like to have the navbar collapsed across the logo.
Like this:
Tried deploying this logo under navbar-header class too. But faces problems with alignment.
MY CODE:
admin.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>MDM - Admin Suite</title>
<div th:replace="fragments/header :: header-css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body ng-app="uploadFileApp">
<div th:replace="fragments/header :: header"/>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container uploadposition">
<div ng-controller="uploadFileController">
<form class="form-horizontal" id="uploadForm" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="uploadfile">Upload File:</label>
<div class="col-sm-5">
<input id="upload" class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
</div>
<button type="submit" class="uploadButton" ng-click = "doUploadFile()">Upload</button>
</div>
</form>
<div class="col-sm-offset-2">
<p ng-bind="uploadResult"></p>
</div>
<hr/>
</div>
<div id="pas-table-div" style="display:none;">
<h3>PAS MDM Reject Records</h3>
<div ng-show="loading" >
<h3>Loading...</h3>
</div>
<div class="col-sm-offset-2">
<p ng-bind="submitResult"></p>
</div>
<table st-table="display_records" st-safe-src="employees" ng-init="getData()" ng-show="employees.length"
class="table table-striped" ng-controller="uploadFileController">
<thead>
<tr>
<th>Policy Number</th>
<th width="100px">First Name</th>
<th st-sort="salary">Last Name</th>
<th>Error Description</th>
<th>Validated/Corrected in PAS</th>
<th>Note</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple"
ng-repeat="row in display_records">
<td>{{row.PolicyNumber}}</td>
<td>{{row.FirstName}}</td>
<td>{{row.LastName}}</td>
<td>{{row.ErrorDescription}}</td>
<td>{{row.PASValidated}}</td>
<td>{{row.Note}}</td>
<td><button type="button" class="btn btn-danger" ng-click="deletRecord(row.PolicyNumber)">
<i class="glyphicon glyphicon-trash"> </i>
</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="border-bottom: 1px solid #ddd;"></td>
<td style="border-bottom: 1px solid #ddd;">
<button type="button" class="submitButton" ng-click="submit(employees)">Submit</button>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage"></div>
</td>
</tr>
</tfoot>
</table>
</div>
<script src="/js/jsaApp.js"></script>
<script src="/js/uploadFileCtrl.js"></script>
</div>
</body>
</html>
header.html:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:fragment="header-css">
<!-- this is header-css -->
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</div>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a class="navbar-brand" href="#" th:href="#{/}"><img class="logoImg" height="25" width="55" src="http://static1.squarespace.com/static/56bcdc788259b5861e880ebe/t/5a96fae971c10bede98395de/1520548852981/?format=1500w"></img></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li th:classappend="${module == 'tasks' ? 'active' : ''}">
Tasks
</li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="#{/dashboard}"><span>Dashboard</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="#{/orders}"><span>Orders</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="#{/income}"><span>Income</span></a></li>
<li role="separator" ></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a href="/signin" th:href="#{/signin}">
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Sign in
</a>
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<a href="/logout" th:href="#{#}" onclick="$('#form').submit();">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Sign out
</a>
<form style="visibility: hidden" id="form" method="post" action="#" th:action="#{/logout}"></form>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
main.css:
h1 {
color: #0000FF;
display: inline;
}
h2 {
color: #FF0000;
}
footer {
margin-top: 60px;
}
.uploadposition {
position: absolute;
right: 0px;
top: 100px;
width: 85%;
}
.navbar-inverse {
margin-bottom: 0px !important;
position: relative !important;
}
.logoImg {
background-size: 70.7%;
background-repeat: no-repeat;
background-position: 50%;
}
.submitButton {
background-color: #24b54b;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.submitButton:hover {
background-color: #15ad3b;
}
.submitButton:active {
position: relative;
top: 1px;
}
.uploadButton {
background-color: #16529c;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #2958b0;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.uploadButton:hover {
background-color: #0c458a;
}
.uploadButton:active {
position: relative;
top: 1px;
}
.leftNavbar {
width: 10%;
float: left;
}
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 70px;
}
body {
padding: 0;
margin: 0;
height: 90vh;
}
.buttons {
position: absolute;
right: 0;
top: 0;
text-decoration: none;
padding: 5px 10px;
margin: 5px;
background: #000;
color: #ccc;
}
.buttons a {
display: block;
}
.button:hover {
color: #ccc;
}
.sidebar {
background: #1a1c1d;
color: #787d80;
width: 125px;
height: 100%;
text-align: left;
transform-origin: left;
transform-style: preserve-3d;
transition: all 0.5s;
overflow: hidden;
}
.sidebar:hideDown {
transform: rotateY(90deg) skewY(10deg);
}
.sidebar:hideUp {
transform: rotateY(90deg) skewY(-10deg);
}
.sidebarHeader {
padding: 20px 10px;
font-weight: 700;
text-align: center;
}
.sidebar ul {
padding: 0;
margin: 0;
list-style-type: none;
display:inline-block;
}
.sidebar li {
padding: 15px 10px;
}
.sidebar a {
text-decoration: none;
color: inherit;
transition: color 0.5s;
}
Can someone help me with this?
I'm developing a tumblr theme with bootstrap, and I'd like a nice big area for the user's profile picture right next to the header. The issue here is, that bootstrap has a very tight grid format and I can't see any room for what I want:
see that red thing? I want to move it where the blue arrow is pointing. I've tried expanding the container, setting the red circle to float left, and giving it margin-bottom:100%, but that shoved everything down off the page.
Here's my css and HTML for reference, the item in question is labeled with the class "talkbubble":
CSS
//Media Queries
#media (min-width: 1200px){
.container {
width: 800px;
}
}
#media (min-width: 992px){
.container {
width: 800px;
}
}
//Header Edits
.jumbotron{
margin-bottom: 0px;
h1{
color: red;
}
}
//upsidedown tab edits
.tab-content{
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:-33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:67px;
}
//square gallery
.square{
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
//iconbubble
.talkbubble {
width: 120px;
height: 120px;
background: red;
position: absolute;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
HTML below
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/app.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap/tab.js"></script>
<script src="js/jquery.fakecrop.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-pinterest-extension-installed="cr1.39.1">
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<script>
$(document).ready(function () {
// for a filled square thumbnail
$('.square img').fakecrop({fill: true, wrapperWidth: 200, wrapperHeight: 200});
});
</script>
<div class="row marketing">
<div class="col-sm-4">
<div class="square"><img src="resources/testimg.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg2.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg3.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg4.png" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg5.jpg" alt="..."></div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./Narrow Jumbotron Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
<div id="scrollrail-vertical" class="disabled" style="width: 12px; border-left-width: 1px;"><div id="scrollbar-vertical" style="visibility: hidden; border-radius: 5px 7px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; height: 1015px; top: 2px; opacity: 0;"></div></div><div id="scrollrail-horizontal" class="disabled" style="height: 12px; border-top-width: 1px;"><div id="scrollbar-horizontal" style="visibility: hidden; border-radius: 14px 10px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; width: 1916px; left: 2px; opacity: 0;"></div></div><div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body>
</html>
See this fiddle
The trick is this:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...your image markup here...
</div>
<div class="col-md-9">
...
</div>
</div>
I've set it to be like that from md up. You might want to make use of hidden-* for the image column at lower widths as what you're doing from a design point of view would look strange at mobile widths.
The absolute position is a right way for your issue. But you have to use another properties instead of float:
top
bottom
left
right
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the margin edge of the element and the edge of its containing block.
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
You can apply this properties directly to the bubble instead of the before: pseudo-element.
Use /* */ instead of // for comments in CSS. For example:
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
}
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Media Queries */
#media (min-width: 1200px) {
.container {
width: 800px;
}
}
#media (min-width: 992px) {
.container {
width: 800px;
}
}
/* Header Edits */
.jumbotron {
margin-bottom: 0px;
h1 {
color: red;
}
}
/* upsidedown tab edits */
.tab-content {
padding: 10px;
border: 1px solid #ddd;
border-bottom: 0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: -33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: 67px;
}
/* square gallery */
.square {
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
width: 120px;
height: 120px;
background: red;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<div class="row marketing">
<div class="col-sm-4">
<div class="square"><img src="resources/testimg.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg2.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg3.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg4.png" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg5.jpg" alt="..."></div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->