jQuery/JS Common - Object Structures - positionConfig - collision
Specifies how to resolve collisions - when the overlay element exceeds the boundary element.
You can use the following collision resolution algorithms:
"flip"
Move the overlay element to the opposite side of the target if that side has more space."fit"
Move the overlay element to the inside of the boundary element."flipfit"
First apply "flip", then "fit"."none"
Ignore the collision.
To set the collision property, use an object with the x and y fields. These fields specify how to resolve horizontal and vertical collisions, respectively. Alternatively, you can use a string shortcut from the accepted values list.
jQuery
index.js
$(function() {
$("#popupContainer").dxPopup({
// ...
position: {
// ...
collision: "flip none"
// ===== or =====
collision: { x: "flip", y: "none" }
}
});
});Angular
app.component.html
<dx-popup ... >
<dxo-position ...
collision="flip none">
<!-- or -->
<dxo-collision x="flip" y="none"></dxo-collision>
</dxo-position>
</dx-popup>Vue
App.vue
<template>
<DxPopup ... >
<DxPosition
collision="flip none">
<!-- or -->
<DxCollision x="flip" y="none" />
</DxPosition>
</DxPopup>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxPopup, {
DxPosition,
DxCollision
} from 'devextreme-vue/popup';
export default {
components: {
DxPopup,
DxPosition,
DxCollision
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Popup, {
Position,
Collision
} from 'devextreme-react/popup';
class App extends React.Component {
render() {
return (
<Popup ... >
<Position
collision="flip none">
{/* or */}
<Collision x="flip" y="none" />
</Position>
</Popup>
);
}
}
export default App;ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Popup()
.Position(p => p
.Collision(PositionResolveCollision.Flip, PositionResolveCollision.None)
)
)
@(Html.DevExtreme().Popup() _
.Position(Sub(p)
p.Collision(PositionResolveCollision.Flip, PositionResolveCollision.None)
End Sub)
)Feedback