Tag: CSS

Bootstrap dropdown hidden issue in table

In this post we’ll see that, how we can solve the bootstrap dropdown issue when we use the dropdown inside the table or any element with overflow:hidden property. so when you add a bootstrap dropdown button inside a table row and apply the overflow hidden on table container it will hide your dropdown in open state.

For example:

This is sample HTML of your issue:

<div class="lorem-table-wrapper">
				<div class="table-body">
					<table class="table table-striped">
						<thead>
						<tr>
							<th></th>
							<th class="sortable">Column 1</th>
							<th class="sortable">Column 2</th>
							<th class="sortable">Column 3</th>
							<th>Column 4</th>
							<th>Dropdown</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
						<tr>
							<td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

and this your css for table wrapper

.lorem-table-wrapper .table-body {
    overflow: visible;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

This is your output of your HTML and CSS. you can see dropdown is hidden inside table.

dropdown-hide

To solve this problem we need to two things:

  1. First capture the event of bootstrap dropdown button when dropdown show and hide
    • show.bs.dropdown
    • hide.bs.dropdown
  2. Second inside this event we will check the current target offset(.offset()) and outer height of the current target(.outerHeight());

Here is the full code:

var dropdownMenu;
                                  
$('.table-body').on('show.bs.dropdown', function (e) {
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());
    var eOffset = $(e.target).offset();
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left,
		'width':'184px',
		'font-size':'14px'
    });
	dropdownMenu.addClass("mobPosDropdown");
 });
    
$('.table-body').on('hide.bs.dropdown', function (e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
 });

Now run your HTML in browser and see your issue is solved

Thanks for reading. Happy Learning!!!

Windows devices touch issues

In this article i will show you how we can solve the touch issue in windows devices. Now a days we have lot’s of devices are available in the market. So when we are creating a responsive site we have to first fix the device requirement specification from client because we must sure it work properly, user friendly in every device mobile,tablet and desktop and every platform like android,iOS and windows .

Every devices have different specification about touch and it behaves differently. In windows we mostly use IE who handle the touch events differently but in webkit it supports a touch interface that is separate from mouse handling and IE groups the touch,mouse and stylus into a single interface(pointer) it also has been submitted in W3C specification pointer events.

In windows devices IE pointer events model have custom gesture to indicate the area of the page by default gesture handling(pan). we can turn off default gesture handling by using this property -ms-touch-action for example.

<div id="scrollbar" style="overflow: hidden; -ms-touch-action: none;">

However, IE10 on Windows Phone 8 also supports the pan-x and pan-y value of -ms-touch-action property which specify that the browser should handle horizontal or vertical gestures to solve the touch issues in windows, and custom JavaScript handlers should handle everything else.

Note  Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported in IE11 and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.

Syntax

html
{
    -ms-content-zooming: none; /* Disables zooming */
    touch-action: cross-slide-y pan-y;   /* Disable any special actions on tap/touch */
}

div.list > div.scrollbar{
  touch-action: pan-x;
}

When a we touches an element, that element’s touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

Property values

One of the following values, a combination of the gesture values.

auto
Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.
none
The element permits no default touch behaviors.
pan-x
The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y
The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom
The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.
manipulation
The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.
double-tap-zoom
The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.
cross-slide-x
The element permits cross-sliding along the horizontal axis.
cross-slide-y
The element permits cross-sliding along the vertical axis.

For more information about web development for windows click here