I am new to cytoscape.js and I have encountered a strange behavior when I have a div with my network (cy) and a canvasXpress element in the same div. The body structure is like so:
<div class="col-sm-12">
<div class="col-sm-6 result box" id="divHeatmap">
<!-- This div is replaced by a canvasXpress element-->
<div><canvas id="canvas1"></canvas></div>
</div>
<div class="col-sm-6 result row" style="padding-left:30px;" id="divNetwork">
<div class="col-sm-12 row result box" style="padding-left:30px; ">
<div class="result row">
<div id="cy"></div>
</div>
</div>
</div>
</div>
cy is created correctly (it works in every other case tested) as is the canvasXpress element. The trouble starts when my pointer hovers over the canvasXpress element and then returns over the cy network. When this happens the layers of the network seem to be broken. I can click the nodes but they either disappear or get stuck on the pointer (unless I right click). Moreover, the edges point to random points when i click at anything. My suspicion is that the canvasXpress element messes with the z-index of the cy layers. Do you have any idea what might be happening? Thank you for your time!
Don't share the same div for multiple lib containers. That's not a good idea in general.
Do this
some div
viz A div
viz B div
And just stack the A and B div on top of each other with CSS.
Related
As I am displaying the notes on my note taking app, which is a grid, if I have a short note then there is empty space left. How can fill it up by pushing the cards below to go up and stick to card on the top. I am using bootstrap's grid layout for displaying the cards:- See here
I also have the screenshot of how the cards are looking currently.
You can see that there is a gap between the cards and I want to fill it up
Also here is the template of a single card
let cardTemplate = `<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">${title.value}</h5>
<p class="card-text">
${content.value}
</p>
Show More
Delete
Edit
</div>
</div>
</div>`;
and i am putting this card in a div whenever a button is clicked
<!--displaying notes-->
<div class="row"></div>
I have not done any css on the div since I like the looks as it is.
Thanks for reading my query!
I think what you're looking for is masonry. It's a grid property that allows that exact behavior that you are looking for. It can be done with grid-template-rows:masonry;. Here is a link that would tell you exactly how you can do it.
Try adding class h-100 inside<div class="card h-100">** or h-50 or h-25,which makes an element or div as tall with height utilities. it is readily available in bootstrap.
refer this link for getting more information about pre-defined sizes classes in bootstrap
I have been messing with creating a site (with shopify) and want to create a box-shadow under two elemtens which occur more than one time on the site. Creating a wrapper div is not working.
I tried working with wrap and wrapAll but my results are, that wrap is wrapping the 2 divs but displaying a dropshadow underneath each element, while WrapAll wraps all elemtns and positions them in one giant div.
I am new to css and js but my guess is to
loop over the parent divs
get the 2 child divs
wrap them via wrapall
but i dont know how.
<div class="grid-view-item product-card">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">Testproduct</div>
<dl class="price price--listing">...</dl>
</div>
$('.product-card__title,.price--listing').wrap('<div class="child"></div>');
(js code wraps all into a single big div)
Thank you for any answers.
You can replace the code
like this:
<div class="grid-view-item product-card">
<div class="inner">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">Testproduct</div>
<dl class="price price--listing">...</dl>
</div>
</div>
$('.inner').wrap('<div class="product-card-inner"></div>');
and for box shadow you can give shadow to .product-card
I have fullcalendar.js wrapped in a div (content) (I use bootstrap3 to set the size).
This content area of the page is currently setup to cover only 2/3rds of the left side of the page and the other 1/3rd of the page on the right side, is blank.
The right side remains blank/empty until a button is clicked and then ko will slide in a side form (id="sideform") to take up the empty space.
What I need to do is instead of starting with a page split 70%/30% where the 30% is blank, I would like the content area to actually start at 100%/0%.
Then if a sideform is in place, I want to content area re-size from the 100%/0% to the 70%/30% of the page, else 100%/0%.
Since there are a lot of pages like this and after watching John Papa's videos, I believe creating a handler would be the best way to go.
For the last couple of weeks I have looked at and tried to modify examples to do what I need, but with no luck.
The contents col-md-9 and col-lg-9 represent 70% of the screen width and sideforms col-md-3 and col-lg-3 represents the other 1/3 of the page.
The page is currently setup like...
<div class="container">
<div id="**content**" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="calendar" data-bind="fullCalendar: {}"></div>
</div>
<div id="*sideform*" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 pull-right">
<!--ko router: { transition:'entrance', cacheViews:false,activate: true }-->
<!--/ko-->
</div>
</div>
Anyone have any ideas?
Thank you
First, add an observable, sideFormShowing, to the appropriate section of your ViewModel, and initialize it to false.
Second, add data-bind="if: sideFormShowing" to the *sideform* div (BTW, I don't think asterisks are allowed as leading characters, if it all, in HTML ids).
Third, take col-md-9 col-lg-9 out of the class attribute on your **content** div, and add the following binding to it:
data-bind="css: {'col-md-9 col-lg-9': sideFormShowing,
'col-md-12 col-lg-12': !sideFormShowing()}"
Don't forget the quotes around the class-name lists and the parens in the second entry.
Now whenever sideFormShowing is false the content div will take up 100% and the sideform div won't be rendered; when it's true the content will shrink to 70% and the sideform will be rendered (I used an if binding rather than visible because you presumably don't want the virtual-element bindings to run unless the sideform should be shown.
I have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/
I'm building a seating application using jQuery. I have tables with chairs around them, which may have guests seated at the chairs. Each table has a wrapper div which is draggable. Inside the table are any number of chair div's. Inside any chair div a guest may be seated. Guest are also a div which is nested inside the chair div. Here is a sample for the markup of one such table. This table has 8 chiars with two guests seated at the first two chairs.
<div id="table-wrapper-1" class="table-wrapper table-type-0 ui-draggable">
<div id="table-1" class="seating-table">
<div class="seating-table-name">Table 1</div>
</div>
<div id="chair-1-0" class="chair chair-pos-0 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-1" class="chair chair-pos-1 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-2" class="chair chair-pos-2 table-chair-1"></div>
<div id="chair-1-3" class="chair chair-pos-3 table-chair-1"></div>
<div id="chair-1-4" class="chair chair-pos-4 table-chair-1"></div>
<div id="chair-1-5" class="chair chair-pos-5 table-chair-1"></div>
<div id="chair-1-6" class="chair chair-pos-6 table-chair-1"></div>
<div id="chair-1-7" class="chair chair-pos-7 table-chair-1"></div>
</div>
The div.table-wrapper is a draggable and so are the div.guest's. The idea is that you can drag a guest from one chair to another, or drag the entire table to a different location. The problem I am having is in IE, where if you click and drag a guest, both the guest and the table drag at the same time. Does anyone know how I can fix that?
Thanks,
~Matt
After a lot of digging, I seem to have found a solution for now. It involves hacking ui.draggable.js, but currently it doesn't look like there is any other way.
To see my full answer, have a look at my post on the jQuery forum:
http://forum.jquery.com/topic/draggable-nested-inside-draggable-drags-both-when-dragging-child-in-ie
Hope this helps someone with a similar issue.
Thanks,
~Matt