I wonder whether it's possible for DivIcon to have a dynamic size.
The context:
On my map, hovering over a country will trigger a tooltip with the country's name.
I also have several DivIcons, with the following code:
folium.Marker(
location=[lat, lon],
icon=folium.DivIcon(
html='''
<div style="background-color: red; display: inline-block;">
<span>
{region_name}:
<br />{region_info}
</span>
</div>
''',
icon_size=(100, 100),
icon_anchor=(0, 0),
)
).add_to(map)
Because of the variation in region_names and region_infos, the width of the content varies between 50 and 90 pixels. I want my text to be displayed on two lines and the div to fit its content: the display: inline-block property in the html allows me to do this, even if my icon_size is constant.
But the problem is that the size of the DivIcon affects the tooltips: I can have a 70px-wide block with content, but an area of 30px next to it which doesn't display as a block but still counts as that block. So if I hover out of the visible block, instead of the tooltip appearing with some country's name, nothing happens. This is especially problematic when this area covers a bunch of small countries.
What I'd like to happen is for the DivIcon to fit to the html within, or to have some kind of dynamic behaviour. I have tried doing icon_size=(10, 10) or removing icon_size, but the block just shrinks to fit to the longest word in the content. I have tried to go through the code for folium.DivIcon and up the inheritance tree (branca.MacroElement, branca.Figure, etc.), but wasn't able to get control of this behaviour.
Any suggestions welcome.
Related
I am creating a program calculating flow in piping systems. In the user interface, the program contains a graphical drawing diagram, a ribbon on top of the screen containing functions helping the user drawing, and possibly a side ribbon with additional functions.
Here i've included a picture explaining my intentions:
As of now, my approach to achieve the division of screen, is to have nested elements in a tree structure, where the main branches are the divisions of the screen (the functional areas and the graphical drawing area). In the graphical area, the objects drawn in this area are positioned using absolute coordinates w.r.t. the drawing area element, and are also nested inside this element. As of now, this is the progress that has been made (grey area is the graphical drawing area, the red area is going to contain functions):
To obtain this current division of screen, the general html code looks like this, and the general css code uses mainly certain flex-settings.
App.svelte:
<main class="h-screen w-screen">
<section class="screen">
<!-- Creates a main bar. Will contain several functions and options. -->
<Bar/>
<!-- Creates the drawing board. -->
<DrawBoard/>
</section>
</main>
DrawBoard.svelte:
<section class='board' on:mouseup|self={$selected != null ? createObject : null}>
<!-- Displays all objects contained in the MainDataStructure. -->
{#each $editor.objects as object}
<ObjectOnBoard bind:object={object}/>
{/each}
<ObjectSelection/>
</section>
Using this method leads to several problems. As can be seen in the current progress, one object is moved to the edge of the screen, but instead of going out of the screen, it appears above the functional area. I would want to elements inside elements (the object inside the graphical area) disappear if they went out of the element, as if the graphical area was a screen of its own just like the whole tab. This leads me to my question:
Is this the right approach to achieve the user interface with area divisions i want? It seems so easy to not include a certain combination of setting in css, and then the different sections of the screen will intersect each other. I want to imagine that one solution would be to create one html body for each area, so that elements of each area would never intersect each other (i know that a document only has one body). Is there a totally different approach than the one shown, or do i have to find just the right (imo. kludgy) css settings, so that i make the visuals work as intented? And if this is the right approach, what kind of css-settings and other settings should i look into?
Look into CSS grid for the main layout. (Though this can be done with two flex layouts as well.) You can, for example, use grid-template-areas to set up named areas and then position element in them.
Elements intersecting other areas is just an issue of overflow. Either let the individual sections overflow with scroll (auto/scroll) or cut off their contents (hidden).
I am trying to stop <td> content from wrapping. Table cell contains two numbers: value and its percentage. The second number shall be smaller and keep constant distance from the first one (whatever the value will be) so all will be better aligned for readability.
It works, however when resizing window at some point cell content starts to wrap, and <small> content is put in the new line.
I would like browser to treat both numbers, the whole cell content, as a one monolithic text.
I will be also happy with any other solution than <small class="text-muted fixed-width-45px"> which will help to keep small number in the constant distance from the big one, as far as it solves wrapping issue same time.
I use Bootstrap 3.
<td class="text-right">123,00<small class="text-muted fixed-width-45px">(23%)</small></td>
CSS used for constant distance between two numbers:
.fixed-width-45px {
width: 45px;
display: inline-block;
}
Add white-space: nowrap to the table cell.
I have added a HTMLDelegate to a QTreeView instance I'm tinkering with (see How to make item view render rich (html) text in Qt), so I can present its contents with rather simple rich text (HTML). The hits are presented as
<headerstyle>result type</headerstyle><br>
%d results of this type
where "headerstyle" is either a single tag (say ) or a combination of such tags.
That I'd like is to add underlining to the 1st line that spans the entire width of the QTreeView. Checking existing suggestions on here make it seem doubtful that this will be possible, but maybe I'm overlooking something?
I tried adding <span style="border-bottom: 1px solid"> but no borders are ever drawn. That may be a limitation in the HTMLDelegate, but it probably wouldn't work anyway. does work but only applies to the actual text, not the entire first line. I guess what I'd need is a right-aligning tab character...?
Current actual code: https://github.com/RJVB/audacious-plugins/blob/RJVB-MP-Qt/src/search-tool-qt/search-tool-qt.cc#L166
I am currently creating a word cloud using an in house developed library, it uses the svg element text to display the words, the problem I have encounter is that the area of some words sometimes overlaps other words as you can see if you inspect test1 in this jsfiddle, this becomes a problem if the words must be clickable.
I want to know if it is possible to reduce the area of the text to the minimum, just wrapping the word, a small padding is accepted.
I have already tried the solution posted in this answer but it didn't work.
I would prefer a css solution if it exists rather than messing with svg but if there is no other option that will do.
Edit: Ok, enough reputation to post images. What I currently have:
What I would like to have:
There are two problems; I currently have only a solution to one. Your text example is misleading. Try Text1g instead to see the descent (i.e. the amount of space below the baseline which the g needs). If you do this, then you'll see that the texts really overlap - you just don't notice because your test text doesn't contain a good set of test characters.
Apart from that, I see that the element is 67px high while the font-size is only 60px. I don't see where the additional 7 pixels are coming from. It's not padding and not margin :-/
Why do you need to know the minimum bounding box?
If it is because you are linking with the element, or applying click events to the words, then you should investigate the pointer-events attribute.
You possibly want something like:
<text ... pointer-events="fill">ejecutar</text>
You will only get events when the pointer is over the fill of the words. This might be a bit fiddly for clicking though because the holes in words will not be clickable.
You could ease that by putting an invisible <rect> of an appropriate size in front of the word with pointer-events="fill". The "fill" value will attract events for where the fill would be even if it is invisible. However that requires you know the bbox of the word, which we already established you don't have (?).
You could give the words an invisible fat stroke and use pointer-events="all". The invisible stroke will make the clickable area (invisbly) fatter and hence the inter-word holes smaller.
I have the following goal: I wanted to place a heart within a container - scaled and positioned.
First I wanted to use an icon font but I've discarded the idea. Second option to load the heart as an image I've discarded too - I have to use the heart a few times on my recent project and I wanted to save http requests. Therefore I wanted to go with the SVG as a background-image option. But the problem is, somehow I am unable to tame that beast. I've built a sample pen to illustrate the issues and parts I don't understand.
The un-base64-encoded optimized SVG looks like that:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><polygon points="756,168.4 593.5,168.4 480,258.3 366.5,168.4 204,168.4 30,349 480,791.6 930,349"/></svg>
The sample code you can find from my codepen.
Basically I have three related questions (normally I prefer to post separate issues but those three questions are basically way too connected therefore I hope it's ok):
The sizing: .heart1 has a width and height of 100% and everything displays fine. If you use suiting px values all is fine too but if you try to enter ems the heart isn't shown anymore. Why?
The green box: .heart1 has a width of 100% but if you drag the browser window bigger the heart only grows to some point and then only the green box keeps on growing. I thought SVGs are more or less able to scale to "infinity"?
The yellow box: My basic goal was to make the heart a bit smaller than the width of the yellow box, center it horizontally within and give the heart some top margin. Width and height of .heart2 are set to 75%. But somehow I am unable to position the heart within the box neither with top, left and/or right properties nor in background:url with "no-repeat center 2em" e.g. . It just doesn't react.
I use a block of code shown below to fit svg in a DIV. It works best in a DIV with the same width/height. As you can see below it uses getBBox() to change its viewBox, plus changes the svg width/height values.
It works cross browser: IE10+/CH31/FF23
var bb=mySVG.getBBox()
var bbw=bb.width
var bbh=bb.height
//--use greater of bbw vs bbh--
if(bbw>=bbh)
var factor=bbw/divWH
else
var factor=bbh/divWH
var vbWH=divWH*factor
var vbX=(bbw-vbWH)/2
var vbY=(bbh-vbWH)/2
//---IE/CH---
if(!isFF)
{
var ViewBox=mySVG.viewBox.baseVal
ViewBox.x=vbX
ViewBox.y=vbY
ViewBox.width=vbWH
ViewBox.height=vbWH
}
else
mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbW+" "+vbH)
//--requred for FF/CH---
if(!isIE)
{
mySVG.setAttribute("width","100%")
mySVG.setAttribute("height","100%")
}
else
{
mySVG.removeAttribute("width")
mySVG.removeAttribute("height")
}
The svg is centered both left/right and top/bottom within the DIV, plus maintains its aspect ratio. This should help get you started.