I am using a simple implementation of a button on a simple MDL website with material design lite. When i click the button, areas of the UI go grey until the browser repaints that area.
<button onclick="ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
<!-- Zoom Window -->
<i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
Zoom window
</div>
It doesnt happen with all buttons set up this way, leading us to believe it could be some kind of timing issue.
I have narrowed the problem down to the tooltip, as when it is removed, the problem no longer occurs.
Is there a way to force the entire DOM to redraw, or a fix for the issue we are seeing?
We managed to track this problem down to the tooltips, and we made a simple modification to fix it. We simply created something a little like this to hide and show the tooltip on mouse down and mouse up:
<script>
function hideTooltips(){
$(".mdl-tooltip").css('display','none');
}
function unhideTooltips(){
$(".mdl-tooltip").css('display','inline');
}
</script>
<button onmousedown="hideTooltips();" onmouseup="unhideTooltips();ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
<!-- Zoom Window -->
<i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
Zoom window
</div>
This solved the issue for us
Related
I would like to remove the button bar at the top (I can't get it to display anyway) and replace it with a simple close button on the top right corner of the photo. How wis this best done? Thanks.
Please show your code or give more information as to why you can't get the top bar to display if you want help with that.
The best way to do what your asking is to simply remove all buttons except for close from the HTML code on the page with your gallery.
See this code in the example documentation:
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
You want to delete or comment out the lines with the buttons you don't want. I prefer to comment it out so they are recoverable if you decide you want them later. In that case if you only want the close button it should look like this:
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
<!--<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>-->
<!--<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>-->
Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: The tabbed metaphor is well understood and in some use cases includes the ability to close a tab via an X icon - think of multi-document editors such as VS Code, etc. Fomantic-UI has a good tab component but no automatic means of including a close icon, and good button and icon components with many options. It also offers the ability to combine components - with much power great responsibility comes - and I find that sometimes a little pointer would be useful. Therefore I provide this snippet to suggest some potential solutions.
Something like this is the target...
See my answer below.
The snippet below illustrates my answer. For me the tertiary button & icon combination are the best option. Although the height of the tab is affected by inclusion of the buttons and will need to be worked on.
As a bonus the JS in the snippet shows how to close a tab on click of the close icon.
Note: This snippet is using the the 'dist' versions of FUI. Since FUI changes often, the snippet may fail if there have been breaking changes by the time you see it. At time of writing the official release on jsdelivr cdn is 2.8.3. (#17-Jan-2020).
$('.menu .item')
.tab();
$('.tabCloser').on('click', function() {
// get the parent of the icon, meaning the anchor.
var parent = $(this).parent();
// get the tab name from the anchor.
var tabName = parent.data('tab');
// erase elements with the matching tab name
$('[data-tab=' + tabName + ']').remove();
// Click the first remaining tab if any.
if ($('a.item').length > 0){
$('a.item').first().trigger('click');
}
})
.daContent {
margin: 2em;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<div class='daContent'>
<p>
The tabs below illustrate 3 options:
<ul>
<li>First uses a button of class <i>ui basic icon button</i></li>
<li>Second is a simple icon with class <i>close icon</i></li>
<li>Third uses a button with class <i>ui tertiary icon button</i></li>
</ul>
None require additional JavaScript or CSS.
</p>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First
<button class="ui basic icon button tabCloser">
<i class="close icon"></i>
</button>
</a>
<a class="item" data-tab="second">Second <i class="close icon tabCloser"></i></a>
<a class="item" data-tab="third">Third
<button class="ui tertiary icon button tabCloser">
<i class="close icon"></i>
</button>
</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
Ideally there should be no border around the button, and for mouse users a mouse-over UI change without reverting to additional code.
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Better - no border, but also no mouse-over UI effect. And the icon cramps the tab text too much. We could fix both with custom CSS / JS but the aim is for no additional code.
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Best - no border, plus a mouser effect.
</div>
</div>
</body>
I'm using Angular UI Bootstrap datepicker popup on a modal dialog. The width of the outside border is not calculated properly based on the inside contents. In some cases, the outside box is bigger than inside contents. In other cases, the outside is smaller. Also, it seems the width of the outside of the datepicker has impact on the width of the popup. For example, "col-sm-4" will make the border smaller, while "col-sm-5" will make the border larger.
Can anyone please point me to the right direction to check where the problem might be?
Thanks in advance!
Look this: http://plnkr.co/edit/JTkIvBwl9agQCYxLaN6X?p=preview
Just change to: is-open="opened" to: is-open="$parent.opened"
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button> <b><- button not working</b>
</span>
</div>
Just figured that out. It was a mistake. I have changed the "dropdown-menu" css class buried somewhere, which affects the datepicker layout.
I have a simple modal which has a next button.
In this modal I first display contents within
<div ng-show="step1"></div>
Upon clicking the next button, I display different contents in 'step2" which is in the same modal.
Hence the overall modal contents looks something like..
<div class="modal-body">
<div ng-show="step1">
This is step 1
</div>
<div ng-show="step2">
This is step 2
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="next()" ng-show="step1">Next</button>
<button class="btn btn-primary" ng-click="prev()" ng-show="step2">Previous</button>
</div>
I would like to achieve some transition effects when the user clicks on the enxt button i.e before switching over to contents from step2.. some kind of animation should occur.
At this point i have no clue where to get started.. any help will be appreciated.
Plnkr available here:
http://plnkr.co/edit/eWy6XA1U4GCWr1cK22hH
You need to add ['ngAnimate'] dependency on your module then add class to your ng-show element with the help of that class you need to provide css:-
Here is plunker update :- http://plnkr.co/edit/PkdUxImq69s910etTy5U?p=preview
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.