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
Related
I'm using this re-resizable library to achieve the resize functionality. The requirement is to achieve the one-side resizing, which means if I resize from the right side of the div, only that side should expand to the right. The left side should stay in the same position.
I've read the docs and played around with the props but no luck. Thank you.
Here is my codesandbox.
You can use the handleClasses prop to apply css class names to particular sides. For example if you want to resize from only the right side, you can do the following:
.pointer-events-none {
pointer-events: none;
}
<Resizable
handleClasses={{
top: "pointer-events-none",
bottom: "pointer-events-none",
left: "pointer-events-none",
topRight: "pointer-events-none",
bottomRight: "pointer-events-none",
bottomLeft: "pointer-events-none",
topLeft: "pointer-events-none",
}}
>
<YourComponent />
</Resizable>
By excluding the right property in the handleClasses object you are disabling the pointer events on every side except the right side.
Your problem is the way you trying to combine Draggable and Resizable. As Resizable only changes the width of the container you must adjust the position(either with translate or left) when resizing from left or right to simulate div stays in place.
But instead of re-resizable I suggest using react-rnd. I think it is from the same author so the interface should be similar but this is already implemented there, you only have to use one component like this:
codesandbox
You can use react-rnd, which does basically what you're doing here behind the scenes - only in a working implementation. If it doesn't work out of box for you, then you can at least study its code.
https://github.com/bokuweb/react-rnd/blob/36d3506f91375a0b4dbade1187a61038d5c4892b/src/index.tsx#L636-L685
https://github.com/bokuweb/react-rnd
Do note that the library hasn't been updated in a long while - so if you rely on it, you're going to be on your own for ongoing maintenance.
How do I align helper text with other items in a Flexbox , flex-direction horizontal?
Its currently using Box with MUI text fields and selects. The first item below is shifted upwards due to helper text. Align-items center currently does not fix problem.
Following question does not apply, since its not moving other elements, just not aligned. Adding ErrorText to material-ui Textfield moves other elements
Update: When I do align-items: stretch, everything looks good, but now the buttons filter at the right is kind of sunk below. Is there a clean way of fixing this, without adding a margin top for the right button?
Try applying
align-items: start;
To the Box
We are working to make one of our responsive sites more accessible, but are struggling to get our heads around ARIA as it seems to go against the core principle of separating design elements from the HTML.
For example if an element is hidden in aria one would indicate it as aria-hidden="true". However most visibility is determined by media queries depending on screen size etc.
In other cases elements work completely different based on media queries. So at some sizes aria-haspopup="true" would be appropriate while on other resolutions the navigation is always visible.
Am I missing something, or are we at font tags all over again with this standard? Are we supposed to add / remove aria tags using javascript as appropriate?
Actually Kenneth, your question makes a lot of sense, and, yes - tooling for responsive sites is not ideal. I don't have an answer for you, but what I have to say is too long to be a comment...
Consider the following example:
You app has a menu button that opens a side drawer using a short sliding animation. Without a11y considerations, your job is easy (lets assume the drawer is on the left and has a width of 250px):
#media ... (min-width: 1000px)
#drawer {
left: 0;
}
#media ... (max-width: 999px)
#drawer {
left: -250px;
}
#drawer.opened {
left: 0;
}
(Not an exact syntax, add your own wizardy for the sliding animation)
To make this accessible, you'd have to do one of the following:
option 1
Don't use aria-hidden='true'. It's generally enough to hide the drawer using visibility:hidden or display:none. Of course, now you need to wait for the end of the sliding out animation to hide the drawer (or you
lose the animation).
option 2
Use aria-hidden='true'. You'll have to catch window resize and add / remove aria-hidden='true' when switching sizes (you lose the media query magic).
To sum things up, you're right. There's definitely room for improvement. This is especially true, considering the general shift to move stuff off of JS to keep things 60fps smooth.
You have to use the window.matchMedia function
For instance:
var mm = window.matchMedia("(min-width: 600px)");
mm.addListener(updateAriaHidden);
updateAriaHidden(mm);
var updateAriaHidden= function (obj) {
if (obj.matches) {
// set aria-hidden true/false when width >= 600px
}
else {
// set aria-hidden true/false when width < 600px
}
}
Using jQuery for instance, you can use the :hidden selector with a custom CSS class to set the aria-hidden attribute dynamically:
$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);
The use of the custom class make it easy to match the elements which would change based on your media queries
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!
I defined a fieldset while setting blank title. however, in browser, the fieldset has a expand/collapse icon in right-top corner, while i want have it in left-top corner? what I am supposed to do?
thanks!
You can get it on the left corner like any normal fieldset with a title with some trick. You can get what you need by using unicode for "Narrow No-Break Space". The unicode is U+202F. So in your code, you will have to set your title as:
title: '\u202F',
keep in mind that you cannot completely box the fieldset with this trick. Here is a small gap in the fieldset border on the right side of the collapse button. You could also use other unicode characters like \u200B,\u200C etc. But they all provided me with the same result.
You can get a more better result by removing the CSS style right-margin: 3px applied to the legned of fieldset. I haven't tried to do that though.