I have a element that has gridstack initialised against it.
I want to save and reload my page, and i want the grid to be usable when the page is loaded. So when i load the page i want to re-initialise the gridstack element.
the trouble is it just adds duplicate classes into the element and its children.
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: none;"></div>
also i get multiple classes added to the root element:
class="grid-stack grid-stack-instance-4036 grid-stack-instance-4052"
so what is the best way to re-initialise the grid?
So here's my solution to this issue:
var stacks = $(".grid-stack");
stacks.each(function () {
var grid = $(this).data("gridstack");
if (typeof grid !== "undefined") {
grid.destroy(false);
}
//use regex to remove the multiple classnames
$(this).removeClass(function (index, className) {
return (className.match(/(^|\s)grid-stack-instance-\S+/g) || []).join(" ");
});
$(this).find(".ui-resizable-handle").remove();
});
Related
I've been having trouble understanding the best way to create a reusable Modal component in Svelte. I want to have the Modal component where I can pass in other components easily, and in a scalable way. When I click the background, it should destroy the modal and the content inside.
I've created a REPL here with working version but would like to know if this is a convoluted way to achieve this:
https://svelte.dev/repl/9180dd40e7304fc78d175cf4535a6423?version=3.38.2
This method works but I don't know if this is a suggested way (I'm new to both Svelte and component libraries).
App.js
<script>
import Modal from './Modal.svelte'
import Component1 from './Component1.svelte'
import Component2 from './Component2.svelte'
import {showModal} from './store.js'
let showC1, showC2 = false;
function toggleModal() {
$showModal = !$showModal;
}
function toggleC1() {
toggleModal();
showC1 = !showC1;
}
function toggleC2() {
toggleModal();
showC2 = !showC2;}
</script>
<button on:click={toggleC1}>
Toggle Component 1
</button>
<button on:click={toggleC2}>
Toggle Component 2
</button>
<Component1 {showC1} on:click={toggleC1} />
<Component2 {showC2} on:click={toggleC2} />
Modal.svelte
<script>
import {showModal} from './store.js'
</script>
{#if $showModal}
<div on:click|self class='modal'>
<div class='content'>
<slot />
</div>
</div>
{/if}
<style>
.modal {
background-color: rgba(0, 0, 0, 0.589);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.7;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background-color: white;
width: 20em;
height: 20em;
}
</style>
Component1.svelte
<script>
import Modal from './Modal.svelte'
export let showC1;
</script>
{#if showC1}
<Modal on:click>
<div>
This is some content...
</div>
<button on:click>
close
</button>
</Modal>
{/if}
Component2.svelte
<script>
import Modal from './Modal.svelte'
export let showC2;
</script>
{#if showC2}
<Modal on:click>
<div>
...And some more content
</div>
<button on:click>
close
</button>
</Modal>
{/if}
store.js
import { writable } from "svelte/store";
export const showModal = writable(false);
I figured out an answer to my question: using svelte:component to make a dynamic component. REPL here:
https://svelte.dev/repl/4624e3f0f3684ddcb2e2da10592f6df1?version=3.38.2
I am trying to learn CSS, and find myself stuck. I am hoping you can help.
I have created a section and I want this to be a flex container. I have nested divs in the section for each item I want to display in the container. I have added a class to both the section and the parent div, but I cannot get the display: flex property to apply to the div. When I inspect in Chrome as I have it now it reflects display: block. If I try to select the div.class it will not style. Thanks!
HTML:
<section class="headline">
<div class="Details">
<div>
<h4>headline 1</h4>
<p>some content included.</p>
</div>
<div>
<h4>headline 2</h4>
<p>some more content.</p>
</div>
<div>
<h4>headline 3</h4>
<p>more content</p>
</div>
<div>
<h4>headline 4</h4>
<p>end content</p>
</div>
</div>
</section>
.headline {
color: white;
background-color: black;
display: flex;
}
.details {
display: flex;
}
I figured it out - the class .Details was in the html with a capital d and in the stylesheet with a lower case d. :)
In my website the Google adsense ad is overlapping my drop down menu even I tried to fix it by using z-index property. I applied ul z-index:99999 and Google adsense ad div -99999 z-index. But it doesn't make any difference. What will be the working solution? Here is my code:
HTML:
<div id="nav_bar"> <!-- NAV BAR STARTS -->
<ul id="nav"> <!-- NAV STARTS -->
<li><a class="active" href="providers">Providers</a>
<ul>
<li>Actrix</li>
<li>Digital Island</li>
<li>Farmside</li>
<li>Flip</li>
<li>Inspire</li>
<li>Maxnet</li>
<li>Orcon</li>
<li>Slingshot</li>
<li>Telecom</li>
<li>TelstraClear</li>
<li>Vodafone</li>
<li>Woosh</li>
<li>Xnet</li>
</ul>
</li>
<li>Compare</li>
<li>Reviews</li>
<li>Contact Us</li>
</ul> <!-- NAV ENDS -->
<div style="clear:both;"></div>
</div>
<div id="google_ad_banner">
<!--<img src="images/banner-ad.png" class="responsive" />-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle responsive-ad-unit-1"
style="display:block"
data-ad-client="ca-pub-xxxxxx"
data-ad-slot="xxxxx"
data-ad-format="horizontal">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
CSS:
#nav_bar ul li ul {
display: none;
z-index: 99999;
}
#google_ad_banner {
z-index: -99999;
}
try using only id of top hierarchy and set position to relative
#nav_bar {
position: relative;
z-index : 999999;
}
The following is the structure of my layout in Bootstrap 3.2:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
<div class="col-xs-6">
<!-- I want only this column to be fluid. -->
</div>
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
As you can see in psuedo-code comments, I want only the middle column to be fluid according to the screen size.
Is it possible in container-fluid fashion of Bootstrap? Or I should go through other ways?
There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a few ways
Use flexbox (the best way) - Demo.
.row {
display: flex;
}
.fixed-side-column {
width: 250px;
}
.fluid-middle-column {
flex-grow: 1;
}
Use calc() (or the JavaScript equivalent) keeping in mind browser support - Demo
.row > div {
float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
width:250px;
}
.fluid-middle-column {
width:calc(100% - 500px);
}
Use absolute positioning and padding on the middle element to remove the need for any calculations - Demo
You'd have to change the markup some
<div class="container-fluid">
<div class="row">
<div class="fluid-middle-column">
<!-- I want only this column to be fluid. -->
</div>
<div class="fixed-side-column">
<!-- I want this column to be fixed. -->
</div>
<div class="fixed-side-column right">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
/* CSS */
.fixed-side-column {
width:250px;
float:left;
}
.right {
float:right;
}
.fluid-middle-column {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
padding: 0 250px 0 250px;
}
You'll need to add custom media queries to handle what happens when the screen is getting small.
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>