I am a designer, new to mapbox. (So, I may need things explained to me like I'm a four-year old, pretty please).
I created a map with labels using their plain editor (not Studio) and placed it on my page here.
I want to add a custom legend, possibly in a custom position. I tried using their example, but my map doesn't even show up at all. When I comment out mapbox's CSS link ref in the head, it almost works, but shows all wacky. See that one here.
Here's the added HEAD code per mapbox's legend example that I have on my page:
<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<style>
body {
margin:0;
padding:0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
.legend label,
.legend span {
display:block;
float:left;
height:15px;
width:20%;
text-align:center;
font-size:9px;
color:#808080;
}
</style>
Then here's the BODY code I added for the mapbox elements.
<div id="legend" style="display:none;">
<strong>The Title or Explanation of your Map</strong>
<nav class="legend clearfix">
<span style="background:#F1EEF6;"></span>
<span style="background:#BDC9E1;"></span>
<span style="background:#74A9CF;"></span>
<span style="background:#2B8CBE;"></span>
<span style="background:#045A8D;"></span>
<label>0 - 20%</label>
<label>40%</label>
<label>60%</label>
<label>80%</label>
<label>100%</label>
<small>Source: Name of source</small>
</nav>
</div>
<div id="map"></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibW1hcm1vbCIsImEiOiIzZTkxMDM4ZDI5MDZiMDY2MzFlOGQ4YzZiYmY2NmMzOSJ9.Cr8JtBNsYIl3LTxYZkaFPA';
var map = L.mapbox.map('map', 'mmarmol.2a3461fc');
map.legendControl.addLegend(document.getElementById('legend').innerHTML);
</script>
All other code is Bootstrap for the rest of my page. It seems like I have a CSS issue, or is it a js issue? Any ideas?
Thank you!
Related
Rendertron is loading my webpage, but it is prefacing the CSS file (bundled app.css via webpack) with the following PRE tag and HTML tags:
<html><head><base href="https://redacted-for-security.com/css"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">#font-face{font-family:swiper-icons;font-style:normal;font </pre></body></html>
This obviously breaks the page layout for the render.
Does anyone know why it is doing this?
Many thanks
This is because of the <head>.
The CSS property page-break-after: avoid doesn't work in any WebKit or Mozilla based browsers, so you can alternatively use the page-break-inside: avoid over the heading and an acceptable amount of the text to prevent this page break:
CSS
<style type="text/css">
.nobreak {
page-break-inside: avoid;
}
</style>
HTML
<div class="nobreak">
<h3>Heading!</h3>
<p>Some things:</p>
</div>
<ul>
<li>Thing one</li>
<li>Thing B</li>
<li>Thing 4</li>
</ul>
Relvant sources:
How do I avoid a page break immediately after a heading
I'm using vue-good-table and I'm trying to change the labels area in the selected row box. Looking at the documentation the only slot available is the selected-row-actions.
Is there a way/slot to edit the left side with the labels and 'clear' action? (not just their text)
Update:
As mentioned earlier there isn't any direct configuration from library to achieve what you want to achieve. CSS only solution will look like following, take a look at this codesandbox:
<template>
...
</template>
<style>
.vgt-selection-info-row {
font-size: 0 !important;
}
.vgt-selection-info-row__actions.vgt-pull-right {
visibility: visible;
float: none !important;
}
</style>
Original answer:
There isn't any thing like that supported from the library out of the box. You can use table-actions slots to display table level actions on top right or can use selected-row-actions slot to display actions for selected row on the selection info bar like:
<div slot="selected-row-actions">
<button #click="countSelected()">Sected Row Action</button>
</div>
<div slot="table-actions">
Table Actions
</div>
That being said, its HTML we are talking about (yay!) so nothing is preventing you from overriding default styles of the library.
You can use following style to use selected-row-actions slot and move slot next to clear button:
<template>
...
<div slot="selected-row-actions">
<label>Label 1</label>
<button #click="countSelected()">Action 1</button>
<label>Label 1</label>
<button #click="countSelected()">Action 2</button>
</div>
...
</template>
<style>
.vgt-selection-info-row__actions.vgt-pull-right {
float: none !important;
margin-left: 5px;
display: inline;
}
.vgt-selection-info-row__actions.vgt-pull-right div {
display: inline-block;
}
</style>
PS: There is already a closed issue BUG 519 for the library if you like to reopen it and track.
There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but it doesn't work.
this is the code, showErrorMsg is false
<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
<i></i>
<p v-text="errorMsg"></p>
</div>
How to fix this?
Just include this code to your css file
[v-cloak] { display:none; }
http://vuejs.org/api/#v-cloak
Usage example:
<div class="xpto" v-cloak>
Hello
</div>
This directive will remain on the element until the associated Vue
instance finishes compilation. Combined with CSS rules such as
[v-cloak] { display: none }, this directive can be used to hide
un-compiled mustache bindings until the Vue instance is ready.
http://vuejs.org/api/#v-cloak
I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:
[v-cloak] {
display: none !important;
}
.my-class {
display: table-cell;
}
Vue.js - 2.3.4, I added the v-cloak on the app container, adding this on the parent container, I find your not repeating the code keeping it DRY.
HTML:
<div id="app" v-cloak>
Anything inside gets the v-cloak
</div>
CSS:
[v-cloak] {
display:none;
}
Codepen Example:
https://codepen.io/Frontend/pen/RjoKQm
I fixed this problem by rewriting the CSS and adding a class in the CSS file
CSS:
[v-cloak] .v-cloak--hidden{
display: none;
}
HTML:
<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
<i></i>
<p v-text="errorMsg"></p>
</div>
If you are using CDN to get Vue and using Bootstrap CSS then the reason might be you are loading the Bootstrap CSS in the bottom of the body tag, moving it back to the head tag worked for me. Make sure that you keep that vueJS file in the button as it is.
<HTML>
<head>
All link and script tag here
</head>
<body>
<div id='app' v-cloak>
{{ something }}
</div>
<script src="app.js"></script>
</body>
I have a scenario where I've got a search form and below, the results with a v-if block, waiting for submit.
I changed the v-if to v-show, that seemed to help. I tried the v-cloak--hidden class but didn't work either (v-cloak is already styled to display: none). What did work apparently was to set the data results container display style to none and then when submitting the form (in the processForm method), setting the display to block and show all the results.
processForm() {
// reset page number on new search
document.getElementById("data-container").style.display="block"
this.pageNumber = 1;
this.remoteRequest();
},
Without that change, on a full page refresh I could still see the moustaches coming up. Here the full HTML page, simplified.
<div id="app" v-cloak>
<main class="main-section">
<form method="POST" class="p-4 text-center" #submit.prevent="processForm">
<button type="submit" name="button" class="btn btn-primary">
Find
</button>
</form>
<!-- Results -->
<div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
<div class="row">
<div class="col">
<div id="recordsContainer" v-show="totalInScreen > 0">
<div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
<div class="card-body">
<div class="row">
<div class="col">
<h2 class="doctor-name">{{ result.doct_name }}</h2>
<h2 class="doctor-bio">Bio</h2>
<p>{{result.doct_bio}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Unfortunately the above 2 answers didn't work for me as the problem was something else. Since this questions pops up #1 on Google, I thought I'd share my solution.
If you've defined a display css rule somewhere that's more specific, it will break the v-cloak functionality. However! Do not despair - simply copy this into your CSS file and it will work!
[v-cloak] .v-cloak--block {
display: block!important;
}
[v-cloak] .v-cloak--inline {
display: inline!important;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block!important;
}
[v-cloak] .v-cloak--hidden {
display: none!important;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden!important;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none!important;
}
I am using AnythingSlider to place content on this dev for a new site:
http://sitedev.lcadfiles.com/interactive_barrett.html
When the slider first loads on a given page, there is a slight jump (the entire slider, arrows, etc. moves a few pixels before settling into the correct position). After landing, it all appears to work fine. The shift doesn't appear to be browser specific, as it occurs on my older and newer machines with 4 different browsers (and various browser versions).
Is there something I have set wrong? I assume it might be somewhere global, like the anythingSlider.js (or perhaps the .css - though this seems less likely), but didn't see anything that stood out.
Had the same problem. A quick workaround (works for me).
eg. you have html code like below, add a style="visibility:hidden;" to your anythingslider container.
<div id="slider_nest" style="visibility:hidden;">
<ul id="your_anythingslider">
...
</ul>
</div>
in the js code, change the style to visible when document ready. eg.(JQuery)
jQuery(document).ready(function($) {
$('#slider_nest').css('visibility', 'visible');
...
$('#your_anythingslider').anythingslider();
...
}
Hope it helps!
Update: add a slider mask with a loader gif.
eg. in the html, you will have something like below:
<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center; display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
<ul id="your_anythingslider">
...
</ul>
</div>
Now in the js (JQuery):
jQuery(document).ready(function($) {
$('#slider_mask').hide();
$('#slider_nest').css({'display':'block'});
...
OMG, this finally solved our problem! Thank you.
Since I'm using the Wordpress plugin on a custom theme, I had to adjust it a bit like this:
Add this before the shortcode in the header.php file:
<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>
Add this in the section of header.php file:
<script type="text/javascript">
$(document).ready(function(){
$('#slider_mask').hide();
$('.anythingSlider').css({'display':'block'});
}
Add this to the CSS file:
.anythingSlider {display:none;}
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
http://jsfiddle.net/danhanly/TurW5/4/
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.