Bootstrap 3, left sidebar menu, ghosting borders - html

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.

Related

Collasping bootstrap div goes under the bottom div

I am using bootstrap collapse class in a list of divisions.
but collapsing division goes under the bottom item.
It needs to resize browser after collapse to work well.
<div>
<div class="footer-co-src row">
<div class="col-lg-3 col-sm-3 details-fly">
<a class="collapsed" data-toggle="collapse" aria-expanded="true" aria-controls="collapseDetails-1" data-target="#collapseDetails-1">Button</a>
</div>
</div>
<div class="collapse row" id="collapseDetails-1">
<div class="card card-body"> sth to show
</div>
</div>
<div>
I have multiple of these divs, but showing div will be under the next item.
there is no bug in this piece of code. You are probably using some JS library that changes position type to position:absolute or position:fix.
Check any list managing JS/Jquery source on your whole page.
Check the css position:fixed is coming from which library. You can check in inspect elements. And then use this stylesheet library before the bootstrap library in html.

Semantic UI: Make vertical menu (sidebar) collapse in tablet and mobile view

I'm building an HTML + CSS design based on Semantic UI and I was able to make pretty much any element responsive by using the class stackable.
However the left vertical menu, which I use as a visible sidebar, won't collapse in tablet and mobile view.
The result I need is exactly like the Semantic UI Docs page: the sidebar visible in desktop and landscape tablet and hidden, but toggleable, in portrait tablet and mobile.
Here's my code:
<div class="ui left vertical menu collapsible main sidebar visible desktop only">
<div class="transparent-bg">
<div class="ui center aligned basic sideheader segment">
<h2 class="ui header">Dashboard</h2>
</div>
<a class="bold item">
<i class="building outline icon"></i>Add Item
</a>
<a class="active item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
</div>
Any idea on how I can achieve this? There's no documentation on the official docs page.
Many thanks!
I don't work with semantic-ui but have you checked https://semantic-ui.com/modules/sidebar.html ?

css masonry layout without horizontal scrollbar

I'm trying to achieve masonry for my panels. This is how it looks currently:
I'd like it to fill the gaps whenever it's possible. I've tried using flexbox but it behave like there was 1 row and after adding more panels it just made them smaller. I also tried using column-countproperty but my panels were separated (panel heading from panel body. blue and white) unless there were as many elements in a row as there were columns (i.e. column-count: 4looked good only if number of panels was multiplicity of 4). Here's how my panel code looks:
<div class="container-fluid">
<div class="col-md-3 ng-cloak" ng-repeat="card in vm.cards" style="margin-bottom: 10px;">
<div class="panel panel-info" style="min-width:235px;">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">{{ card.question }}</h4>
<div class="btn-group pull-right">
Manage
</div>
</div>
<div class="panel-body">
{{ card.answer }}
</div>
</div>
</div>
</div>
Here's the exact page in my repository: Github Reposiory
Also here's the working page: http://188.166.160.66/App/Demo
I'd like to achieve this with css, but if it's impossible I'll give js a shot.
If more screenshots are required I can provide them.
#Edit: I want to prevent my site from having horizontal scrolling.

Arrange columns according to height

I am using bootstrap for grid.
When the an column is expanded the other columns which are on right are aligning properly but the elements which are left to it are not aligning properly.
<div class="row">
<div class="repeater" ng-repeat="student in students | filter : query">
<div class="span{{12/columns}} col-sm-6 panel panel-warning">
<div class="panel-body">
<div class="row">
<div class="col-md-5"><img ng-src = "img/{{student.img}}" width="80px;" class="img-circle"></div>
<div class="col-md-7">
<button class="btn btn-info" style="margin-top:20px;" ng-click="show=!show">{{student.name}}</button>
<button type="button" class="close pull-right" ng-click="remove(student)">× </button>
</div>
</div>
<table class="table table-striped table-hover" ng-show="show">
<tr><th style="padding-right:0px;">Father Name:</th><td>{{student.fathername}}</td> </tr>
<tr><th>Class: </th><td>{{student.class}}</td></tr>
<tr><th>Subj1: </th><td>{{student.results.subj1}}</td></tr>
<tr><th>subj2: </th><td>{{student.results.subj2}}</td></tr>
<tr><th>subj3: </th><td>{{student.results.subj3}}</td></tr>
<tr><th>subj4: </th><td>{{student.results.subj4}}</td></tr>
</table>
</div>
</div>
</div>
</div>
Here is the fiddle link view in fullscreen view.
I want all the elements in the grid to align properly without leaving any place.
Can anyone help me?
This is not entirely possible with bootstrap. To explain you why, the .col-md-4 class has css property float: left which means whenever you open the right-most box, the left-side elements takes the height of the right-box, thus not allowing any other boxes below it.
You could get it working for the left and right elements by giving float:right for every last element in the row (in your case using .col-md-4:nth-child(3n){ float:right; }) like in the demo here but the middle element cannot be helped because it is still under float:left.
For your requirement, I recommend you use a JS library like Masonry which does exactly what you are expecting and used in cases where containers have variable heights and you want to fix them tightly, leaving no gap.
Here is what you are looking for: http://jsfiddle.net/ewNc6/
The trick is to insert a 'clear:both' on the first of each row.
<div class="col-md-4" ng-repeat="student in students" style="{{$index % 3 == 0 && 'clear:both'}}">
This normally will tie the code to the number of rows, but then again so does <div class="col-md-4" ,so you might be ok when doing so.

Bootstrap 3 use 'btn-group' and align

I appreciate the new Bootstrap 3 but ...
I created a table with 5 columns.
The last 3 columns contain 2 x 'a href' and 1 x 'form' but everyone works as a button with a size of 30 x 30.
The form was the biggest problem because it is a block element and I wanted all buttons next to each other in one line.
So my solution so far:
<table>
<tr>
<td colspan="3">
<div class="btn-toolbar">
<div class="btn-group"> Link 1 </div>
<div class="btn-group"> Link 2 </div>
<div class="btn-group"> Form 1 </div>
</div>
This works great. But I want to align these 3 objects at the right of my cell.
There is no way I found to align it right.
<div class="btn-toolbar text-right">
Don't work!
<tr colspan="3" class="text-right">
Don't work!
<div class="btn-toolbar pull-right">
Works!
But I feel really uncertain if this is the right way.
For me it is to much nested code.
Is there any way to solve this with less code?
There is nothing wrong with using pull-right to achieve what it is you require.
<h2>Stock Management</h2>
<hr/>
<div class='btn-group pull-right'>
<a href='#' class='btn btn-default'>Add New Product</a>
<a href='#' class='btn btn-info'>Supplier List</a>
<a href='#' class='btn btn-danger'>Stock Alerts</a>
</div>
<div class='clearfix'></div>
<hr/>
You will just require a div with a class of clearfix afterwards otherwise you may have overlapping issues.
A note from the bootstrap docs regarding use of the pull-right class in dropdown menus:
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
PS - Do not use tables for ANYTHING other than displaying data. That kind of web design should be left back in 1998 :P
See if this solves your purpose. I added a bit of css to your existing code
<style type="text/css">
.btn-group{
display: inline-block;
text-align:right;
}
</style>
The HTML is same as yours
<table>
<tr>
<td colspan="3">
<div class="btn-toolbar">
<div class="btn-group"> Link 1 </div>
<div class="btn-group"> Link 2 </div>
<div class="btn-group"> Form 1 </div>
</div>