I hope you are good.
I'm having trouble to customise my label with amcharts.
I'm trying to put on a map, the date and the place of an event as a label like that:
https://codepen.io/acivita/pen/BarvPzZ
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>
When I exported this code on amcharts, it works well but it's too big:
https://codepen.io/acivita/pen/KKobeXm
var label = labelSeries.mapImages.create();
label.latitude = element.latitude;
label.date = tmpData[0].eventInfo.date;
label.city = tmpData[0].eventInfo.specific;
label.longitude = element.longitude;
label.interactionsEnabled = false;
label.children.getIndex(0).html = `
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>`
Example :
I added a red background to see why it wasn't aligned with the dot.
https://codepen.io/acivita/pen/vYRmzgO
So when I try to reduce it, there are some issues:
the text is not vertically aligned anymore.
it seems to have some margin .
It looks like if I put too small properties for my text the behaviour get weird.
It may be a css/html error because I'm not very good at positioning stuff.
Thanks for the help and have a nice day.
Related
I'm trying to find out a way to modify the HTML code to replace every Bootstrap col class name (col, col-xs-x, col-x etc.) by col-12 after the page is loaded.
I could do that with .removeClass('name') and then .addClass('name') but I need to use some RegEx because I want to modify Bootstrap col class names.
From something like this :
<body>
<div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
<div class="col"> Content 2 </div>
</body>
I want to modify to something like this :
<body>
<div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
<div class="col-12"> Content 2 </div>
</body>
I found here someone who did that with html().replace in jQuery so I tried to do the same but it doesn't work.
Way like this:
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
So my question is, do you have any solution to change HTML content after the page is loaded ?
You forgot to add ')' to your Javascript.
but i really cant realize what you are trying to do here.
any way
$(document).ready(function () { // my RegEx works well, verified it on regex101
let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$('body').html(col_let_num)
})
Edited
here you go
$('[class*="col"]').each((i, e) => {
let classes = $(e).attr('class').split(/\s+/);
classes.forEach(v => {
let col_let_num = v.replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
$(e).attr('class', col_let_num)
})
})
this should work.
I am using bootstrap for the first time. Im just finishing up this form, but I want to add a button at the bottom right of form. I've got the button where I want it to be vertically, but right now its at the bottom left of my form, not the right. The only solution I could find is to add 3 empty divs, and then my button as the fourth div. This causes it to be in the 4th column. I was wondering if there was a way to achieve this without using unnecesarry code.
Im fairly new to stackoverflow, I apologize if my question is missing something or isn't clear
Here's my code for that row so far:
Note: parent row is defined using col-md-12.
<div class="row" style="padding-top: 3px">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
#Html.WETSubmitButton(btnAdd, new { #class = "btn btn-default", name = "action", value = "Add" })
</div>
</div>
you would just use the offset class like this:
<div class="row pt-1" >
<div class="col-md-3 offset-md-9">
#Html.WETSubmitButton(btnAdd, new { #class = "btn btn-default", name = "action", value = "Add" })
</div>
</div>
also I removed your padding and used the bootstrap built in padding class on the row.
I'm learning the basics of Bootstrap and I'm stuck when it comes to creating margins. I want to give space between the quote and the thumbnails. I've looked up tutorials and even searched Stack overflow and haven't found a solution. It's as if all the elements are stuck together. Can someone please tell me what I need to do to create a margin? Thanks in advance.
<div>
<h1 class = 'text-center'> Bob Dylan </h1>
<img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
<h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>
<div class = 'row'>
<div class="col-xs-2">
<img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'>
<p class = 'center-block'> 1962 </p>
</div>
https://codepen.io/jwdwsn/pen/awaGdv
To solve this, instead create a new class "bottom-margin" that adds the standard margin that you need.
.bottom-margin { margin-bottom:30px; }
Then add a div after the quote div as below
<div class = "row bottom-margin">
<div class = "col-md-12">
</div>
</div>
I tried it works.
Hope this helps.
(using dojo 1.10.1)
I am working with dojo's dijit/layout/StackContainer and dijit/layout/StackController which are working fine, here is a simplified example. My problem is that I cant find a "clean" way to add mouseover titles to each controller button that the StackController creates?
html
<div>
<div data-dojo-type="dijit/layout/StackContainer"
data-dojo-props="id: 'contentStack'">
<div data-dojo-type="dijit/layout/ContentPane" title="one">
<h4>Group 1 Content</h4>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="two">
<h4>Group 2 Content</h4>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="three">
<h4>Group 3 Content</h4>
</div>
</div>
<div data-dojo-type="dijit/layout/StackController" data-dojo-props="containerId:'contentStack'"></div>
</div>
So for each title in each child contained within the StackContainer, a button is cerated by the StackController with the same label, but the button has no mouseover text, I need to add that as well.
I am not interested in any solution that involves me looping over the nodes and finding each button, its just not nice.
One of the best solutions would be to send properties, methods and events of buttons via corresponding ContentPanes. For example:
<div data-dojo-type="dijit/layout/ContentPane" title="one" data-dojo-props=
"controllerProps: {onMouseOver: function(){"doSomething"}}">
<h4>Group 1 Content</h4>
</div>
But as far as I understood this is not possible, because StackController passes to its buttons "title" and some other unimportant properties of ContentPane. So if you are really interested in above solutions you have to override the default behavior of StackController. Which is possible, but needs more time! :)
So I suggest you other solution which works and faster. You give to StackController-div an id:
<div id="myController" data-dojo-type="dijit/layout/StackController" data-dojo-
props="containerId:'contentStack'"></div>
You use "dijit/registry" to call that id:
var controllerWidget = registry.byId("myController");
You have now StackController widget. Call getChildren() method of it and you have an array of Button widgets. The rest I guess straightforward.
Here is the JSFiddle example.
Cheers!
Update:
Hey I have found another solution, which satisfies your requirements: "No button search"
These are the properties which StackController passes to buttonWidget:
var Cls = lang.isString(this.buttonWidget) ? lang.getObject(this.buttonWidget) : this.buttonWidget;
var button = new Cls({
id: this.id + "_" + page.id,
name: this.id + "_" + page.id, // note: must match id used in pane2button()
label: page.title,
disabled: page.disabled,
ownerDocument: this.ownerDocument,
dir: page.dir,
lang: page.lang,
textDir: page.textDir || this.textDir,
showLabel: page.showTitle,
iconClass: page.iconClass,
closeButton: page.closable,
title: page.tooltip,
page: page
});
So if you give a tag "tooltip" for your ContentPane, it will appear in buttonWidget as "title".
<div data-dojo-type="dijit/layout/ContentPane" title="one" tooltip="First Page">
Here is another JSFiddle example.
Is this possible? I need this so if one div would become bigger in height, the other one should do the same. Both divs have different parents though. This is my mark-up:
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
Any suggestions?
I would like .aProductHeader .omschrijving and .aProduct .omschrijving to keep the same height.
You could use javascript
Example
HTML:
<div id="yes">
something here<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="nope">
<h1>text</h1>
</div>
JavaScript
var one = document.getElementById("yes"),
two = document.getElementById("nope");
if (one.offsetHeight > two.offsetHeight)
{
two.style.height = one.offsetHeight+"px";
}else{
one.style.height = two.offsetHeight+"px";
}
For using getElementsByClassName:
Example
var one = document.getElementsByClassName("yes"),
two = document.getElementsByClassName("nope");
for (i = 0; i < one.length; i++)
{
if (one[i].offsetHeight > two[i].offsetHeight)
{
two[i].style.height = one[i].offsetHeight+"px";
}else{
one[i].style.height = two[i].offsetHeight+"px";
}
}
The second option will always be as long as its 'pair', so if it's higher or smaller, one of the will adjust accordingly.
If they aren't side by side, this may be a challenge. If they are side by side, you can put them in a parent div. Otherwise, you would likely have to use javascript to sync them up.
With javascript it would be something like this code.
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.style.height = div2.style.height;
can't you just use .omschrijving only?
Like this:
.omschrijving{
height: 100%;
}