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
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>-->
Recently, we upgraded from Angular 5 to Angular 6.
The issue: Bootstrap button styles now have no margin spacing between them.
Bootstrap Version: 3.3.7
For example, if in the html you do something like this.
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
Before we updated, these buttons would have margin space between each.
Just curious if there is something we can update that would fix this or a global CSS style that can be used.
In my project I was able to restore default white spaces between Bootstrap buttons, by setting preserveWhitespaces to true in main.ts file:
platformBrowserDynamic()
.bootstrapModule(AppModule, { preserveWhitespaces: true})
.catch(err => console.log(err));
Found it in this place
ConnorsFan's answer link is the answer to our issue.
Angular 6 by default sets the angularCompilerOption: preserveWhitespaces for the application to false.
To add to the marked answer, this issue is caused by the preserveWhitespaces setting.
what's really happening behind the scenes is your template code, for example
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
is getting all the whitespace removed. which also removes the line break at the end of each button element. It's the line break that gives that extra space, not margin between each button.
So this shows more clearly why the buttons are sticking together.
<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>
You can apply the fix as suggestion globally or you can resolve the problem on specific components if needed. https://angular.io/api/core/Component You'll notice that in the docs for #components you can provide an option to turn on/off this feature for that component only.
Another solution as suggested in comments would be to globally add marginto all .btn classes, however this would have the reverse side effect happening of the option ever switches again (giving to much margin between buttons instead of the natural space)
Final note, this is an HTML/DOM side effect, not Angular or CSS, you'll be able to replicate this effect with pretty much any inline elements by removing/adding the linebreak/spaces between each element.
Add the btn-toolbar class to the div to get space margin between the buttons. Like this:
<div class="btn-toolbar">
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
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
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.
So, I have the IssuesList component, which is the list of issues that I get using ajax and github api, and DevStatus component, which sort of wraps the list up and contains all the logic, triggers state changes by two radiobuttons and so on.
My problem: When I click on one of the radiobuttons, the DevStatus component won't change state if the click was on the text inside the radiobutton. And when I click on the corners of the radiobuttons, the blue areas without text, the state changes perfectly.
Here's the structure of the radiobuttons:
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.CLOSED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Closed Issues
</label>
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.OPENED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Open Issues
</label>
</div>
Here's the codepen with the code and here's the full page view so you could better see and understand what I'm talking about.
Please, open the full page view and try to click on parts of the button that contain text and on ones that don't and you'll notice that as long as you click on parts without text - the state changes and if you click on text itself - the state doesn't change at all.
Could you please help me with that problem?
PS: removing onChange from the input element is not the solution.
Update 1
If you go to DevTools and inspect the radiobutton element, you'll see that inside the label tag there're input and weird span elements. The span element is not in the code I wrote, did React automatically add that? For some reason, the onClick event listener is not applied to those input and span elements.
Update 2
I've tried to add click event listener to the radiobutton in the console of dev tools and tried to figure out the target of the clicked element. When I click on the text - it is the span element and when I click on place without text - it is the label element and that's why the click event is not working.
Can my problem be solved using dangerouslySetInnerHTML, so that it won't create the unnecessary span?
Could you tell me please how to solve that?
React is creating a span because your text is not in any div. Also it would create a span if there was any white space (but in your case this is because there is no div around your text).
But the real problem here is the way you check your event. You need to check e.currentTarget instead of e.target
Then no need to use the ugly dangerouslysetinnerhtml!
React appeared to sometimes be adding span tags around text, no matter if there are the free white-spaces or not. The spans didn't allow the onClick event to fire when they were clicked on.
So, to force React not to render the spans, the dangerouslySetInnerHTML may be used:
noSpanRender(text) {
return { __html: `<input type='radio' name='options' autoComplete='off'/>${text}` };
}
render() {
return (
<div className="dev-status-page col-centered">
<div className="graphs">
<h1 className="text-center page-header">
Our Recent Closed and Opened Issues from GitHub
</h1>
</div>
<div className="issues col-centered">
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Closed Issues')} />
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Open Issues')} />
</div>
<IssuesList issues={this.state.issues} />
</div>
</div>
)
}
It was vital to avoid those span elements inside the input tag, so using dangerouslySetInnerHTML finally helped.