Position Bootstrap button correctly - html

I'm trying to position a Bootstrap styled dropdown button for use with a table. I can get it so the container rows butt up, but then there is a visual gap between the button and the edge of the table. I'm trying to shrink that gap (to maybe 3 px?).
I've messed with absolute and relative positioning, but for some reason my brain just isn't getting it.
I quick put together this fiddle to help shown what I mean: https://jsfiddle.net/rbennett/emup7wpe/1/
<div class="container">
<div class="col-sm-12">
Trying to figure out how to correctly position a button for a table...
<br />
<br />
<div class="button-row">
<button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Items<span class="caret"></span>
</button>
<ul id="itemSelectorDropdown" class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<br />
<div class="other-row">
<table id="testTable" class="table table-bordered" cellspacing="0">
I have elements from a DatatTable table that sit right here<br />so I'm looking to position the "Items" button on the same line,<br />but aligned to the right.
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>qrs</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Can someone nudge me in the right direction on how to position the button so that it is right above the table (and not have a gap)?

I modified your html just a tiny bit. I moved the button just above the table.
I also added 1 rule to move the button.
.other-row {
outline: 1px solid blue;
}
#itemsButton{
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-12">
Trying to figure out how to correclty position a button...
<br />
<br />
<div class="button-row">
<ul id="itemSelectorDropdown" class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<br />
<div class="other-row">
<button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Items<span class="caret"></span></button>
<table id="testTable" class="table table-bordered" cellspacing="0">
We want to see the "Items" button here (aligned to the right)
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>qrs</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

just change border-radius:0 in your button
#itemsButton
{border-radius:0;float:right;}
.other-row {
outline: 1px solid blue;
}
#itemsButton
{border-radius:0; float:right}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-sm-12">
Trying to figure out how to correclty position a button...
<br />
<br />
<div class="other-row">
<div class="button-row">
<button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Items<span class="caret"></span>
</button>
<ul id="itemSelectorDropdown" class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<table id="testTable" class="table table-bordered" cellspacing="0">
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>qrs</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Related

HTML Bootstrap Grid

<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li>Profile</li>
<li>Published</li>
<li>Bookmarked</li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue" >
</div>
</div>
</body>
view
I cleaned it up as much as possible. I also added colors to each div so it's clear to see.
I divided up my page into 4. 2 of them called sidenavs to create spaces on both sides to center view my main content, 1 is for the user image, name and nav buttons and the other one is for other content like personal info and will probably add more. So i divided them respectively: 1 - 2 -8 - 1
My problem is that, i don't understand the current alignment of my columns, As you can see from the image, side nav blue which should be at the right edge is now at the bottom. I made sure that all my columns sizes add up to 12 which is the maximum so i don't know why the other div is pushed down to the next row.
P.S. all those weird html names like sidenav even though it's not a navigation bar which is on the side. And the row content with an already div container. I copy pasted whole html page code from free bootstrap template(you can actually see the resemblance if you downloaded some of them - i'm not good at deciding how to design my pages so i just decided to pick from a template and tweak it however i want)
Is this how it's meant to look?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li>Profile</li>
<li>Published</li>
<li>Bookmarked</li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
</div>
</div>
If so, you had
<div class="col-sm-1 sidenav" style="background-color:blue"></div>
Outside of
<div class="row content"></div>
See here: JSFiddle

How can I stretch the height using GetSkeleton framework

I am using the GetSkeleton CSS framework to build my website and I've broken it down in currently 3 sections. I have my header which contains my navigation and a logo. Then underneath I have my main content which is split into 2, as Skeleton uses columns I have a sidebar which is two columns and my main section is ten columns. How can I stretch my sidebar and main section to 100% height? I don't want any footers or anything, just 100% height from those sections?
Example of Website
Above is a screen shot of my website so far, so you can see I want that red and blue to stretch right to the bottom of the website.
This is the framework I'm using: http://getskeleton.com
And here is my HTML code;
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container u-full-width">
<div style="padding: 10px;">
<div class="row">
<!-- Navigation Bar -->
<div class="twelve columns">
<?php include 'includes/navbar.php'; ?>
</div>
</div>
<div class="row" style="padding-top: 5%;">
<!-- Side Bar -->
<div class="two columns link-coloured" style="background-color: blue;">
<h2>Customers</h2>
<hr>
<br /><br />
<h5>Live Leads (3)</h5>
<h5>Action Required <span style="color: red;">(5)</span></h5>
<h5>Notifications <span style="color: orange;">(2)</span></h5>
<h5>New Leads <span style="color: green;">(11)</span></h5>
</div>
<!-- Main Content Section -->
<div class="ten columns" style="background-color: red;">
<h1>Live Leads</h1>
<hr>
<button class="button-primary">Add New Lead</button>
<br /><br />
<table>
<tr>
<th>Customer Name</th>
<th>Date Added</th>
<th>Status</th>
</tr>
<tr>
<td>Name 2</td>
<td>08/09/2019</td>
<td><span style="color: green">Vehicle Sold</span></td>
</tr>
<tr>
<td>Name 3</td>
<td>09/07/2019</td>
<td><span style="color: blue">Prospect</span></td>
</tr>
<tr>
<td>name 4</td>
<td>10/07/2019</td>
<td><span style="color: red">Archived</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
I think This will be working fine
<!DOCTYPE html>
<html>
<head>
<title>tt</title>
<link rel="stylesheet" type="text/css" href="skeleton.css">
</head>
<body>
<div style="padding: 10px;">
<div class="row">
<!-- Navigation Bar -->
<div class="twelve columns">
<?php include 'includes/navbar.php'; ?>
</div>
</div>
<div class="row" style="padding-top: 5%; ">
<!-- Side Bar -->
<div class="two columns link-coloured" style="background-color: blue; height: calc(100vh - 140px)">
<h2>Customers</h2>
<hr>
<br /><br />
<h5>Live Leads (3)</h5>
<h5>Action Required <span style="color: red;">(5)</span></h5>
<h5>Notifications <span style="color: orange;">(2)</span></h5>
<h5>New Leads <span style="color: green;">(11)</span></h5>
</div>
<!-- Main Content Section -->
<div class="ten columns" style="background-color: red;height: calc(100vh - 140px)">
<h1>Live Leads</h1>
<hr>
<button class="button-primary">Add New Lead</button>
<br /><br />
<table>
<tr>
<th>Customer Name</th>
<th>Date Added</th>
<th>Status</th>
</tr>
<tr>
<td>Name 2</td>
<td>08/09/2019</td>
<td><span style="color: green">Vehicle Sold</span></td>
</tr>
<tr>
<td>Name 3</td>
<td>09/07/2019</td>
<td><span style="color: blue">Prospect</span></td>
</tr>
<tr>
<td>name 4</td>
<td>10/07/2019</td>
<td><span style="color: red">Archived</span></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

How to make scrollable html table columns responsive using bootstrap

I'm not a web designer. I was trying to design a web layout with some scrollable columns which contains some data in the form of anchor tags which are loaded dynamically. I've designed a html table structure along with a style sheet to achieve this. Source code of this table is as shown below
<table>
<tr>
<!--COLUMN HEADERS -->
<td id="titles" style="width: 50%">
<b style="padding-left: 4%">CURRENCY</b>
<b style="padding-left: 9%">COUNTRY</b>
<b style="padding-left: 8%">SECTOR</b>
<b style="padding-left: 4%">LOCATION COUNT</b>
</td>
</tr>
<tr>
<td style="width: 50%">
<!--1st COLUMN TO HOLD COUNTRY NAMES -->
<div id="column">
<div ng-repeat="currency in allCurrencies">
<a href=""
ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
<span ng-bind="currency"></span> <br>
</a>
<input type="hidden" name="currencyHolder" ng-model="selCurrency">
</div>
</div>
<!--2nd COLUMN TO HOLD CURRENCY NAMES -->
<div id="column">
<div ng-repeat="country in allCountries">
<a href=""
ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
<span ng-bind="country"></span> <br>
</a>
<input type="hidden" name="countryHolder" ng-model="selCountry">
</div>
</div>
<!--3rd COLUMN TO HOLD SECTOR NAMES -->
<div id="column">
<div ng-repeat="sector in allSectors">
<a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
ng-bind="sector"></span> <br>
</a>
<input type="hidden" name="variantHolder" ng-model="selVariant">
</div>
</div>
<!--4th COLUMN TO HOLD LOCATION COUNT RANGE -->
<div id="column">
<div ng-repeat="locCount in locationRangeValues">
<a href="" ng-click="filterProductByRange(locCount)">
<span ng-bind="locCount"></span> <br>
</a>
</div>
</div>
</td>
</tr>
</table>
And the CSS styling for class coulmn is as shown below
#column {
background-color: #f5f5f5;
float: left;
width: 14%;
height: 125px;
overflow: auto;
overflow-y: scroll;
white-space: nowrap;
text-align: center;
}
And CSS styling for class for titles is as given below
#titles{
background-color: #f5f5f5;
color: #069;
fill: #069;
}
This works fine, but the issue with this setup is it's not responsive. I've interagted bootstrap within my application. Is there any way to make this setup more responsive using bootstrap? Please help.
To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it, as demonstrated in the example below:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
<td>Lorem ipsum dolor sit amet…</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
<td>Vestibulum consectetur scelerisque…</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
<td>Integer pulvinar leo id risus…</td>
</tr>
</tbody>
</table>
</div>
see working ex here
View this example. add bootstrap headers and responsive class to the divs
<!DOCTYPE html>
<html>
<head>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
There are way to change the td to div by using jQuery and css but not easy and you need to write different css for every table in your application, for more detail see this
If you don't want to write css use RAHUL suggestion for scroll-able table for smaller screen by using bootstrap.

Inserting Dropdown list option in Table Cell

I am trying to design the table with 2 rows and 3 columns. In the first row would be Header row with headings of Columns. And in 2nd row 1st column would be Editable Text area and 2nd column and 3rd column would be Dropdown list. I am using HTML table to achieve this. But not able to getting the dropdown option.
This is my code for Table
<div id="MainContent_panelConfigFileContent">
<table class="table">
<tbody>
<tr>
<th>Start Position</th>
<th>Type of Scramble</th>
<th>Scrambling Required</th>
</tr>
</tbody>
</table>
</div>
<form id="form1" runat="server">
<div class="row modalpop-body">
<table>
<thead>
<tr>
<td class="col-md-4">Start Position</td>
<td class="col-md-4">Type of Scramble</td>
<td class="col-md-4">Scrambling Required</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4"><textarea class="form-control" rows="3" id="comment"></textarea></td>
<td class="col-md-4"><div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div></td>
<td class="col-md-4"><div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div></td>
</tr>
</tbody>
</table>
</div>
CSS .modalpop-body {background: brown;margin:30px;font-size:24px;padding: 20px;}
you can check it in check this link
Your question is confusing but are you referring to something like this?
<table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Your Editor</td>
<td>Your Dropdown</td>
<td>Your Dropdown</td>
</tr>
</tbody>
</table>
Hope this helps somehow.
Your code is incomplete. Try to give a better code to understand. Thank you

bootstrap table inside modal size issues

I have a bootstap modal with tabs in the modal body. In each tab i have a regular table, the rows are later appended into the table with jquery.
My issue is that the text in the columns never linebreak, so the right side of the table is shown outside of the modal body.
How can i fix this? This is my HTML modal.
<div class="modal modal-wide fade" id="detailsmodal" aria-hidden="true" style="display: none;">
<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" id="details">Detaljer</h4>
</div>
<div class="modal-body" id="detailsmodalBody">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">MetaData</li>
<li>Enhet</li>
<li>Appar</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="MetaDataTab">
<br />
<br />
<table id="detailvalues" class="table table-bordered">
<thead>
<tr bgcolor="#4d4f53">
<th>Metadata</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>AppleID#1: </td>
<td id="modalMetaDataCol1">No data</td>
</tr>
<tr>
<td>AppleID Password#1: </td>
<td id="modalMetaDataCol2">No data</td>
</tr>
<tr>
<td>AppleID#2: </td>
<td id="modalMetaDataCol3">No data</td>
</tr>
<tr>
<td>AppleID Password#2: </td>
<td id="modalMetaDataCol4">No data</td>
</tr>
<tr>
<td>SIMpin: </td>
<td id="modalMetaDataCol5">No data</td>
</tr>
<tr>
<td>Losekod: </td>
<td id="modalMetaDataCol6">No data</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="EnhetTab">
<br />
<br />
<table class="table table-bordered" id="devicedetailsTable">
<thead>
<tr bgcolor="#4d4f53">
<th>Detalj</th>
<th>Värde</th>
</tr>
</thead>
<tbody id="devicedetails">
</tbody>
</table>
</div>
<div class="tab-pane" id="ApparTab">
<br />
<br />
<table class="table table-bordered">
<thead>
<tr bgcolor="#4d4f53">
<th>Apps</th>
</tr>
</thead>
<tbody id="appvalues">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
try using word-wrap:break-word in your css to break the line in the coloumn and width:auto for your table to restrict its size in the modal.