Angular-Material 1 inch blank space above toolbar - angular-material

I noticed that when I use an Angular Material toolbar on Chrome, I get about a 1 inch blank space at the top of the window (page, modal, dialog, etc...). How do I remove this?
Code producing the Modal:
<md-dialog aria-label="Game Info and Map">
<md-dialog-content>
<md-toolbar flex layout="row" layout-align="space-between center">
<img ng-src="{{schedule.HomeTeamLogo}}" class="TeamLogo" alt="{{schedule.HomeTeamName}} Logo" />
<h5>{{schedule.GameDate | SLS_Date}} # {{schedule.GameTime | SLS_Time:'hh:mm'}}</h5>
<img ng-src="{{schedule.AwayTeamLogo}}" class="TeamLogo" alt="{{schedule.AwayTeamName}} Logo" />
</md-toolbar>
<section layout="column" layout-align="center">
<div ng-init="coords={latitude: false, longitude: false}">
<gm-map options="{center: [{{schedule.Latitude}}, {{schedule.Longtitude}}], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
<gm-marker options="{position: [{{schedule.Latitude}}, {{schedule.Longtitude}}], draggable: false}">
<gm-infowindow options="{content: '{{schedule.VenueName}}'}"></gm-infowindow>
</gm-marker>
</gm-map>
</div>
</section>
</md-dialog-content>
<section>
<div class="md-actions">
<md-button ng-click="CloseDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
</div>
</section>
</md-dialog>
Plunkr

Steven,
It seems to me that your md-action css class has a min-height: 52px. A little strange but you can work this around in your css. Try something like on this plunker. If this css change affects more than it should, try specializing your css like adding a new class or so.
hope it will help :)

Related

JQuery UI DatePicker - Input Blocked when Calendar Overlays card-header

I have implemented JQuery UI Datepicker on a site.
I have an issue where that when I click to show the calendar dropdown, where the dropdown overlays the bootstrap card in the next row, anything over the card-header cannot be clicked on.
If I scroll the page, the calendar position remains static, but the non-clickable area moves to wherever the card-header is positioned.
The z-index of the calendar is 9999, whilst that of the card-header is only 3.
I have tried adding
style="overflow: visible !important"
to the card based on another answer on stackoverflow, but no dice.
I have screenshot rendered html below, marking the datepicker, and the overlaid card-header:
In case relevant, I am using:
Bootstrap 4.6
ASP.NET Webforms
Material Dashboard 2.1.0
JQuery UI 1.13.2
JQuery 3.6.0
Any ideas why this is happening, and how to resolve? Thanks.
Edit 1 - 2023-01-11
I have put up a minimal example Here
I have added an inline style to the card-header that is being overlaid to increase the height, so that the problem is more apparent.
(I have stripped out a load of script references for this example that are now causing a few console errors, but these are not related to the issue.)
I am unable to replicate your code as it has links to content that is local to your web site. Consider the following more basic example.
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header">
<h4>Card with Datepicker</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-borderless mb-0">
<tbody>
<tr>
<th class="pl-0 w-50 pt-1 pb-1 border-top-0" scope="row"><strong>Select Date</strong></th>
<td class="pt-1 pb-1">
<span class="bmd-form-group is-filled"><input name="LastContactedCal" type="text" id="LastContactedCal" class="datepicker form-control" value="05/10/2022"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header" style="height: 200px;">
<h4>Another Card</h4>
</div>
<div class="card-body">
<p>Some Stuff</p>
</div>
</div>
</div>
</div>
This works as expected without the issue that you reported. I suspect that some other component that my example is not using is interfering with the click event in your sites code. I would suggest you remove all additional libraries except for Bootstrap and jQuery UI, then add them back in one at a time or in other orders, to see when the functionality you are seeing returns.

Show pager dots on ion-slides ionic component

I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
I have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.
Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this:
<div class="swiper-pager hide">
So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.
This work for me in Ionic 3:
<ion-content>
<ion-slides pager>
<ion-slide>
<h1>My Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
Finally got it to work with this as the opening tag of the slides:
<ion-slides [options]="{pagination: true}">
You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:
.swiper-container-horizontal > .swiper-pagination
{
bottom : 50%; //Change accordingly
z-index : 99 !important;
}
I have tested out your code (minus the image), it is appearing on mine.
If you are using swiper to slide page, there are a lot of parameters to do the same as-
<div class="swiper-pagination"></div>
here is the code of paginatin-
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
Complete code can have a look here.
We have demo of slider as-
http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!

jQuery Mobile fixed header div overlaps content div

Am using Jquery Mobile 1.3.1 on Worklight 6. When I use a fixed header and content. The header always seem to overlap the content. Please suggest what I am doing wrong.
<body id="content" style="display: none;">
<div data-role="page" id="basic">
<div data-role ="header" data-position="fixed">
<h3>CORS</h3>
</div>
<div data-role="content">
<form id="basic-information">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
<div data-role="collapsible">
<h3>Basic Information</h3>
<fieldset data-role="controlgroup" data-type="horizontal"
data-mini="true">
Not sure what's up with jQuery Mobile, but it seems to originate from there (tested with jQuery Mobile 1.4.2, happens there as well).
To fix, I have added the following to common\css\main.css:
.ui-page-header-fixed { padding-top: 15px !important; }
BTW,
Your code snippet is cut... (not full).

Putting circular icon buttons on right side of header bar - jquery mobile

At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"

Google map Splitter layout

Is there is any layout like this
http://layout.jquery-dev.net/samples/gispaho/layoutintab.htm which suport google map as a contend i use the above one. i got a problem, splitter drag fails over the google map.
Ref
https://stackoverflow.com/questions/15795815/jquery-dragable-fails-over-the-google-map
what i tried is
<div id="layout" class="sun-layout" style="height: 600px;">
<div class="ui-layout-west sun-layout">
<div class="map1">
</div>
</div>
<div class="ui-layout-center sun-layout">
<div class="map2">
</div>
</div>
in Dom ready
var $layout = $("#layout"); $layout.layout({
west__size: 400 });
We had the same problem in our application. We just show an invisible div over the map on the start of the resize and hide it at the end. That div will temporarily stop all mouse events from reaching the map. I imagine the same technique will work on your other question. As long as there is some way to hook into the resize start and resize end events, this should be effective.
So to apply it to your situation I would alter the html as such:
<div id="layout" class="sun-layout" style="height: 600px;">
<div class="ui-layout-west sun-layout">
<div class="map-mask"></div> <!-- Your map mask -->
<div class="map1">
</div>
</div>
<div class="ui-layout-center sun-layout">
<div class="map-mask"></div> <!-- Your map mask -->
<div class="map2">
</div>
</div>
Then I would add the following events to jquery UI layout:
.layout({
...
onresize_start: function(){
$(".map-mask").show();
},
onresize_end: function(){
$(".map-mask").hide();
},
...
})
And some CSS. I don't know what context the sizing is for map, so you will need to tailor this. The idea is to get the div in a z-index higher than the map and cover it completely.
.map-mask{
height:100%;
width:100%;
position: absolute;
z-index: 1000;
}

Resources