Alignment Issue due to scroll bar - html

In the following code, the tool tip appears when we move our cursor to the link, tool tip is an image, the length of image can be very long. The problem is whenever length of image is long, scroll bar appears on the right side and then alignment gets disturbed. all the contents moves to left a little bit. How can I avoid that, Any help id highly appreciated. Thanks
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Summarization Search Engine</a>
</div>
</div>
</div>
<div class="container">
<table>
<tr>
<td><p>You Searched for <b><i>../html/Sample Results.html</b></i></p></td>
</tr>
</table>
<table class="table table-hover">
<tbody>
<tr>
<td><a class="brand" id="0" rel="popover" href="http://en.wikipedia.org/wiki/Information_technology_management">It Infrastructure</a><br><p>These resources may include tangible investments like computer hardware, software, data, networks and data centre facilities, as well as the staff who are hired to maintain them.</p></td>
</tr>
</tbody>
</table>
</div>
</body>

Related

Bootstrap 3, left sidebar menu, ghosting borders

Good day.
I have a bootstrap 3 sidebar and I am testing in IE 11.
I'm am getting a weird ghosting effect on the border of the sidebar. When the page is first rendered just the bottom edge of the sidebar is shown...as I mousehover over the collapsible items, the right edge of ghosting appears and then stays until the page is refreshed. The image looks like this.
Note that the choice of colors was done here just to highlight the ghosting edges that show up. :)
The CSS associated with the sidebar is shown below (note that the div section "panel sidebar" is repeated 3 times, once for each of the 3 main collapsible menus and is not shown here for brevity):
<div class="row-offcanvas row-offcanvas-left active">
<div class="sidebar-offcanvas" id="sidebar" style="overflow-y:hidden; background-color:fuchsia;">
<div class="col-md-12 left-menu">
<div class="panel affix" id="accordion">
<div class="panel sidebar">
<div class="panel-heading unselectable" unselectable="on">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<table class="sidebarTable">
<tr>
<td>
Orders <span class="label label-success">$ 320</span>
</td>
</tr>
<tr>
<td>
Invoices
</td>
</tr>
<tr>
<td>
Shipments
</td>
</tr>
<tr>
<td>
Tex
</td>
</tr>
</table>
</div>
</div>
Any help would be greatly appreciated as I've tried many combinations of setting borders: none, outline: none, etc.
You could try to target IE10+ with this specific CSS styles.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
My bad and missed this because I am so new to css and bootstrap...the bootstrap panel definition had box-shadow defined and when I set it to
box-shadow:none;
The world was returned to it's previous stability.
Btw, I determined this by picking up a hint from another post indicating to hit F12 in the browser to expose the actual styling that was being applied.
Cheers.

Bootstrap table won't fill container width

I'm writing a web site using bootstrap (3.3.2) with a simple table on one of the pages. I just have a simple header panel in one container, and another content container with a title and table. For some reason, text fills the width of the container, but the table left aligns and only spans the width required by the text within. Anyone have any ideas? I know I can add in a width="100%" to the table, but this should be default bootstrap behaviour...
Cheers
<html>
<head>
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="modules.html">Modules</a></li>
<li><a class="navbar-brand" href="sites.html">Sites</a></li>
<li><a class="navbar-brand" href="search.html">Search</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header">
<h2>Why won't the table align!?</h2>
</div>
<div class="table-responsive">
<table>
<thead>
<th>Head1</th><th>Head2</th><th>Head3</th>
</thead>
<tbody>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your table element with .table class in a wrapper <div> with the .table-responsive class, like this:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
NOTE: If you're using bootstrap v4 alpha, even though the documentation says that you can use:
<table class="table table-responsive">
...
</table>
I still had to use the accepted answer to make it fill the container's width:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
The accepted answer is incorrect. Per the docs
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Then goes on to show proper usage
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You should also have the .table class on the <table>
http://getbootstrap.com/css/#tables-responsive
This solution worked for me:
just add another class into your table element: w-100 d-block d-md-table
so it would be : <table class="table table-responsive w-100 d-block d-md-table">
for bootstrap 4 w-100 set the width to 100% d-block (display: block) and d-md-table (display: table on min-width: 576px)
<div class="table table-responsive w-100 d-block d-md-table">
<table class="table">
---
</table>
</div>
Try to add bootstraps class "table" to the tag.
<table class="table">
<thead>
<th>Head1</th><th>Head2</th><th>Head3</th>
</thead>
<tbody>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
</tbody>
</table>
Even responsive tables do not expand to fit the container if the container is large. There is no Boostrap table configuration to make that happen.
The simplest way, if you want to use Bootstrap classes, is to add w-100.
Otherwise, use a single-column grid layout.
Instead of using:
<div class="table-responsive">
you should use:
<table class="table table-responsive">
JSFiddle
In most simple words !!
Create responsive tables by wrapping any .table in .table-responsive
to make them scroll horizontally on small devices (under 768px). When
viewing on anything larger than 768px wide, you will not see any
difference in these tables.
So for your requirement .table and .table-responsive will help you.

HTML & bootstrap/ text is override another table

I have the following code in HTML, using bootstrap:
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="container-fluid form-group" ng-repeat="app in allKeys track by $index">
<label for="inputEmail2" class="col-md-4 control-label">{{app}}</label>
<div class="col-sm-6 table-responsive">
<table class="table">
<tr>
<td ng-repeat="app1 in allDesc[$index]"><b> {{app1}}</b> </td>
</tr>
<tr >
<td ng-repeat="app2 in allValues[$index]"> {{app2}} </td>
</tr>
</table>
</div>
</form>
</div>
I have two main problem:
If the text is too long in the label section ({{app}}), the text is continue in the line, and override the text in the table section.
If I minimize the browser windows, the container doesn't get the correct size.
I think that this issues are result of definition in the css, that should adjust the text to the appropriate size of the window/column, but I didn't find any css definition for that.
As mentioned in the comments, your main problem is just a missing closing <div> tag. You haven't closed the container-fluid. You can see it working in this Bootply
I also changed your col-md-4 to col-sm-4, as your table wrapper was using sm definitions, which meant that your label would have broken to full width at 'medium' size and your table would have broken to full width at 'small' size, which caused some layout inconsistencies.
you can try this code :
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="container-fluid form-group row" ng-repeat="app in allKeys track by $index">
<div class="col-sm-6">
<label for="inputEmail2" class="col-md-4 control-label">{{app}} </label></div>
<div class="col-sm-6 table-responsive">
<table class="table">
<tr>
<td ng-repeat="app1 in allDesc[$index]"><b> {{app1}}</b> </td>
</tr>
<tr >
<td ng-repeat="app2 in allValues[$index]"> {{app2}} </td>
</tr>
</table>
</div>
</form>
</div>
making the width to 100% and splitting the blocks accordingly, will help the browser to display the content in a proper way and remember to close the "div" whenever the content for the div is over. Else, the following content will go with misplacement.

Twitter Bootstrap - unwanted space above the footer in Mobile App

My question is similar to the question here:
Bootstrap Unwanted space on the bottom of modal-footer after using the unofficial Bootstrap Modal modification
But, i am not using Modal and the issue only really bothers me in Landscape mode.
This is a photo (apologies) of what I mean.
I am totally stumped. Apart from the link I gave above I cannot find any thing else relating to this?
Just to confirm - want get rid of the white space.
And this is my current markup:
<div style="background-color: black;">
<nav id="TopMenuBar" class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: black;">
my top content
</nav>
<div class="row mainBody" id="Contents" style="margin: 0; background-color: black;">
my body content
</div>
<div id="BottomMenuBar" class="container-fluid">
my footer content
</div>
</div>

How can I line up the two containers in view?

I am working on a web app. One of the views has been divided into different portions in order to display different information utilizing the whole view and make stuff more manageable. The problem is that the beginning of the information on placementContainerRight gets lined up with the last information from placementContainerLeft giving me a big free space on top of the placementContainerRight.
My html:
<div id="mainContainer">
<%--Start of left container --%>
<div id="placementContainerLeft">
<%--This section will handle the three for the specific Enterprise --%>
<div class="section">
<div class="sectionTitle">
All Agencies
</div>
<div class="horLine"></div>
<div class="placementFill">
<div class="placementItemTitle">
<div class="placementTableItems">
<table width="100%">
<tr class="placementTableHeading">
<th></th>
<th>Number of Accounts</th>
<th>Amount of Placement</th>
<th>Percentage of Placement</th>
<th>NeuPlacement Score</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="section">hmmm</div>
<%--End of left container --%>
</div>
<%--Start of right container --%>
<div id="placementContainerRight">
<%--This section handles the Bar FusionChart --%>
<div class="section">
<div class="sectionTitle">
This are the id's in my css:
#mainContainer
{
width:900px;
vertical-align: top;
margin-left:20px;
float:left;
}
#placementContainerLeft
{
width:578px;
margin-left:5px;
clear:left;
}
#placementContainerRight
{
width:267px;
margin-left:628px;
clear:right;
}
And this is the way it currently looks:
Does anybody know how to fix this problem?
This cheap and simple answer is to add "float: left" to your #placementContainerLeft #placementContainerRight.
There may be better ways to do this, but I think this is the simplest.
UPDATE: oh and remove that huge margin-left on your #placementContainerRight