i am using this bootstrap masonry template: bootstrap masonry
and it is working fine but overlapps the cards on first load if i use the attribute "data-masonry" in my row.
<div class="row" data-masonry='{"percentPosition": true, "itemSelector": ".col-sm-6" }'>
i figured out that i have to use the imagesloaded function. for get this working i need to call the masonry from vanilla js instead the "data-masonry" attribut. But this is not working at all.
if i delete the attribute and add the js code the masonry is not working anymore.
<script>
var msnry = new Masonry('.row', {
itemSelector: '.col-sm-6',
percentPosition: true
});
</script>
</head>
<body>
<main class="container py-5">
<div class="row">
i appreciate any help. thank you in advance!
I created a gallery plugin, which collect images from server.
This plugin use jQuery 3.6.1, and bootstrap 5.2 (after v5 masonry is deprecated in BS)
The plugin create "coverimage" divs from the cover flagged images, and push these divs into a grid, and create "masonry" layout.
At first I can't find the solution for overlapping, main reason of the problem was the timing of "masonry" function call.
You have to call the "masonry" function after the images loaded and displayed.
$("img").load( function(){ $("#mason_grid").masonry({ itemSelector: ".cover_wrapper"}) });
"#mason_grid" is the parent div of gallery,
".cover_wrapper" is a div with an image.
For more info:
https://getbootstrap.com/docs/5.2/examples/masonry/
Related
I am trying to getByRole where I have an <li />, which is a child of a styled component.
The styled component is by default display: none, then under a min-width media query it's set to display: flex.
Running getByRole('listitem') works without the display: none but not with it, indicating that styled-components is telling the DOM that because it is set to display: none it doesn't exist.
This is despite the debug HTML output actually showing the <li /> being rendered:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff --></li>
</ul>
</div>
</div>
</body>
I have tried mocking the media query matching using jest-matchmedia-mock, with no luck.
I don't care about testing the media query or styles at all, so is there a way I can tell styled components to not apply the styles during testing?
I found a kind of solution which is a feature of dom-testing-library:
getByRole('listitem', { hidden: true })
This includes hidden items.
There is a commit detailing this change here: https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
I am building an electron app where I am loading an html file using this code in development:
<webview id="foo" src="/src/documents/example.html" style="display:inline-flex; width:100%; height:550px"></webview>
This works well in development but once the app is packaged it shows a blank page.I have researched around and it seems using __dirname might fix the issue.
I am still very new to electron and can't figure out how to reach this path (src="/src/documents/) using __dirname.
Any help will be highly appreciated.
I thought I would share the solution I found around this.Basically ,you need to create a route for the page you want to load like this:
{
path:'/example',
name:'example',
component: require('#/components/example').default
},
If you are using electron-vue,make sure the page extension is ".vue" and enclose the page content like this:
<template>
<html>
**Put the page content in here**
</html>
</template>
In my case,I wanted to go to the page by clicking on a button,so i used Vue-router like this:
<button type="button" class="btn btn-light"><a id="home"><router-link :to="{ name: 'example' }"> Button text </router-link></a>
</button>
Et voila!
I have a 'My Scores' view in my Node JS / Sails JS app and I'm using partials, one for a List View, and another one for a Grid View. When the user clicks the Grid or List View from the nav bar I'd like to be able to swap the UI with the given partial.
List view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/list-view')%>
</div>
Grid view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/grid-view')%>
</div>
Please advise.
No problem--just use a variable for the partial name, instead of hardcoding it:
<%- partial(viewName) %>
then in your config/routes.js:
"/listView": {
view: "list.ejs",
locals: {viewName: "../partials/list-view.ejs"}
},
"/gridView": {
view: "list.ejs",
locals: {viewName: "../partials/grid-view.ejs"}
}
That's assuming you're just routing directly to views. If you're using a custom controller action and res.view() to display your content, you'll put the viewName value in the second res.view() argument, like res.view("list.ejs",{viewName: "../partials/list-view.ejs"}).
Now, if you're trying to do this without reloading the page, then #tonejac has the right idea in his comment--either switch them using Javascript/CSS, or use AJAX to load content on-demand. Sails can only help on the backend!
Using Express with Don Park's HBS as the view engine, with the intention of using the same templating style for both client and server code. However I have run into a bit of a snag.
With the index.hbs shown here,
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<div id="place"></div>
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
{{#lines}}
<li>{{name}}</li>
{{/lines}}
</ul>
</script>
Heres what renders to the browser:
<h1>Express</h1>
<p>Welcome to Express</p>
<div id="place"></div>
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
</ul>
</script>
The Express View render process seems to have consumed the template block intended for use in the browser. As far as I can tell, the view renderer just takes the entire file.hbs as a string tempate to render, not distinguishing the script block from server view.
Any ideas/workarounds for this?
I'm using Handlebars in the same way and ran into the same problem.
I worked around it by storing this part:
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
{{#lines}}
<li>{{name}}</li>
{{/lines}}
</ul>
</script>
In a separate static file and then loading it via ajax after the page has rendered. This way my client-side template doesn't get mistakenly rendered by Express.
It would be nice though if there were a way to add a tag to let Express know to ignore blocks like that and leave them for the client-side.
If handlebars is truly compatible with Mustache, then this should work:
Change your delimiter first by putting this somewhere at the top of your template ( before any template placeholders )
{{=<% %>=}}
So now anything you want rendered by the server you will do:
<% foo %>
And anything you want rendered on the client like so:
{{ bar }}
More info is at the bottom of the Mustache manual here - http://mustache.github.com/mustache.5.html
For handlebars, uou can use backslash to escape the double braces, like so:
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
\{{#lines}}
<li>\{{name}}</li>
\{{/lines}}
</ul>
</script>
Press F5 in this example: DojoToolkit.
First the content is shown, and after that the layout gets into it's final state. In my application I want the opposite, so that the layout gets rendered, and after that the content is displayed. I don't want that 'jumping' phenomenon when loading. Is it possible to fix this somehow?
No, I don't think that there is such an option. Anyway, you could use a container div (with all the dojo layout elements in it) with initial state visbility:hidden, and after the page is loaded and parsed change it's visibility to "visible".
<div id="container" style="visibility:hidden">
<!-- dijit widgets inside the "container"-->
</div>
<script type="text/javascript">
dojo.ready(function(){
dojo.style("container:, "visibility", "visible");
});
</script>