I'm using http://photoswipe.com/ here: http://www.michelperezphoto.com/.
Trying to add padding or margin so that the image displayed in lightbox does not occupy the whole width and or height of screen...
Tried this:
.pswp__item {
margin: 5%;
}
But now the lightbox image is not centered ...its slightly offcenter to the right...
Any insight would be greatly appreciated...
Cheers.....
I have a border-radius and drop shadow applied to my images, using the margin technique above masked my images and didn't look good. I found a better solution:
.pswp__img {
transform: scale(0.9);
}
In case this helps someone, I got desired effect using this:
#media (min-width: 900px) {
.pswp__item {
margin: 5% 5% 5% 0%;
}
}
Now there are two options for lightbox. padding and paddingFn https://photoswipe.com/options/#padding, https://photoswipe.com/options/#paddingfn
For example
const lightbox = new PhotoSwipeLightbox({
// ...
paddingFn: (viewportSize, itemData, index) => {
return {
top: viewportSize.x > 600 ? 82 : 0,
bottom: viewportSize.x > 600 ? 100 : 0,
left: viewportSize.x < 600 ? 10 : 0,
right: viewportSize.x < 600 ? 10 : 0
}
}
})
Related
I am using Angular Material Data table in my application. I need to display multiple columns with a horizontal scroll table. I am facing an issue with the table row border. It's not displaying an entire width of the row. Please check the attached image for your reference. Please help me to resolve this issue.
Please check the Link for Code reference
https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html
Thanks in Advance.
Both header row and column rows are display flex by default,
changing it to display inline-flex will fix above issue
.mat-header-row, .mat-row {
display: inline-flex;
}
Use display grid in case of ipad and mobile device screens
mat-table {
display: -ms-grid ;
display: grid;
}
This might help someone else as this is an old post. Please refer to https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css
Just add the following to your your-comp-component.css or your-comp-component.scss
.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}
Best resolve I did overcome this problem.
Hold dynamic data column with css
columns = [
{columnDef: 'select', width: 75},
...........
]
Recalculate css min width if you implement a show/hide function
recalculateCss() {
let cellWidth = 0;
for (let i = 0; i < this.selected.length; i++) {
const cell = this.selected[i];
const column = this.columns.filter((value, index) => value.columnDef === cell);
cellWidth += column[0] ? column[0].width : 0;
}
this.minWidth = cellWidth;
}
Add css in both mat-header-row and mat-row
[style.min-width.px]="minWidth"
You have style properties that are working against each other. You've set min-width: 150px; for each column, and you have 13 columns which totals 1950px. Plus you've set width: 1123px; on each row which is (obviously) less than 1950px. Also, you set max-width: 1123px; - same width as your rows - on the table itself, but the table needs to be wider than the row in order to show the scrollbar. If you fix those problems, the border will display properly. Try setting just your row width and leaving out the table and column widths settings.
Material uses a flex layout so you could add align-self: stretch; to the columns CSS. This should stretch the auto-sized items to fit the table.
Edit
Stackblitz
Removing your header and cell width element helps. You want to set your rows to have a 100% width then set a desired minimum.
.mat-row, .mat-header-row {
min-width: 1123px;
width:100%;
}
Guys this is will help you solving such issues
You have to start using :
width: max-content;
.mat-row,
.mat-header-row {
min-width: 1123px;
width: 100%;
width: max-content;
}
.mat-table {
overflow: scroll;
max-height: 500px;
}
.mat-cell,
.mat-header-cell {
min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
top: 0;
position: sticky;
z-index: 1;
background-color: inherit;
text-align: center;
}
find browsers support : https://caniuse.com/#search=fit-content
You need to set the expected with of the table in mat-table{min-width} plus the mat-row left and right paddings (24px each).
In your example case:
.mat-table {
min-width: calc((13 * 150px) + 48px);
}
or
.mat-table {
min-width: 1998px;
}
Hope this helps!!!
Try to use below styling. It helps to render data & borders correctly when more columns in mat-table. (horizontal scrolling issue resolved)
.mat-header-cell{
background-color: inherit;
}
I'm using photoswipe with disabled zoom, like suggested here, but also want to avoid very landscapish images to reach beneath the prev/next arrows. Is there an easy way to achieve this?
Just found a solution, by
1) giving "padding" to the .pswp__item, like so:
.pswp__item {
left: 50px;
right: 50px;
}
2) updating the horizontal viewport size before resize:
pswp.listen('beforeResize', function(){
pswp.viewportSize.x = pswp.viewportSize.x - 100;
);
I can't comment on #johjoh's answer, so I'm going to copy it here and add the 3rd step required to get this working if you are using PhotoSwipe's getThumbBoundsFn.
1) giving "padding" to the .pswp__item, like so:
.pswp__item {
left: 50px;
right: 50px;
}
2) updating the horizontal viewport size before resize:
pswp.listen('beforeResize', function(){
pswp.viewportSize.x = pswp.viewportSize.x - 100;
);
3) Ensuring the getThumbBoundsFn properly calculates the x value by subtracting one side (50px in this example) from your calculated value:
bounds = {
x: {x} - 50,
y: ...,
w: ...,
}
I've been trying to using jQuery resizable to resize an element in a container that is scrollable. I need to be able to make the element larger than what fits in the viewport, so therefor the page must scroll during the resize. How do I do that?
Note that the element is also draggable but not by the same handle (I'm not sure if that will affect the solution?)
When I've tried I get an issue with the handle which doesn't follow the mouse when I scroll the page.
First when I resized the element and drags the mouse down, the page didn't scroll. so therefor I've added the following (which might not be correct) on the resize event of the resizable element to scroll when the handle gets close to the upper or lower border:
resize: (event, ui) => {
var container = $(".container");
var pos = ui.originalPosition.top + ui.size.height;
var currentH = container.outerHeight() + container.scrollTop();
if (pos+20 >= currentH) {
container.scrollTop(pos + 20 - container.outerHeight());
}
if (pos-20 <= container.scrollTop()) {
container.scrollTop(pos-20);
}
}
this makes the page scroll but, then I get the problem:
That the handle no longer follow the mouse. And the longer I scroll the longer from the cursor the handle is. I've recreated this issue here based on TJ VanTolls fiddle http://jsfiddle.net/tj_vantoll/YwMXS/:
$('#inner').resizable({
containment: '#outer',
handles: 'all'
});
body { padding: 20px; }
p { line-height: 1.5; margin-bottom: 20px; }
#outer, #inner {
border: 1px solid black;
}
#outer {
width: 400px;
height: 300px;
overflow-y: scroll;
}
#inner {
height: 200px;
width: 200px;
top: 50px;
left: 50px;
}
#content {
height: 2000px;
width: 200px;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
When scrolling during resize the handle does no longer follow the mouse.
To recreate: start resizing and during the resize scroll the parent.</p>
<div id="outer">
<div id="inner"></div>
<div id="content"></div>
</div>
So my Question is, do you know a way to fix my first problem without causing the second or if there is a way to fix the second issue?
Thanks in advance!
i know it's a bit late but here's what works for me, the issue is that your css is centering the element so you'll need to double the width and height of the resized elemnt to keep in sync with the mouse:
resize: function (event, ui) {
var newWidth = ui.originalSize.width + ((ui.size.width - ui.originalSize.width) * 2);
//restrict min size if you want
if (newWidth < 50) {
newWidth = 50;
}
var newHeight = ui.originalSize.height + ((ui.size.height - ui.originalSize.height) * 2);
//restrict min size if you want
if (newHeight < 50) {
newHeight = 50;
}
//constrain this to the immediate parent
var parent = $(this).closest(".my-container");
if (parent.length) {
$(this).width(newWidth).position({
of: parent,
my: "center center",
at: "center center"
});
$(this).height(newHeight).position({
of: parent,
my: "center center",
at: "center center"
});
}
}
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).
We have an application which is implemented with slide up animation already. But, now we want to change that to slide right animation. We want to display a slideshow like display for the content. What all i need to change in the existing code, to do so?
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption')) ?
$('#gallery a:first') : current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({
opacity: 0.0
})
.addClass('show')
.animate({
opacity: 1.0
}, 1000);
//Hide the current image
current.animate({
opacity: 0.0
}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({
opacity: 0.0
}, {
queue: false,
duration: 0
}).animate({
height: '1px'
}, {
queue: true,
duration: 300
});
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({
opacity: 0.7
}, 100).animate({
==> height: '20px'
}, 500);
//Display the content
$('#gallery .content').html(caption);
}
This code, slides up the content. I tried placing,
right: '700px', in the line marked with ==>
In that case, it appeared like, the second content alone came from right to left.
Any help is greatly meant.
Thanks
In line 42 try replacing the line height: '1px' with width: '1px'. Just a thought, cant guarantee it will work.