I am having a "small" issue with the angularjs ui datepicker. I need to indicate somehow, if an input with a datepicker attach, should show the popup from the bottom-left corner of the input (as default)
or if I want it from the bottom-right corner of the input instead. This is because in a page that I am creating, my input is really close to the right side of the page, and when I attach the datepicker, this happens (the datepicker is cutted and now a horizontal scroll appears):
but the thing is that I need the datepicker in both positions (according to the case related in the images).
Someone know how can this be fixed? I have tried changing the left attribute that is inline in the datepicker popup template, but it is always a fixed value and I believed that is not the real option.
Thanks
https://github.com/angular-ui/bootstrap/issues/1012
Ugly hack:
<div class="hackyhack">
<input datepicker-popup="...">
</div>
Magic CSS:
.hackyhack {
position: relative;
}
.hackyhack .dropdown-menu {
left: auto !important;
right: 0px;
}
Now latest angular-ui 1.2.0 onwards versions have popup-placement option in uib-datepicker-popup settings.
A quick summary from the docs.
popup-placement (Default: auto bottom-left, Config: 'placement') -
Passing in 'auto' separated by a space before the placement will
enable auto positioning, e.g: "auto bottom-left". The popup will
attempt to position where it fits in the closest scrollable ancestor.
Accepts:
top - popup on top, horizontally centered on input element.
top-left - popup on top, left edge aligned with input element left edge.
top-right - popup on top, right edge aligned with input element right
edge.
bottom - popup on bottom, horizontally centered on input
element.
bottom-left - popup on bottom, left edge aligned with input
element left edge.
bottom-right - popup on bottom, right edge aligned
with input element right edge.
left - popup on left, vertically
centered on input element.
left-top - popup on left, top edge aligned
with input element top edge.
left-bottom - popup on left, bottom edge
aligned with input element bottom edge.
right - popup on right,
vertically centered on input element.
right-top - popup on right, top
edge aligned with input element top edge.
right-bottom - popup on
right, bottom edge aligned with input element bottom edge.
In your case, I think bottom-right will work.
play with this plunker for more details.
This CSS solution may be simpler than altering/hacking your angular .js files:
Wrap your datepicker in a div and then override the margin CSS of the datepicker's .dropdown-menu class:
<div id="adjust-left">
<your-datepicker-here/>
<div>
Then, in the CSS:
#adjust-left .dropdown-menu{
/* Original value: margin: 2px 0 0; */
margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */
}
Yeah I hacked my angular-ui.0.7.0.tpls.js file as described above and it worked pretty good:
function updatePosition() {
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
var padding = 20; //min distance away from right side
var width = popupEl.outerWidth(true);
var widthOver = $('body').outerWidth(true) - (scope.position.left + width + padding);
if(widthOver < 0) {
scope.position.left = scope.position.left + widthOver;
}
}
If you want to implement a general solution, this is something that cannot be achieved just by altering the template of the datepicker-popup.
You have to change the updatePosition function inside the directive, so that
scope.position.left equals to something like this:
scope.position.left += scope.position.width - $position.position(popupEl).width;
But again you have to be sure that you "read" the popuEl width after it is visible, otherwise you will get zero. Also, if you go to another mode (month or year selection) the position does not get updated although the popup width may change.
I just want to say that this feaure is not a one or two lines change, and probably it's better to open a request for this in https://github.com/angular-ui/bootstrap/issues?state=open Someone may be willing to investigate this further!
Related
https://blog.theodo.com/2020/11/react-resizeable-split-panels/
https://htmldom.dev/create-resizable-split-views/
I'm trying to implement a custom react button slider similar to this, in order to resize the two sides of a diff tool using only the built-in react library(no external react libraries or typescript).
I'm trying to implement the button slider similar to the 2 links above in custom react, but I can't seem to get it working for my use-case.
Instructions:
A div for the slider button must be added between two left and right divs in my project. The left and right divs are the 2 sides of the differ tool.
The next step is to implement the CSS functions for the slider button, having a separate .css would be best to keep things organized.
The final step is to implement a custom OnDrag handler, that handles when the mouse clicks the button and drags it horizontally(left or right).
The default width for both sides will both be set to 50. Also, the two sides that are resized at the same time must be resized using only the width of both sides. So the leftSideWidth and rightSideWidth constants must be set to the default size of 50, and must be used to calculate change in width of both sides, so when the mouse clicks and drags the slider button horizontally, the size of both sides must be calculated correctly, so that the 2 sides can resize correctly, like in the above links.
Here's the code that I'm using for my project, but I'm no sure what to add next?
(Note: This must be implemented using only the built-in react libraries, no external libraries or typescript, just custom react.)
Thanks in advance for the help.
index.js
const [leftSideWidth, setLeftSideWidth] = useState(50);
const [rightSideWidth, setRightSideWidth] = useState(50);
const onDragHandler = (event) => {
// calculate the width and height of both sides:
// get width of view port:
// get position of the slider button:
// based on the position of the slider button, calculate the new widths:
// calculate how far the mouse has moved:
}
<div className="container">
<div className="leftView"></div>
<div className="draggable" id="drageSlider">
<div draggable onDrag={onDragHandler}/> </div>
<div className="rightView"></div>
</div>
app.css
.container {
display: flex;
}
.leftView {
}
.draggable {
cursor: move;
position: absolute;
user-select: none;
}
.rightView {
flex: 1 1 0%;
}
Ever since 7.2 , the label of the bar is pushed to the right and gone missing if the bar width is too long.
Initially, I override the redraw() function of CartesianChart to "shorten" the bar so that it will not take up 100% of the width and thus allow display of the label, like below:
attr = {
visibleMinX: xRange[0],
visibleMaxX: xRange[1],
visibleMinY: yRange[0],
visibleMaxY: yRange[1],
innerWidth: innerWidth - 40, //leave 40px of "space"
innerHeight: innerHeight,
flipXY: flipXY
};
But since 7.2, the label was pushed towards right and gone missing. If you check here using 7.2.0 library, and press Play button, you will see the label "run" from right to left and disappear. Where as for prior version, the label remain on the right although in the below example, the label is not visible too because the bar width is too long. (if only I could fix this without the override code above)
https://fiddle.sencha.com/#fiddle/uea&view/editor
Somehow I'm able to capture the 90 while it's "moving" from right to left then disappear!
I have a layout which uses flex to resize its internal components to the window size.
Part of the left column has either some "control buttons" or an "event log" of which visibility can be toggled.
I'd like to animate that show/hide so the log messages div slides out from the right. When the log messages div is hidden, it will slide back towards the right.
The system is using AngularJS (not "Angular").
The majority of examples online show how to animate opacity to fade in and out and the few that show sliding animation use position: relative wrapping position: absolute elements. However, using absolute wrapping relative messes up the flex layout: wrong elements are visible and resizing doesn't work properly.
Any idea on how to achieve that effect?
Here is a fiddle showing the layout.
Thanks!
How to create a utility mixins with destrucutrable params? Like in standard css margin: inherit auto where the first argument is applied to top and bottom and second to right and left, unless additional args given.
margin-side(left, right)
margin-left left
margin-right right
.some-div
margin-side auto
// applied to both margin -left and -right
Using conditionals? Rest params? Default param values? Can't get it to work with any of those..
// thus far I've done it with
margin-side(left, right) ...
margin-sides(both) ...
// but it's error prone
Cheers, thanks!
I'm not sure if I understand your question.
I think it's what you try to do:
margin-side(vertical, horizontal = vertical)
margin-top vertical
margin-left horizontal
margin-right horizontal
margin-bottom vertical
.foo
margin-side(10px)
.bar
margin-side(5px, 7px)
try it online
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like: