I displayed a grid items in a div which is toggled to show and hide the items,
In desktop and tablets it is working good, but in mobile devices the items button click event is not working.
In desktop when i mouse over the grid item it will change its color to blue and cursor to pointer.
sample code of this grid is as follow
<div class="items_grid" style="width: 50%; float: right; height: 320px; overflow-x: hidden; overflow-y: auto; position: absolute; z-index: 10; top: 0px; right: 0px; border: 1px solid rgb(219, 219, 219); display: block;">
<div class="col-md-12 col-sm-12 col-xs-12 div_padding">
<div class="form-group col-md-12 col-sm-12 col-xs-12" style="background-color:#DADADA;color:#000000;border:1px solid #DADADA;">
<center><form class="form-inline" style="padding:0px;margin-bottom:1px;">
<select class="form-control" name="menucategory" onchange="getbycategory(this.value)">
<option value="0">--Select Category/All--</option>
<option value="1">ABC</option>
</select>
</form></center>
</div>
</div>
<div id="menu_items">
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('1527')">Comma Hoox Powerbank 6000</button>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('4002')">Epay</button>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('2')">Fees - 1st Installment</button>
</div>
<div class="row" style="background-color:#f5f5f5;">
<div class="col-md-12 col-sm-12" style="padding-top:2px;">
<div class="col-md-6 col-sm-6" id="p_page"><button class="btn btn-primary btn-block pagenation disable" onclick="pagination(,0)"> << </button></div>
<div class="col-md-6 col-sm-6" id="n_page"><button class="btn btn-primary btn-block pagenation" onclick="pagination(12,0)"> >> </button>
</div>
</div>
</div>
</div>
sample js
function insertitem(invcode)
{
if(invcode=='')
{
alert("no item");
}
else
{
//some function
}
}
Note: Never nest col within col and cols should always be inside rows.
By the way, placing
<div class="clearfix"></div>
after the last item should clear floats and fix this issue.
Related
i am new in angular i want to print a modal information i am using onclick=print() to print the data my data is shown in the print priview but i didnt align right i add the screenshot of my pgae i want to align the data enter image description here.
my css code
#media print {
#non-printable {
visibility: hidden;
}
#printable{
visibility: visible;
border: none;
position: absolute !important;
left: 0;
top: 0;
overflow-x:auto ;
float: left;
}
}
this is my html code
<div class="modal" id="dModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document" >
<div class="modal-content" style="margin-left: auto; margin-right: auto;">
<div class="modal-body" id="printable">
<div class="container" style="width:100%" >
<div class="row">
<div class="col col-md-3">
<label>Irn Number :</label>
</div>
<div class="col col-md-9">
<label>{{irn}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>Status :</label>
</div>
<div class="col col-md-7">
<label>{{Status}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>QR code :</label>
</div>
<div class="col col-md-7" style="text-align: left;">
<label> <qrcode [qrdata]="qr" [width]="150" [errorCorrectionLevel]="'M'"></qrcode> </label>
</div>
</div>
</div>
<div class="modal-footer" id="non-printable">
<button id="btnPrint" type="button" class="btn btn-secondary" data-dismiss="modal"onclick="print()">Print</button>
</div>
</div>
</div>
</div>
</div>
thankyou for your help.
You can try to add to the container class the attributes flex-direction: column; display: flex;
I have one leaflet map and 2 div section with some content.
<body>
<div class="row showEquipmentDetails" style="margin:10px;">
<button type="button" class="btn btn-primary" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<div id="map">
</div>
</body>
<script>
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
</script>
Am doing hide and show of 2 div section its placed on out side of the map. But I need to hide and show it above the map,so I wrote like this
<div id="map">
<div class="row" style="margin:10px;">
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
</div>
But click events are not working on map. when I click on first button, map is getting zoomed .click events are not fired. why? How can I achieve it?any suggestion?Thanks!!
Map is not loading to me. But check whether this solution is working for you,
var mymap = L.map('map').setView([51.505, -0.09], 13);
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
#container {
width: 650px;
height: 350px;
position:relative
}
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.EquipmentContent {
width: 90%;
height: 90%;
position: absolute;
top:8px;
left: 45px;
}
.showEquipmentDetails {
width: 40px;
height: 40px;
position: absolute;
top:8px;
left: 45px
}
#EquipmentContent {
z-index: 10;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<div id="container">
<div id="map"></div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style=";background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" ><i class="fa fa-bars"></i></button>
</div>
Got solution.By adding the following style I am getting the expected result
.showEquipmentDetails,.EquipmentContent{
position:absolute;
z-index:9;
width:98%;
}
Basically I am trying to use an onclick event to change an image source when image 2 button is clicked. When the image furthest right of the section is clicked, a modal will pop up. In that modal, there are two buttons down at the bottom. Image one button is intended to display the original image, and image two is intended to display a different image. Not sure what is wrong in my code, I can't see anything that I am forgetting. Or maybe I am just doing it completely wrong in the first place, help would be much appreciated.
.mDialogPhoto {
width: 95%;
display: block;
margin-left: auto;
margin-right: auto;
}
.modal-body {
padding: 0px;
}
.modal-backdrop.in {
opacity: 0.8;
}
.modal-content {
background-color: white;
}
.img-responsiveModal {
margin-top: 20px;
margin-bottom: 20px;
display: block;
width: 100%;
height: auto;
}
.modal-dialog {
margin-top: 50px;
}
<section class="contentThree">
<div class="container-fluid custom">
<div class="row">
<div class="col-md-12 hidden-xs hidden-sm">
<h2 class="text-center photographyTitle">Shop</h2>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog mDialogPhoto" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
</div>
<div class="paypal col-md-3">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="D9FWAKHUPWYXS">
<table>
<tr><td><input type="hidden" name="on0" value="Choose Size">Choose Size</td></tr><tr><td><select class="float-right" name="os0">
<option value="Size One">Size One $100.00 USD</option>
<option value="Size Two">Size Two $200.00 USD</option>
<option value="Size Three">Size Three $300.00 USD</option>
<option value="Size Four">Size Four $400.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input class="paymentBtn1" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div class="row">
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/></a>
</div>
</div>
<div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
</div>
<div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View Photos</a>
</div>
</div>
</div>
</section>
You need a dot before the src, its a property of the getElementById() method.
document.getElementById('myImg').src =
'/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg';
I have a web page and fixed menu(display:none) and if I scroll page until rezervation form fixed menu make it appear it's good so far but if my resulution under 768px my fixed menu doesn't work when I scroll page until I refresh..
Edit: I undserstand problem..problem is top navigation menu(mega menu) if I remove it my codes work but I have to solve not removing
JS
$(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
$(window).scroll(function() {
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-otel-giris").val() == ""){
$(".sticky-checkin").fadeIn(500);
}else{
$(".sticky-checkin").fadeOut(500);
}
});
});
CSS
.sticky-checkin{
position:fixed;
top:0;
left:0;
z-index:1042;
background:#FFF;
width:100%;
padding:15px 0;
#include clearfix;
-webkit-box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36);
-moz-box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36);
box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36);
display:none;
}
.sticky-container{
width:50%;
position: relative;
margin:0 auto;
#include clearfix;
input,select{
cursor:pointer;
}
}
/**
* sticky border
*/
.oteller-sticky{
border-bottom:1px solid #faa82b;
}
HTML
<div class="sticky-checkin oteller-sticky">
<div class="sticky-container">
<div class="row mt10">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 mb10">
<input type="text" name="oda-otel-giris" class="oda-giris-cikis input-full-width sticky-oda-giris" placeholder="Giriş" data-toggle="modal" data-target="#popupCheckin">
<span class="oda-otel-giris"></span>
</div>
<div class="col-lg-2 col-md-2 col-lg-2 col-md-2 col-sm-2 col-xs-6 ">
<input type="text" name="oda-otel-cikis" class="oda-giris-cikis input-full-width sticky-oda-cikis" placeholder="Çıkış" data-toggle="modal" data-target="#popupCheckin">
<span class="oda-otel-giris"></span>
</div>
</div>
</div><!-- sticky container-->
<div class="modal fade fullscreen" id="popupCheckin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog otel-filtreleme-popup">
<div class="modal-content" style="color:#fff;">
<div class="modal-header" style="border:1px solid orange;">
<h3>OTEL BUL</h3>
<button type="button" class="close btn btn-link" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close fa-lg" style="color:#faa82b;"></i></button>
<h4 class="modal-title text-center"><span class="sr-only">main navigation</span></h4>
</div>
<div class="modal-body otel-filtreleme-popup">
<div class="container-margin nomargin nopadding notopmargin">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 otel-arama">
<input type="text" name="oda-otel" id="oda-otel" class="oda-otel input-full-width" placeholder="Otel adını veya Bölgeyi yaz">
<span class="oda-otel-icon"></span>
</div>
</div><!-- otel ara-->
<div class="row mt10">
<div class="col-lg-6 col-md-6 col-xs-6 mb10">
<input type="text" name="oda-otel-giris" class="oda-giris-cikis input-full-width" placeholder="Giriş">
<span class="oda-otel-giris"></span>
</div>
<div class="col-lg-6 col-md-6 col-xs-6">
<input type="text" name="oda-otel-cikis" class="oda-giris-cikis input-full-width" placeholder="Çıkış">
<span class="oda-otel-giris"></span>
</div>
</div><!-- otel giriş çıkış-->
<div class="row ">
<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
<select name="oda-otel-kisi" id="oda-otel-kisi" class="oda-otel-kisi" style="display: none;">
<option value="">Kişi</option>
<option value="">1 Kişi</option>
<option value="">2 Kişi</option>
<option value="">3 Kişi</option>
</select><div class="nice-select oda-otel-kisi" tabindex="0"><span class="current">Kişi</span><ul class="list"><li data-value="" class="option selected">Kişi</li><li data-value="" class="option">1 Kişi</li><li data-value="" class="option">2 Kişi</li><li data-value="" class="option">3 Kişi</li></ul></div><span class="oda-otel-kisi-icon"></span>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="submit" class="btn btn-warning otel-oda-sec" value="OTEL ARA">
</div>
</div><!-- otel kişi sayısı-->
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.fullscreen -->
</div><!-- sticky checkin-->
online demo
i have a problem to center the content in a "row", the buttons in the example are always on the left side and i have too much space on the right side.
Is there a way to center this buttons?
thx
tomas
<div class="abc">
<div class="row red show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
The class span2 has property float:left:
<div class="block">
<div class="row show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
</div>
CSS:
.block {
max-width: 500px;
}
.block > div {
text-align:center;
}
.block > div > div {
float:none;
}
I would consider not using span2 (layout and grid class) with btn (button style class) together.
http://jsfiddle.net/sTwj7/10/
HTML
<div class="abc">
<div class="row red show-grid">
<div class="btn">a</div>
<div class="btn">b</div>
<div class="btn">c</div>
<div class="btn">d</div>
<div class="btn">e</div>
</div>
</div>
CSS
.red {
background-color: red;
}
.abc {
max-width: 500px;
}
.red .btn {
width: 160px;
margin: 0 auto;
display: block;
}
Updated 2018
Bootstrap 4
Use the auto-layout columns and text-center
<div class="row text-center">
<div class="col-sm border">a</div>
<div class="col-sm border">b</div>
<div class="col-sm border">c</div>
<div class="col-sm border">d</div>
<div class="col-sm border">e</div>
</div>
https://www.codeply.com/go/2fDFPSB5A4
Bootstrap 3
Use column offset and text-center
<div class="row red show-grid text-center">
<div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
<div class="col-md-2 btn btn-default">b</div>
<div class="col-md-2 btn btn-default">c</div>
<div class="col-md-2 btn btn-default">d</div>
<div class="col-md-2 btn btn-default">e</div>
</div>
https://www.bootply.com/zEYom4EJUF
Bootstrap 2 (original answer)
You could add CSS to center your spans like this:
http://jsfiddle.net/sTwj7/9/
<div class="span2 pull-center">
<h1>a</h1>
</div>
CSS class:
.pull-center {text-align:center;margin:0 auto !important;float:none !important;}