I am trying to create an application using bootstrap and angularjs as practice and a simplified version of my application is illustrated in this pen: http://codepen.io/megadeen/pen/ZWrGmv
This is the main code:
<table class="main" ng-app="app" ng-controller="main">
<tr>
<td class="sidebar">
<!-- Set page using AngularJS -->
<a ng-click="page = 'fpage'">First Page</a>
<br>
<a ng-click="page = 'spage'">Second Page</a>
</td>
<td class="content">
<!-- First Page -->
<div class="fpage" ng-show="page == 'fpage'">
<div class="col-md-5">
.... Content ....
</div>
</div>
</div>
<!-- Second Page -->
<div class="spage" ng-show="page == 'spage'">
<div class="row">
<div class="col-md-7">
.... Content ....
</div>
</div>
</td>
</tr>
</table>
However, there's always this stray horizontal scrollbar that won't go away. This stray scrollbar only appears in the second and subsequent pages.
I tried adding the row class to the fpage and spage divs. However, if I do so, then the scrollbar appears in all pages.
Why does this happen and how do I correct this problem?
You should use col-md-12 instead of row.
Related
I'm trying to make an FAQ page using an accordion. In some of the answers I tried to make a clickable link, that will direct you to another question (I don't want the page to refresh).
With what I have now, the opened question (containing the link) will close the accordion after clicking, and open the desired accordion. The only thing missing is that the page will not scroll to the new question.
What I've got:
function openQuestion(q) {
jQuery('.accordion-toggle').removeClass('active');
jQuery('.accordion-container').fadeOut(500);
var accordions = jQuery('.accordion-toggle');
var accordion = accordions[q - 1];
jQuery(accordion).addClass('active');
jQuery(accordion).next('.accordion-container').slideToggle(500);
}
I assume the next jquery line would contain something with scrollIntoView. But no succes yet.
This is what I use in HTML
text
<div class="entry">
<h3>FAQ</h3>
<p>...</p>
<div class="clear"></div>
<div class="accordion wrapper">
<h3 class="accordion toggle active">
...
</h3>
<div class="accordion-container" style="display: block;">
<div class="content-block">
<span style="font-weight: 400;">...</span>
</div>
</div>
<!-- end accordion container -->
<h3 class="accordion toggle">...</h3>
<div class="accordion-container" style="display: none;">...</div>
<!-- end accordion container -->
</div>
</div>
I have set up a simple table on my website - I used HTML code for the table - but I cannot figure out why the padding isn't working - I am using CSS and JS for the modal (I am a beginner). I even set the padding to 1000 and it doesn't do anything - the images stay right next to eachother. Here is my code:
<table width="500" border="0" cellpadding="5">
<tr>
<td align="center" valign="center">
<img id="myImg" src="table/first time home buyer.jpg" alt="First Time Home Buyer Ontario" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>First Time Home Buyer Program<b>
</td>
<td align="center" valign="center">
<img id="myImg" src="table/renewing your mortgage.jpg" alt="Renewing Your Mortgage" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>Renewing Your Mortgage<b>
</td>
<td align="center" valign="center">
<img id="myImg" src="table/guide to getting a mortgage.jpg" alt="Guide to Getting a Mortgage in London Ontario" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>Guide to Getting a Mortgage<b>
</td>
</tr>
</table>
If anyone could offer any suggestions it would be much appreciated.
Thank you
For table you can't give padding., for 'div' and other element such as "P, span" you can give padding. For table use cellpadding. (If you want to see just put border value as 1 then you can see padding with border.)
I would suggest you to set margin for the table rather than padding and i hope that it might work...
Yes use margin rather than padding and visit this site to know more about them:
http://www.htmldog.com/references/css/properties/padding/
I have a grid menu with specific css styling, and I want to convert that grid to a table so i can use jquery datatable, but i didn't know how
here is an item of my grid :
<div class="row menu-filter-items">
<div class="col-md-4 margin-b-30 menu-item">
<a href="#" class="menu-grid">
<img src="images/restolist.png" alt="" class="img-fluid"/>
<div class="menu-grid-desc">
<!-- <span class="price float-right">$9.50</span> -->
<h4 class="a" id="title">BB</h4>
<p>
Description
</p>
</div>
</a>
</div>
what would it be as an element of a <td> in a table ?
DataTables can integrate seamlessly with Bootstrap 3 using Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap.
This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialized as normal.
Source: datatables.net
Example of Provided Code has Bootstrap Table
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Table Use Sample -->
<div class="container">
<table class="table">
<tr>
<td>
<a href="#">
<img src="http://via.placeholder.com/140x100" alt="" class="img-fluid"/>
</a>
</td>
</tr>
<tr>
<td>
<h4>BB</h4>
</td>
</tr>
<tr>
<td>
<p>
Description
</p>
</td>
</tr>
</table>
</div>
<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>
Wasn't sure how exactly you wanted the table formatted from the code you provided, but you get the idea.
Hope that helps.
I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}
You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});
I have the following markup(using AngularJS):
<div class="col-sm-12" id="stack-table-container" style="padding:0px">
<table class="col-sm-12 table-bordered">
<tbody>
<tr ng-repeat="grid in grids">
<td class="bold" style="text-align:center;width:10% !important"> {{grid.Left}}
<div>
({{grid.Count}})
</div>
</td>
<td style="width:90%">
<div stack-bar dataid="grid.Left.substring(0, 2)+ '_' + $index" data="grid.Inner" type="barType" companydata="grid.Count_dict">
<div id="{{grid.Left.substring(0, 2)}}_{{$index}}">
<svg style='height:200px'> </svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I am planning to set the SVG's width dynamically according to the data passed to the angular directive 'stack-bar'.
As you can see each row in the table has a variable width multibar chart plotted using the angular directive.
The problem I am facing is that some rows may exceed the width of the table due to the SVG's(which is wrapped in the second 'td' of the row) width. Consequentially, I want such rows to have a individual horizontal scrollbars.
I tried setting a fixed width to each row and applied overflow-x: scroll to the second 'td' which contains the bar chart. But this doesn't work. Any suggestions on what I can do? Should I not use a table?
Well, turns out not using a table was a good idea. Here's the new markup:
<div class="col-sm-12" id="stack-table-container" style="padding:0px">
<div ng-repeat="grid in grids" class="row">
<div class="col-sm-2" style="padding-top:70px;text-align:center">
<div>
<span>{{grid.Left}}</span>
</div>
<div>
<span>({{grid.Count}})</span>
</div>
</div>
<div class="col-sm-10" stack-bar dataid="grid.Left.substring(0, 2)+ '_' + $index" data="grid.Inner" type="barType" companydata="grid.Count_dict">
<div id="{{grid.Left.substring(0, 2)}}_{{$index}}" style="overflow-x:scroll"> //scroll here
<svg style='height:200px'> </svg>
</div>
</div>
</div>
</div>
However, I would still like to see a solution with the table!