I'm using antd TimePicker when I open it and scroll down, the popover scrolls with the page instead of staying in place.
I cant figure out why their official solution for the scrolling problem isn't working for me
https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page
Here is my code:
<div className="timepicker__wrapper">
<span className="timepicker__mintime-label">
{getTranslate(QUESTION_MODULE.GENERAL.MINIMUM_TIME_LABEL)}
</span>
<TimePicker
getPopupContainer={triggerNode => triggerNode.parentNode}
onChange={onChangeMinTime}
format={timeFormat}
defaultValue={moment(item.minTime ?? '00:00', timeFormat)}
allowClear={false}
/>
</div>
If I console.log triggerNode.parentNode it points to the timepicker__wrapper exactly as it should.
Here you can see the anchor node
I solved this issue by adding position: relative to the anchor node. It would be nice to mention this in the docs
Related
I'm making a Modal with TimePicker inside it. But the TimePicker Pop up doesn't have horizontal scroll bar, so it's like:
// here is my sample code
<div id="modal">
<Modal>
<Form>
<Form.Item>
<div id='time'>
<TimePicker defaultValue={...} getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement/>
</div>
</Form.Item>
</Form>
</Modal>
</div>
I had searched on google and tried to add prop getPopupContainer={triggerNode => triggerNode.parentNode} and getPopupContainer={() => document.getElementById('time')} but both of them is not working, same result. even get id modal. Anyone know what happen? Thanks
My expected:
I found my problem! I have some css variable override global style of Ant Design. I removed and it's work. Thank for your help.
I have used angularJS validations like ng-required and ng-minLength and show them if $touched and $invalid true. I have used UI-route to show different page in slides(using ngAnimate) on a single page. When we click the button to move on next slide it show the validation message pop-up of next page as shown in image. It shows the validation message popup on page load. I have used novalidate on form tag and formnovalidate on button but not working at all.
<input type="email" class="form-control" placeholder="Email" ng-model="registration.email"
name="email" ng-required="true" ng-class="{errorField: (personalInfoForm.email.$invalid
&& personalInfoForm.email.$touched) || isEmailError}" ng-blur="validateUserNameAvailability()"
ng-pattern ="emailPattern" />
<div class="errorTooltip" ng-show="isEmailError">{{emailError}}</div>
<div ng-show="personalInfoForm.email.$invalid && personalInfoForm.email.$touched && !isEmailError">
<div ng-show="personalInfoForm.email.$error.required" class="errorTooltip">
{!$Label.Text_You_Must_Enter_A_Value}
</div>
<div ng-show="personalInfoForm.email.$error.email || personalInfoForm.email.$error.pattern" class="errorTooltip">
{!$Label.Text_Please_Enter_Valid_Email}
</div>
</div>
Please post you complete code for the form but from your description of the issue i'm guessing the button type used on the "Next" button to go to the next slide must be
<input type="submit">Next</input>
change it to button.
<input type="button">Next</input>
You must have used a common form tag for all the slides and submit the form at the end of the last slide to save the data. But by using the button type as submit on the Next button the form is getting submitted at the end of each slide. Let me know if my analysis was correct.
I have found fix for this issue. Firefox load angularJS slow therefore it show all validation message on page load and later hide them.
I have added one css line in starting of page that added to ui-view.
<style>.first-page{ display: none; }</style>
I have removed this css in the end of page.
<script>$('.first-page').css('display','block');</script>
I have applied this class 'first-page' on main div of page.
This resolve my issue. Now all pages loaded in ui-view component perfectly.
Note: This also resolve the content override issue on slide animation. Firefox load angular animation slow. I have hide the page till its load completely. This resolve all firefox issues.
I have two button that are overlapping, and use ng-hide for the m with the same flag.
On Chrome it work perfectlly, but when I use IE 11, the icons are overlapping on page load.
I have two icons on in my search box:
And On IE11, when the page is loading:
The code is:
<button type="submit" class="btnSubmit" ng-show="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-show="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
How can I fix it ?
Try using ng-ifinstead of ng-show.
The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.
Not using CSS by changing to ng-if prevents these CSS problems. Although the ng-ifcreates a new scope but that impact is nothing.
<button type="submit" class="btnSubmit" ng-if="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-if="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
If you don't want to change to ng-if, then please share a working Plunkr/... so help you find your problem. Since it will be a cssissue most likely.
The Problem was that IE11 save cash with old code, CTR+R dident solve this problem.
In the IE11 option I revoce the option to save cash and it solve the problem, the new code appear.
I am using angular material in my angular app. I want to put a md-tooltip on md-progress-bar but it is not working. md-tooltip works fine on other elements like md-icon but not on md-progress-linear. Any help. Here is how I am using it.
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
I had to wrap the progress bar and tooltip in another element, but not nest the tooltip inside of the progress bar:
<div class="progress-container">
<md-progress-linear md-mode="determinate" value="50"></md-progress-linear>
<md-tooltip>Hello</md-tooltip>
</div>
I styled the container to make it taller than it is, because I needed it to be clickable, but not have a tiny hitbox.
Demo: http://codepen.io/langdonx/pen/GowBeq
I know this is pretty old, but I just found myself a solution and maybe this can be used by others as well.
Putting the tooltip directly under the progressbar doesn't work, but you can wrap the whole thing in a div or span:
<div>
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
</div>
This way it works fine. Haven't found anything else yet and it doesn't seem to have a solution in the official discussions
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario