Hi this is my first time using semantic-ui framework & I have some problem with footer. I want to make footer to always stick in the bottom of page (not fixed).
this is the simple html of mine
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="ui borderless menu">
</nav>
<div class="desc">
</div>
<div class="ui container">
</div>
<div class="ui container">
</div>
<footer class="footer">
</footer>
</body>
</html>
I was trying use this css:
body {
position: relative;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
but it doesn't work, it just work when the height of page is less than 100% of the monitor height, when it's height have more than 100% of monitor height the footer will float like this:
I also already change the css body with this:
body {
position: relative;
min-height: 100%;
}
but still doesn't work, anyone can help?
This is the full code, I made a long list table so you would know when you click the filter it will push the table down and the footer will mess.
body {
height: 100%;
color: #696F84;
position: relative;
}
.menu {
border-radius: 0 !important;
}
.item {
color: #696F84 !important;
}
.logo {
margin-right: 7px !important;
}
.company {
font-family: 'Righteous', cursive;
font-weight: normal;
font-size: 27px;
color: #515151;
padding-bottom: 2px;
}
.desc {
position: relative;
background-color: #EEEEEE;
margin-top: -1rem;
padding: 30px 0;
font-family: Raleway;
font-size: 24px;
color: #757575;
}
#filter {
width: 100%;
margin: 20px 0;
}
.footer {
background-color: #212121;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 15px 0;
}
<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>
<nav class="ui borderless menu">
<div class="header item">
<img class="logo" src="./img/logo.jpg" alt="logo">
<div class="company">Company Name</div>
</div>
<!-- end left menu -->
</nav>
<!-- end navbar -->
<div>
<div class="ui container">
<p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
</div>
</div>
<!-- end description -->
<div class="ui container">
<div class="ui styled accordion" id="filter">
<div class="title">
<i class="dropdown icon"></i>
Filter
</div>
<div class="content">
<div class="ui grid">
<div class="four wide column" id="radio">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="small">
<label>Small</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="medium">
<label>Medium</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="large">
<label>Large</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="x-large">
<label>X-Large</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end radio -->
<div class="four wide column" id="checkbox">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="small">
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="medium">
<label>Orange</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="large">
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="x-large">
<label>Blue</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end checkbox -->
<div class="eight wide column" id="input">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui labeled input">
<div class="ui label">
Name
</div>
<input type="text" placeholder="your name">
</div>
</div>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end input -->
</div>
<!-- end grid -->
</div>
<!-- end content -->
</div>
<!-- end accordion -->
<table class="ui blue celled striped compact table">
<thead>
<tr>
<th class="collapsing">No</th>
<th>Food</th>
<th>Code</th>
<th>Calories</th>
<th>Protein</th>
<th class="center aligned collapsing">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">1</td>
<td>Apples</td>
<td>Ap</td>
<td>200</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">2</td>
<td>Orange</td>
<td>Or</td>
<td>310</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">3</td>
<td>Mango</td>
<td>Mg</td>
<td>360</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
</tbody>
</table>
<!-- end table -->
</div>
<!-- end container -->
<footer class="footer">
Micro Tech 2015. All Rights Reserved
</footer>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.accordion').accordion();
})
</script>
add a warp div like below
<div class="main">
.......
</div>
<div class="footer">
......
</div>
and set css
.main{min-height:100%;
padding-bottom:60px;
box-sizing:border-box;}
.footer {
background-color: #212121;
position: absolute;
/* bottom: 0; remove this */
margin-top: -50px; /* add this */
left: 0;
width: 100%;
padding: 15px 0;
}
body {
height: 100%;
color: #696F84;
position: relative;
}
.menu {
border-radius: 0 !important;
}
.item {
color: #696F84 !important;
}
.logo {
margin-right: 7px !important;
}
.company {
font-family: 'Righteous', cursive;
font-weight: normal;
font-size: 27px;
color: #515151;
padding-bottom: 2px;
}
.desc {
position: relative;
background-color: #EEEEEE;
margin-top: -1rem;
padding: 30px 0;
font-family: Raleway;
font-size: 24px;
color: #757575;
}
#filter {
width: 100%;
margin: 20px 0;
}
.main{min-height:100%; padding-bottom:60px; box-sizing:border-box;}
.footer {
background-color: #212121;
position: absolute;
/* bottom: 0; remove this */
margin-top: -50px; /* add this */
left: 0;
width: 100%;
padding: 15px 0;
}
<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>
<div class="main">
<nav class="ui borderless menu">
<div class="header item">
<img class="logo" src="./img/logo.jpg" alt="logo">
<div class="company">Company Name</div>
</div>
<!-- end left menu -->
</nav>
<!-- end navbar -->
<div>
<div class="ui container">
<p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
</div>
</div>
<!-- end description -->
<div class="ui container">
<div class="ui styled accordion" id="filter">
<div class="title">
<i class="dropdown icon"></i>
Filter
</div>
<div class="content">
<div class="ui grid">
<div class="four wide column" id="radio">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="small">
<label>Small</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="medium">
<label>Medium</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="large">
<label>Large</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="x-large">
<label>X-Large</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end radio -->
<div class="four wide column" id="checkbox">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="small">
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="medium">
<label>Orange</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="large">
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="x-large">
<label>Blue</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end checkbox -->
<div class="eight wide column" id="input">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui labeled input">
<div class="ui label">
Name
</div>
<input type="text" placeholder="your name">
</div>
</div>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end input -->
</div>
<!-- end grid -->
</div>
<!-- end content -->
</div>
<!-- end accordion -->
<table class="ui blue celled striped compact table">
<thead>
<tr>
<th class="collapsing">No</th>
<th>Food</th>
<th>Code</th>
<th>Calories</th>
<th>Protein</th>
<th class="center aligned collapsing">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">1</td>
<td>Apples</td>
<td>Ap</td>
<td>200</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">2</td>
<td>Orange</td>
<td>Or</td>
<td>310</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">3</td>
<td>Mango</td>
<td>Mg</td>
<td>360</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
</tbody>
</table>
<!-- end table -->
</div>
<!-- end container -->
</div>
<footer class="footer">
Micro Tech 2015. All Rights Reserved
</footer>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.accordion').accordion();
})
</script>
Just set
.footer{
position:fixed;
bottom:0;
}
fixed position in this case is the best way to position your footer always on the bottom.
OP stated he does not want a fixed footer
This is what is causing your issue:
body, html {
height: 100%;
}
height should not be set for your footer to be at the bottom (it comes from semantic.min.css).
To cancel this, add this at the beginning of your CSS stylesheet (!important is needed here to override the value set by the other stylesheet, but you should otherwise avoid using it at all costs):
body, html {
height: auto!important;
}
body {
font-size: 40px;
position: relative;
}
.footer {
background-color: black;
color: red;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<nav class="ui borderless menu">
</nav>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="ui container">
</div>
<div class="ui container">
</div>
<footer class="footer">
some footer at the bottom
</footer>
Related
I would like to position a div at the right edge bottom of a table. I am using bootstrap and I found out using offest I can move the div right at the bottom corner of the table but I did not like this solution as seems not to work correctly. So how can I position a div right at the bottom corner of a table that is inside a modal. the following block is the one that I am trying to position right bottom of the table:
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
Full code:
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
<div class="panel panel-primary panel-primary-trim">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body panel-body-trim">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
</thead>
<tbody>
<tr>
<td>DateExample</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would place the table into an inline-block div (wrapper) that has relative positioning, then use absolute positioning (bottom: 0, right: 0) for the element you want at the bottom right. The table and the positioned element are both children of the relative positioned wrapper.
table {
border-collapse: collapse;
}
td {
padding: 3rem;
background: #ccc;
border: none;
border: 1px solid white;
}
.wrapper {
display:flex;
flex-direction: row;
height: auto;
justify-content: flex-start;
align-items: flex-end;
flex-wrap: no-wrap;
}
.bottomRight {
position: relative;
background: #bbb;
padding: 1rem;
padding: 3rem;
width: auto;
height: auto;
display: block;
border: 1px solid white;
border-left: none;
}
<div class='wrapper'>
<table>
<thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<div class="bottomRight">10</div>
</div>
I have header and footer when i printing.
But on the first page, i just want that cover page to be clean. So i only can have a picture or title there.
Right now i have my header and footer also at this cover page. I don´t want that.
I have tried to use
#page:first {margin:0;}
I still have the header and footer.
Give me the easiest way to do this in CSS, and please explain why.
The Code
<html>
<head>
<style>
</style>
</head>
<body>
<div class="page-header ">
<table style="width:100%">
<tr>
<p>Hello</p>
</tr>
</table>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="masthead">
<p>Hello</p>
</div>
<div class="page">
<div>
<p class="test"> </p>
</div>
<div class=" col test-2">
<p>
Text
</p>
</div>
</div>
<div class="page">
<div>
<p class="test-3"> </p>
<h1 style="text-align:center">Text</h1>
</div>
<div style="margin-top: 100px;">
<p>Text.</p>
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;">
<h1 class="test">Text</h1>
</p>
</div>
<div>
<p class="test-5"> </p>
<h2 style="text-align:left">Text</h2>
</div>
<div>
<p class="test-5"> </p>
</div>
<div>
<div>
<p class="test-5"> </p>
</div>
<br />
<div>
<p class="test-5"> </p>
</div>
<br />
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;">
<h1 class="test">Text</h1>
</p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
You may add an element to display as first page, like this:
<div class="print-first-page">
your first page content here
</div>
Then hide it from screen and show on printed page:
.print-first-page {
display: none;
}
#media print {
.print-first-page {
display: block;
width: 100%;
height: 100%;
}
}
Here is the complete example with your code:
<head>
<style>
.print-first-page {
display: none;
}
#media print {
.print-first-page {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div class="print-first-page">
your first page content here
</div>
<div class="page-header ">
<table style="width:100%">
<tr>
<p>Hello</p>
</tr>
</table>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="masthead">
<p>Hello</p>
</div>
<div class="page">
<div>
<p class="test"> </p>
</div>
<div class=" col test-2">
<p>
Text
</p>
</div>
</div>
<div class="page">
<div>
<p class="test-3"> </p>
<h1 style="text-align:center">Text</h1>
</div>
<div style="margin-top: 100px;">
<p>Text.</p>
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;"><h1 class="test">Text</h1></p>
</div>
<div>
<p class="test-5"> </p>
<h2 style="text-align:left">Text</h2>
</div>
<div>
<p class="test-5"> </p>
</div>
<div>
<div>
<p class="test-5"> </p>
</div>
<br />
<div>
<p class="test-5"> </p>
</div>
<br />
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;"><h1 class="test">Text</h1></p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm creating a simple chat app with Bootstrap 4 and I'm having difficulty with a static footer. The messages are getting hidden behind the footer. How can I make it so that the messages do not get put underneath the input box/footer?
.content {
margin-bottom: 100px;
}
.message {
float: left;
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
clear: both;
}
.my-message {
float: right;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
}
.input-form {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<nav class="navbar navbar-dark bg-dark blue fixed-top">
<span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
</nav>
<div class="container" style="padding-top: 85px;">
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
</div>
</div>
<div class="footer">
<form class="input-form">
<div>
Please wait for a user to join ...
</div>
<div class="input-group mb-1 px-2">
<input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" id="sendmessage">Send</button>
</div>
</div>
</form>
</div>
The problem is your .messages are floating, so you need to clear them on the the .content container. I added an ::after element to clear, and padding instead of margin to the .content container.
.content {
padding-bottom: 100px;
}
.content::after {
content: '';
display: block;
clear: both;
}
.message {
float: left;
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
clear: both;
}
.my-message {
float: right;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
}
.input-form {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<nav class="navbar navbar-dark bg-dark blue fixed-top">
<span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
</nav>
<div class="container" style="padding-top: 85px;">
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
<div class="message">
<table>
<tr>
<td><b>Other User</b>
<td>
</tr>
<tr>
<td>Hello.
<td>
</tr>
</table>
</div>
<div class="message my-message">
<table>
<tr>
<td><b>User</b>
<td>
</tr>
<tr>
<td>Hello!
<td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
<form class="input-form">
<div>
Please wait for a user to join ...
</div>
<div class="input-group mb-1 px-2">
<input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" id="sendmessage">Send</button>
</div>
</div>
</form>
</div>
You can also try this with flex :
.content {
margin-bottom: 100px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-self: flex-start;
flex-direction: column;
}
.message {
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
}
.my-message {
align-self: flex-end;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
}
.input-form {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<nav class="navbar navbar-dark bg-dark blue fixed-top">
<span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
</nav>
<div class="container" style="padding-top: 85px;">
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
<div class="message">
<table>
<tr><td><b>Other User</b><td></tr>
<tr><td>Hello.<td></tr>
</table>
</div>
<div class="message my-message">
<table>
<tr><td><b>User</b><td></tr>
<tr><td>Hello!<td></tr>
</table>
</div>
</div>
</div>
<div class="footer">
<form class="input-form">
<div>
Please wait for a user to join ...
</div>
<div class="input-group mb-1 px-2">
<input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
<div class="input-group-append">
<button class="btn btn-success" type="submit" id="sendmessage">Send</button>
</div>
</div>
</form>
</div>
<div class="col-md-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid" ">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-12 table-responsive">
<div id="order-listing_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
<div class="row">
<div class="col-md-12">
<table id="order-listing" class="table dataTable no-footer table-striped" style="border-bottom:1pt solid black" role="grid" aria-describedby="order-listing_info">
<thead>
<tr role="row">
<th width="70%"><b>Name</b></th>
<th><b>Active</b></th>
<th><b>Select</b></th>
<th><b>Delete</b></th>
</tr>
</thead>
<tbody>
#*#foreach (var item in Model)
{*#
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search here" style="width: 450px; height: 40px">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="dripicons-search"></i>
</button>
</div>
</div>
</td>
<td>
<input type="checkbox" name="checkbox2">
</td>
</tr>
<tr>
<td>Test New</td>
<td><input class="form-check-input" type="checkbox" id="gridCheck"></td>
<td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-editbtn-id"><div><i class="icon-pencil"></i></div></button></td>
<td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-delete-id"><div><i class="dripicons-trash"></i></div></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried aligning this checkbox with the Active column but my code doesn't align it with the specified column
whats wrong with my code?
some online HTML generates output the correct code with same code but when i edit it, the aligned doesn't work properly
I have attached my code above can anyone help me im using html and css for this.
Please give the below CSS, the input element is taking CSS of margin-left.
.form-check-input{
margin:0 !important;
}
And also give this CSS
.table td, .table th{
vertical-align: middle;
}
I see two issues with my code. Header is not getting fixed and second issue is word wrap is not applicable for the headers/rows.
I have used bootstrap classes, but still facing issues. I want to fix the table header and only rows should be scrollable and if the text is long it should automatically word wrap. I have multiple columns in my application(approximately 15 columns).Please advice.
To view the sample code click here.
Sample html code:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2Header2Header2Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You could try a non table approach. If your ok with having set widths on the columns with content wrapping in the cells. Here's an example https://codepen.io/flurrd/pen/jmMNxK?editors=1100
Note: Class names are terrible in this example. I'd BEM it up for proper usage.
.table-body {
max-height: 200px;
overflow-y:auto;
}
.t-row {
display: flex;
border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
background: #e3e3e3;
}
.col {
word-wrap: break-word;
flex: 1 0 30%;
max-width: 33.3333%;
}
.cell {
padding: 8px;
}
<div class="table-wrap">
<div class="t-row t-header">
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
</div>
<div class="table-body">
<div class="t-row">
<div class="col">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="col">
<div class="cell">
1111
</div>
</div>
<div class="col">
<div class="cell">
11111111
</div>
</div>
</div>
</div>
</div>