I'm trying to build a generic Tabs component for my project with Svelte and TailwindCSS. When a tab is selected, I'd like the current contents to move as if they where being dragged by the new contents.
For whatever reason, when the transition starts, the current contents are clipped to an unknown height (it looks like it's 50% of the height but can't tell for sure and it always seems to be the same one) and I can't figure it out what it is causing it. What's weirder is that the new contents are not clipped despite having a similar animation.
The code for the tabs component:
<div class="grid grid-cols-1 grid-rows-[30px_auto] h-full overflow-x-clip">
<ol class="flex flex-row">
{#each tabs as tab, idx}
<li class="mr-10">
<button on:click|preventDefault={selectTab(idx)}>{tab.name}</button>
</li>
{/each}
</ol>
{#key selected}
<div class="overflow-y-auto h-full min-h-full"
out:fly={{
x: Math.sign(selected - previous) * -100,
y: 0,
duration: duration / 2,
easing: cubicIn
}}
in:fly={{
x: Math.sign(selected - previous) * 100,
y: 0,
duration: duration / 2,
delay: duration / 2,
easing: cubicOut
}}
>
<Products products={tabs[selected].products} />
</div>
{/key}
</div>
REPL
Here it is a GIF showing how it currently looks:
Please, notice how it always cuts the contents to the 6th element for unknown reasons.
How can I fix this clipping?
The container of the transitioning element has a grid layout.
During the transition the previous and next tab are both within said container, causing another grid row to be added, so the height of the tab content will be halved.
Wrap the transitioning element in a separate element, so you do not get multiple elements as grid children:
<div ...>
{#key selected}
<!-- Animated element here -->
{/key}
</div>
REPL
There are also transition events that can be used to set some local state and apply additional classes during the transition to help with layout issues.
Related
I have a react component that renders two sets of input boxes and buttons. I want to make the 'Set # Results' input box smaller, but when I modify the width property in the TextArea component the Button component does not shift over. In fact, when I inspect the element it still highlights the invisible space between the button and the input box so something is still there.
some react component code....
{
return (
<Window>
<div style={{ display: 'flex' }}>
<TextArea/>
// add some marginRight so that there is space between the two input/submit sections
<Button style={{ marginRight: '0.75em' }}>Search</Button>
// setting width makes the text area smaller but does not shift the button over
<TextArea style={{ width: '40%' }} />
<Button>Set # Results</Button>
</div>
</Window>
);
};
How can I change the width of the second input area while also having the button to the right of its shift over and touch the input area like the first group on the left?
I wonder whether it's possible for DivIcon to have a dynamic size.
The context:
On my map, hovering over a country will trigger a tooltip with the country's name.
I also have several DivIcons, with the following code:
folium.Marker(
location=[lat, lon],
icon=folium.DivIcon(
html='''
<div style="background-color: red; display: inline-block;">
<span>
{region_name}:
<br />{region_info}
</span>
</div>
''',
icon_size=(100, 100),
icon_anchor=(0, 0),
)
).add_to(map)
Because of the variation in region_names and region_infos, the width of the content varies between 50 and 90 pixels. I want my text to be displayed on two lines and the div to fit its content: the display: inline-block property in the html allows me to do this, even if my icon_size is constant.
But the problem is that the size of the DivIcon affects the tooltips: I can have a 70px-wide block with content, but an area of 30px next to it which doesn't display as a block but still counts as that block. So if I hover out of the visible block, instead of the tooltip appearing with some country's name, nothing happens. This is especially problematic when this area covers a bunch of small countries.
What I'd like to happen is for the DivIcon to fit to the html within, or to have some kind of dynamic behaviour. I have tried doing icon_size=(10, 10) or removing icon_size, but the block just shrinks to fit to the longest word in the content. I have tried to go through the code for folium.DivIcon and up the inheritance tree (branca.MacroElement, branca.Figure, etc.), but wasn't able to get control of this behaviour.
Any suggestions welcome.
I've been reading numerous articles on side-by-side divs. There's something subtly wrong with what I'm doing that's preventing it from working. Ideally, I want to have my 3 divs appear on one line, each occupying a fixed amount of space. Something like this [15%][60%][25%]
The middle [60%] div is a progress meter bar. I do this by having a div within a div and then using angular ng-style set the expression for the percentage width of my meter.
The progress meter part is working, but I cannot seem to put it all together on one line.
<div ng-repeat="rec in records">
<div>
Items
</div>
<div ng-style="$scope.outerObj">
<div ng-style="rec.innerObj"></div>
</div>
<div>
{{rec.complete}} of {{rec.number}}
</div>
</div>
The $scope.outerObj is just the following expression:
$scope.outerObj = {
'display': 'inline-block',
'border-style': 'solid',
'width': '220px'
};
NOTE - you may ask (like I did), "why can't I just make that outerObj a class and reference it from the outer div like this: <div class="outerObj">? If I do, then the outer div border disappears and you don't get the sense of a progress meter. I could only get it to work by making it also an ng-style.
The rec.innerObj looks like this:
rec.innerObj = {
'width': (rec.complete ? (rec.complete / rec.number)*100 : 0) + '%',
'background-color': 'blue',
'height': '10px'
};
So with all this, I have never been able to get the full combination of what I want:
Item [progress meter] X of Y
I've changed the display from 'inline-block' to just 'inline' and that puts things all on one line, but then my progress meter is all screwed up.
So many tries with different combinations and I've never got it to work, thus turning to the experts here.
It seems to me that using ng-repeat on swiper slides disables the possibility to use slides within slides. See JsFiddle link.
It contains 4 horisontal slides where slide 2 contains a vertical slide with 2 slides.
It works fine, but if I change the HTML
<!-- This works:-->
<div class="swiper-slide">
To:
<!-- This works:-->
<div class="swiper-slide" ng-repeat=”let in letArr”>
Then I get (as expected) 5 horizontal slides where slide 2 now are two slides: slide 2a and 2b. But I do not get any vertical slides (which I expected) on slide 2a and 2b. The pagination bullets for vertical slide selection are visible but they do not respond. Is that simply working as designed or am I missing something?
I can expand manually in the HTML my outer slide gallery but it will make maintenance difficult and errorprone.
90% of the time when my sliders don't work, but are there or work partially (like the pagination buttons are built), a simple swiper.reInit() works.
With angular, in order to catch when the last slide is created in the DOM, I make a quick swiperSlide directive and do something like this:
.directive('swiperSlide', function() {
return function (scope, element, attrs) {
if (scope.$last) setTimeout(function () {
swiper.reInit(); //make sure you initialize your swiper to a variable called "swiper" or replace "swiper" with whatever your swiper variable is
}, 1);
};
});
I've implemented an AngularJS directive to make elements draggable and after that, I applied it to a div element that I want to use as floating menu for my website.
The problem that I've got appears when I drag a draggable div that have been placed into an element that has specific padding values, also, it shows up when the draggable div have set margin attributes. Depending on those attribute values, on mouse move, my draggable div jumps from the original position to some offset and I don't want it to happen.
I created an example to demonstrate this issue, you can see the link below.
And here is my question: How can I make the movement of my draggable divs smooth, without removing padding/margin attributes?
http://plnkr.co/edit/ZwiDo9gx5nAcz4Z0daTo?p=preview
<body style="padding-top:20%">
<div class="col-lg-2 col-sm-3 col-xs-4" style="background-color:black;color:white;z-index:2;" ng-draggable="vm.dragOptions">
<span class="col-xs-12 modal-header divheader" style="cursor:pointer">
List of objects
</span>
<div style="margin:0px;" class="padding">
...
</div>
</div>
UPD
The next snippet provided by #user6028084 helped to solve the issue in the plnkr, but in an actual app it screws up my css styles, so, anyone who comes with another solution is very welcome.
.ng-isolate-scope{
position:absolute;
}
If you remove the padding-top:20% it works as you pointed out.
So if you want to keep that then you must compensate by that amount.
It works perfectly on my browser if I add the corresponding amount (117 px in my case) to the script
Changing the line 56 in your script to the following makes it work no matter what resolution the browser is at - full screen or minimal:
startY = e.clientY - elem[0].offsetTop +117;
Edit: alternatively just remove the offset altogether
startY = e.clientY;
Edit2:
I have changed the way it was getting it's coordinates. The values for startX and startY were incorrect originally as was the assignment of x and y in the mousemove event.
This is the edited plunker for a full working version:
plunker