I am wondering how to make a dot for example here https://gyazo.com/b757f6e984c19f7f4fc433f8147a5103 float on top like that I don't understand how I would do this I have tried position absolute and putting it in the which is in the tbody and it has not worked. Here is my code:
<tr>
<th scope="row">
<i class="active"></i>
<p>magic</p>
</th>
<td>magic</td>
<td>magic</td>
<td>
<p>magic</p>
</td>
<td>
<p>magic</p>
</td>
<td>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="material-icons">more_vert</i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><i class="material-icons"></i>Start</li>
<li><i class="material-icons"></i>Stop</li>
<li><i class="material-icons"></i>Delete</li>
</ul>
</div>
</td>
</tr>
I think you want something like this:
<html>
<head>
<style>
.box {
width: 80%;
height:40px;
background: red;
z-index: 1;
position: absolute;
}
.dot {
width: 25px;
height: 25px;
border-radius: 50%;
background: green;
top: 20%;
right: 0%;
transform: translate(50%);
position: absolute;
}
</style>
</head>
<div class="box"><div class=dot></div></div>
basicly you need to have a dot that should float out of the div right?
In this case, you just need to set position: absolute; then set in what side the dot should be, for example if you want a dot just like in the picture you need to set the right: 0% but it will still be inside the div, so add transform: translate(-50%, 0%) and it will do the job if you have question just comment, hope i solved the problem!
Please See here, you might be looking for this.
Demo: https://plnkr.co/edit/qM6rnLCEtgG3TQkxQjOe?p=preview
<table>
<thead>
<tr>
<th>Name</th>
<th>Ip Address</th>
<th>Created</th>
<th>DataCenter</th>
<th>Tags</th>
<th>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">More_vert
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Start
</li>
<li>
Stop
</li>
<li>
Delete
</li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position:relative;padding-left:20px;">Name_xxx
<div class="circle"></div></td>
<td>123.168.1.40:8080</td>
<td>12-10-2010</td>
<td>ABC_XXX</td>
<td>
<input type="radio">
</td>
<td> </td>
</tr>
</tbody>
</table>
here get an example table code. Hope you helpful.
https://jsfiddle.net/rafalito1989/d6pxf26x/
Related
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 am trying to get a make a div which contains a set of tools responsive.I have a side menu below this which I have made responsive. Could someone let me know where would this be wrong.
#tools {
width: 160px;
position: fixed;
display: inline-block;
margin: 0 auto;
line-height: 1.4em;
}
#media only screen and (max-width: 600px) {
#tools {
width: 70%;
}
}
<div id="tools" style="width: 100%">
<table>
<tr>
<td>
<input type="text" id="searchInput" placeholder="Type To Filter" ng-model="search" class="searchMenu">
</td>
<td id=uploadedit>
<button id="upload" onclick="insertIntoDatabase()" class="pinColor"><i class="fa fa-upload fa-2"></i>
</button>
</td>
<td id=impledit>
<button id="implview" onclick="openImplView()" class="pinColor"><i class="fa fa-pencil fa-2"></i>
</button>
</td>
<td>
<button id="home" class="homeButton"><i class="fa fa-home fa-2"></i>
</button>
</td>
<td>
<button id="keep-menu-open" class="pinColor" ng-click="openAndFixMenu"><i class="pinColor"></i>
</button>
</td>
<td>
<button id="open-left" class="toggleButton" ng-click="toggleMenu()"> <i class="fa fa-bars fa-2"></i>
</button>
</td>
</tr>
</table>
</div>
You have a typo in your media query: it should be # instead of ##. Aside from that, you're declaring width: 100% inline which overwrites whatever you've written in a stylesheet, which is why you don't see the result of the query.
Probably best to take the style="100%" from the div, any inline style like this will over-ride whatever is in the stylesheet.
Also in the media query you have
##tools { width: 70%; }
change to
#tools { width: 70%; }
The dropdown on the right is in a table cell, this works as intended on desktop browser.
However on mobile, on click, the dropdown gets split into two lines:
HTML
<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
<div class="btn-group">
<i class="icon-eye-open icon-white"></i> Visualizza
<button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Modifica</li>
<li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
</ul>
</div>
</td>
</tr>
</table>
The problem most likely stems from the table cell width being laid out too short for both elements.
The simplest solution would be to set add a class to that cell and add min-width, though you would be moving away from pure bootstrap.
HTML:
<td> ... </td>
<td class="dropdownCell">
<div class="btn-group">
...
Css:
.dropdownCell { min-width:130px; }
Fiddle is here: http://jsfiddle.net/a4kx75t1/1/
I have the following code:
<table>
<tr>
<td> </td>
<td>
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</td>
</tr>
</table>
I would like the OK and Cancel buttons to be right aligned. How can I accomplish that? I setup a plunker to demonstrate the problem.
You can use float:
#btnOK, #btnCancel {
width: 90px;
float:right;
}
Check This
You can also change the order in HTML to get first the OK button:
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnCancel">Cancel</a>
<a id="btnOK">OK</a>
</td>
Check This
For this exact scenario, I would do something like this.
HTML
<tr>
<td></td>
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<div class="align-right">
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</div>
</td>
</tr>
CSS
<style>
.align-right{
float: right;
}
</style>
The reason I've wrapped the buttons into a div is when you want to give some pagging or margin from sides or top/down, you will do it easily just by styling the div, so your controls move together.
I've got a table where I've given each of the <td>s some styling to have a background color, etc. They also have different amounts of data in them. Specifically, I have two <td>s next to each other, and one has content in it that makes it taller than the other. In Chrome, the shorter <td> is the same height as the taller <td>, with styling and everything. In Firefox/IE, the shorter <td> just takes up as much room as needed. I've tried giving the <td> height: 100%, but that didn't really do anything. I also tried having a div inside the td with height: 100%, but that didn't do anything, either.
How can I get it to behave the same across all three browsers? I don't necessarily need it to be either way, although it would be nice to actually be able to control it. I mostly just need it to behave the same.
Here's the final html. It might be kind of hard to understand because there's a lot of knockout stuff in there.
<div class="container">
<div class="inner-container">
<table>
<tbody><tr><td style="text-align: right"><input type="button" id="manageSaveButtonTop" class="journal-button manage-save-button manage-save-button-top" value="Save"></td></tr>
<tr>
<td id="template" class="outer-div">
<h6>Templates</h6>
<ol class="journalTree sortable template manageJournal ui-sortable" >
<li class="group mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
<!--</div>-->
</td>
<td id="myJournal" class="outer-div droppable ui-droppable">
<!--<div id="myJournal" class="outer-div droppable ui-droppable">-->
<h6>My Journal</h6>
<ol class="journalTree sortable myJournal manageJournal ui-sortable">
<li class="group mine ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Blank Objective</span>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Deleting Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol >
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Test Deleting</span>
</li>
</ol>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
</li>
</ol>
<!--</div>-->
</td>
</tr>
<tr><td style="text-align: right"><input type="button" id="manageSaveButtonBottom" class="journal-button manage-save-button bottom" value="Save"></td></tr>
</tbody></table></div></div>
I can't set the height to a specific height, because the height of the right table changes dynamically (by adding more things to it). Here's the relevant CSS:
#myJournal
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 650px;
height: 100%;
border-radius: 25px;
-moz-border-radius: 25px;
}
#template
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 500px;
height: 100%;
margin-right: 100px;
border-radius: 25px;
-moz-border-radius: 25px;
}
Avoid setting any inline attributes and use CSS to style your tables instead. Try setting the cell width using CSS. You could do something like this (ideally you want your CSS in a separate file, but just to illustrate):
<style type="text/css">
table#myTable td {
height: 200px;
width: 200px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td>My data</td>
</tr>
</tbody>
</table>
If you want different sizes, create separate classes and apply them to your cells:
<style type="text/css">
td.small-cell {
width: 100px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td class="small-cell">My data</td>
</tr>
</tbody>
</table>
Finally, if you are starting a project, you might want to save yourself some time and use a CSS framework, like Twitter Bootstrap, that will sort out browser inconsistencies for you.