Using bootstrap and HTML I have created a simple calendar, which I'd like to add arrows in the head, next to the month name.
I can't align the arrows and the month:
Here is the code I have so far:
<table border="0" cellpadding="0" cellspacing="0" class="table table-bordered table-striped month">
<tr><th colspan="7" class="month-head month">
<div>
<div><span class="pull-left"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
</div>
<div style="margin:0 auto;"> April 2017 </div>
<div><span class="pull-right"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</div>
</div></th></tr>
<tr><th class="mon text-center">Mon</th><th class="tue text-center">Tue</th><th class="wed text-center">Wed</th><th class="thu text-center">Thu</th><th class="fri text-center">Fri</th><th class="sat text-center">Sat</th><th class="sun text-center">Sun</th></tr>
...
</table>
Can you help me aligning the right arrow ?
You can use display: flex; align-items: center; justify-content: space-between on the parent of those 3 elements.
.top-row {
display: flex;
align-items: center;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="top-row">
<div><span><i class="fa fa-arrow-left" aria-hidden="true"></i></span></div>
<div> April 2017 </div>
<div><span><i class="fa fa-arrow-right" aria-hidden="true"></i></span></div>
</div>
You can achieve this by using built in tools provided by Bootstrap.
Inside the <th> element, you can add the class container-fluid to the <div> tag. Then, you can apply Bootstrap's fluid grid classes such as col-xs-3 etc. To align the sections of the calendar heading properly.
See this Bootsnipp example I made: http://bootsnipp.com/user/snippets/o1KRG
Related
I have the following snippet of code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-stack-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
</body>
</html>
This is from a larger project (simplified the code), and I need to have the style="width:auto" on the parent span class.
Without removing the style="width:auto", I am trying to achieve three things:
center the "1" in the box
make the 1 on the same line as "This is a sentence"
make the "This is a sentence appear next to the box instead of overlapping inside it.
This would look similar to the image here, except that the 1 isn't on the same line as "This is a sentence" - would anyone know how to achieve this?
Replace class fa-stack-2x with fa-2x in span.fa
fa-stack-2x class has position:absolute so that text is overlay it
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
Or You can do this without using font-awesome
.square {
display: inline-block;
border: 2px solid #000;
border-radius: 5px;
text-align: center;
width: 20px;
height: 20px;
font-weight: bold;
line-height: 20px;
}
<ul>
<li>
<span class="square">1</span>
This is a sentence.
</li>
</ul>
I am building a website that has the usual social media links in a footer on my page:
They are hosted in an HTML element coded as:
<div class="social">
<table>
<tr>
<td>Tweet </td>
<td>
<div
class="fb-like"
data-href="#Context.Request.Scheme://#Context.Request.Host.ToString()#Context.Request.PathBase#Context.Request.Path"
data-layout="button"
data-action="like"
data-show-faces="true">
</div>
</td>
<td>
<script type="IN/Share" data-counter="right">
</script>
</td>
<td><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" border="0" /></td>
</tr>
</table>
</div>
How can I force the alignment or padding of the buttons to be consistent?
Alternatively, if I want to use my own icons and hide these is there a standard approach to doing that?
Thanks
Mark
The way this is constructed is wrong! Please use table for data and not for styling. Change it to a div and you'll find that making it mobile responsive is easy.
Try to nest the divs so you can just move your main div and all the sub-divs within it moves along.
Try something like this:
.social { display: inline-block; }
<div id="social-icons">
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
</div>
And to make changes when viewing from a smaller screen - eg; mobile, then use media queries to align the content when a certain device size is reached.
Media Query CSS:
#media screen and (max-width: 480px) {
.social {
display: block;
width: 100%;
}
}
Of course, change the css styling to whichever you prefer.
I would use flex instead of a table layout. Set the parent element to display: flex; and align-items: top;. That forces the direct children of .social to align at the top.
.social {
display: flex;
align-items: top;
}
.social a {
padding: 5px 10px;
margin: 5px;
background-color: yellow;
}
<div class="social">
Facebook
Instagram
Pinterest
Twitter
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social">
<table>
<tr>
<td>
<button type="button" class="btn btn-info">
<i class="fa fa-twitter" aria-hidden="true"></i>
Tweet </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Like </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Share </button>
</td>
<td>
<button type="button" class="btn btn-danger">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Save </button>
</td>
</tr>
</table>
</div>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have this sample:
link
CODE HTML:
<table class="table prospects-table">
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Email</th>
<th width="200">Phone</th>
<th width="200">Message</th>
<th width="200">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td width="200">test sdada</td>
<td width="200">asdsada#yahoo.com</td>
<td width="200">(321) 312-3123</td>
<td width="200"> sadasda</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
<tr>
<td width="200">Diaconescu Cristian</td>
<td width="200">asdsadsa#busteco.rh</td>
<td width="200">(312) 312-3123</td>
<td width="200">asdasadsdasasasasdkhsdjkashsdkjahdhjsgdhjgvhhs,ajfkghjkdjhdsgjhasdghjgsadhjgshjkhvjgjkgfkjhdkjjhgfhjkdhkjsgdfv</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
</tbody>
</table>
I want each column of my table to have a width of 200px.
I added this code to each td but does not work ...
<td width="200">test sdada</td>
Probably something simple but I realize why this code does not work.
Can you tell me please what is the problem and how to solve it?
Thanks in advance!
Why don't you just add a style tag to your code?
In the head just insert this:
<style>
td,th {width:200px}
</style>
Add table-layout: fixed; to your table
table{
table-layout: fixed;
}
Updated codepen
use this
<td style="width: 200px;">test sdada</td>
learn proper css take a loot at element level css here
you can add css :
style="width:200px";
DEMO HERE
try this one
<td width="70%">JXXXXXX</td>
hope this one help you
Width attribute is deprecated one. So it is better to use css width property instead.
Usage Note: Do not use this attribute, as it has been deprecated and
the rules should be defined and styled using CSS. Use the CSS property
width instead. - MDN
td, th {
width: 200px;
}
width of td doesn't work at HTML5,
use CSS styles instead , for example in simplest way
<style type="text/css">
.tdw{
width:200px;
}
</style>
<td class="tdw">Diaconescu Cristian</td>
I'm trying to add html tool-tips to an existing page that's made of a table on one side of the page and something else on the other. I want to add the tool-tip to each td in the table.
With the tool-tip added to each td every time I hover over a td the whole table shifts over one cell!
Also, tried only on chrome.
before the hover
And when I hover over the first td
Below is a cut down, but fully working example of the oddness, any thoughts appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="table-responsive" id="23">
<TABLE class="table table-bordered table-nonfluid">
<tr id="hdr" class="bg-primary h5">
<th class="text-center">Mon 18 May</th>
<th class="text-center">Thu 21 May</th>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>300</sup>/<sub>312</sub>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
</TABLE>
</div>
</div>
<div class="col-md-6 " style="padding-top: 16px;">
<blockquote id="comment_txt">before, after and then on</blockquote>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
</body>
</html>
I suggest to wrap the content of your td inside a span like this
<td><span data-trigger="hover" style="display:block"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"><sup>300</sup>/<sub>312</sub></span></td>
Is never a good idea using the tooltips directly on a table element.
Well this is a weird issue actually. Never realised it until now. This might not be the perfect fix but a temporary fix will be to place a span around the text in the td for the one on the left and for the td on the right leave it as it is right now because it works fine only the left one causes this issue.
Bootply Link right here
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="table-responsive" id="23">
<TABLE class="table table-bordered table-nonfluid">
<tr id="hdr" class="bg-primary h5">
<th class="text-center">Mon 18 May</th>
<th class="text-center">Thu 21 May</th>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger" >
<span data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="WHAT!"
data-toggle="tooltip">
<sup>300</sup>/<sub>312</sub>
</span>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger" >
<span data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="WHAT!"
data-toggle="tooltip">
<sup>300</sup>/<sub>312</sub>
</span>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
</TABLE>
</div>
</div>
<div class="col-md-6 " style="padding-top: 16px;">
<blockquote id="comment_txt">before, after and then on</blockquote>
</div>
</div>
</div>
The problem with my fix is simple. The tooltip will only show on the left td if you hover on the text in the cell not on the table-cell itself whilst the tooltip will show if you hover on the table cell on the right. bad for user experience I know but this is as i said a temporary fix.
Im having table and I have on top of it in the right side button
and in the left side some text.(they parallel)
Currently its very close to the table which is below and I want to move
the text and the button little bit up ,how should I do that ?
<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">
<i class="glyphicon glyphicon-plus"></i> New
</div>
//Here start the table
#* List of users *#
<table class="table table-striped ">
If I use the <br /> it move it lot up ,there is a way to do it by pixels?
Just make a div surrounding the text and the button and apply some margin-bottom to that.
<div style="margin-bottom: 20px">
<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">
<i class="glyphicon glyphicon-plus"></i> New
</div>
</div>
//Here start the table
#* List of users *#
<table class="table table-striped ">
Since you're useing Bootstrap you can do a simple grid to accomplish that.
<div class="row">
<div class="col-md-6>
<h4>Users Table</h4>
</div>
<div class="col-md-6>
<i class="glyphicon glyphicon-plus"></i> New
</div>
</div>
<!-- table -->
I don't know what .text-right does, but probably can be applyed to the button.
Yes using CSS you can add padding like this :
style="padding-top:0.5px;"
Or
style="padding-bottom:0.5px;"
do this in your css:
table.table { clear:both; margin-top:10px;}