I am dynamically assembling divs within divs and adding text to each internal div - building a list with a Javascript list adapter. The internal list divs display as desired, but the respective text divs in each list div does not:
Example:
As you can see in the image the text div on the right in red text is slightly higher than the one on the left in green. I have set the properties for each as such:
In Javascript I add them in a loop using the following:
var divGreen = document.createElement("div");
divGreen.style.position = "relative";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "100%";
divGreen.style.marginLeft = "-40%";
divGreen.style.marginTop = "-20%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);
var divRed = document.createElement("div");
divRed.style.position = "relative";
divRed.style.width = "10%";
divRed.style.left = "100%";
divRed.style.top = "100%";
divRed.style.marginLeft = "-20%";
divRed.style.marginTop = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";
divRed.innerHTML = 'Text';
div.appendChild(divRed);
Also, the literal Text is used to eliminate character size differences.
Why do they not line up vertically as expected? What am I missing?
After reviewing this SO post - It's clear my understanding of absolute positioning was wrong. By setting the position absolute on the parent, I can use absolute positioning of it's children relative to the parent. The key is the parent having position set to absolute!
var divGreen = document.createElement("div");
divGreen.style.position = "absolute";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "37px";
divGreen.style.marginLeft = "-40%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);
var divRed = document.createElement("div");
divRed.style.position = "absolute";
divRed.style.width = "10%";
divRed.style.left = "100%";
divGreen.style.top = "37px";
divRed.style.marginLeft = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";
divRed.innerHTML = 'Text';
div.appendChild(divRed);
Now my links are aligned vertically as intended:
I had this happen to me. I was able to put my code in a table.
<table>
<tr>
<td>
html code here
</td>
</tr>
</table>
TR means table row and td is table data
Related
I am new to HTML jquery. I'm stuck on the below issue and unsure not sure how to go about solving it.
I have added a line chart onto a modal box. The chart displays, but only at half the height of the modal height, when I would have expected the entire modal height to be used.
My HTML code is follows
<div id = "myModal" class="modal">
<div class="modalContent">
<span class = "close"> </span>
<div id="data_chart"></div>
</div>
</div>
The jquery function I use to create the chart is below, I left out some formatting codes for simplicity.
function renderChart() {
//===========================
var len = data_obj["trend"]["x"].length;
var trend_data = []
for (var i=0; i<len; i++){
var d = new Date(data_obj["trend"]["x"][i]);
var t = {"date": d, "value": data_obj["trend"]["y"][i]};
trend_data.push(t)};
var chart = am4core.create("data_chart", am4charts.XYChart);
chart.data=trend_data;
var title = chart.titles.create();
title.text = "Pulse Index";
title.marginBottom = 30;
title.fontSize = 16;
var dateAxis_line = chart.xAxes.push(new am4charts.DateAxis());
dateAxis_line.renderer.inside = true;
dateAxis_line.renderer.grid.template.disabled = true;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
};
The output of the modal & chart shows the chart's height is not fully occupying the height of the modal box. I am not sure why.
For more detail, the DOM details are
Many thanks!
I'm using C++ Builder.
I have created a panel and set the width of said panel to 350.
I am using the following code to create labels.
TLabel* tempLabel = new TLabel(this);
tempLabel->Parent = Panel6;
tempLabel->Caption = temp->Text;
tempLabel->Top = 25*i;
tempLabel->Font->Style = TFontStyles() << fsBold;
tempLabel->Font->Color = clRed;
TLabel* tempLabel2 = new TLabel(this);
tempLabel2->Parent = Panel6;
tempLabel2->Caption = temp->Title;
tempLabel2->Top = tempLabel->Top + 10;
tempLabel2->AutoSize = true;
tempLabel2->WordWrap = true;
TLabel* tempLabel3 = new TLabel(this);
tempLabel3->Parent = Panel6;
tempLabel3->Caption = temp->Message;
tempLabel3->Top = tempLabel2->Top + 10;
tempLabel3->AutoSize = true;
tempLabel3->WordWrap = true;
The result is that the captions of tempLabel2 and tempLabel3 are extending passed the 350 width of the containing panel. I have read online about setting AutoSize to true and WordWrap to true. This attempt was not successful.
What must I set so that the label text will wordwrap respective to the parent panel's width?
I am trying to show an image in the popover,
after i created an element i add attributes to show an popover.
var item = document.createElement('div');
var att2 = document.createAttribute("data-toggle");
var att3 = document.createAttribute("title");
var att4 = document.createAttribute("data-content");
var att5 = document.createAttribute("data-placement");
att4.value = "<img src ='blablabla.png' />;"
att3.value = itemname;
att2.value = "popover";
att5.value = "top"
item.setAttributeNode(att5);
item.setAttributeNode(att2);
item.setAttributeNode(att3);
item.setAttributeNode(att4);
any idea ? the output in the popover content is <img src ='blablabla.png' />;
SOLUTION
just add html:true into
$('[data-toggle="popover"]').popover({html:true,trigger:"hover",container: 'body'});
function addImg(theDiv,theImg) {
var element = document.createElement("img");
element.src = theImg;
document.getElementById(theDiv).appendChild(element);
}
<div id="myDiv" onclick="addImg('myDiv','https://media1.popsugar-assets.com/files/thumbor/7NnYpYvDfxr_HYUpa4tySashCM8/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2017/03/17/915/n/1922398/40d6ad1840bc51bf_GettyImages-89938282/i/1997.jpg')">
Click me to append image
</div>
Is this kinda what you're after? Hard to tell from your explanation.
In my application, a large number of divs is dynamically rendered in an HTML page through the use of JavaScript. In fact, there are more than 100 dynamically created divs. Loading the content from server side, it is taking more time to load dynamic divs than static divs. How can I reduce the time it takes to load dynamic divs? This is the sample code I am using:
var ul_slide = document.createElement('ul');
var slide_div = document.createElement('div');
slide_div.setAttribute("class", "slide");
for (var i = 0; i < data.arrayItems.length; i++) {
alert(data.arrayItems.length);
var postId = data.arrayItems[i].postId;
var tag = data.arrayItems[i].tag;
var li_slide1 = document.createElement('li');
var img_link1 = document.createElement('a');
var linka = "#" + postId;
img_link1.setAttribute("href", linka);
img_link1.setAttribute("class", "click");
var img_slide1 = new Image();
img_slide1.style.width = "159px";
img_slide1.style.height = "100px";
img_slide1.setAttribute("src",data.arrayItems[i].url);
img_link1.appendChild(img_slide1);
li_slide1.appendChild(img_link1);
ul_slide.appendChild(li_slide1);
slide_div.appendChild(ul_slide);
div.innerHTML = "";
div.appendChild(slide_div);
}
I tried with this piece of code, but it doesnt work by some reason..
var table : SimpleTable = new SimpleTable();
table.widthPercentage = 100;
table.borderWidth = 1;
var row : SimpleCell = new SimpleCell( SimpleCell.ROW );
row.border = 1;
row.borderColor = RGBColor.fromARGB( 0x555555 );
row.borderWidth = 1;
row.verticalAlignment = Element.ALIGN_MIDDLE;
var cell1 : SimpleCell = new SimpleCell( SimpleCell.CELL );
cell1.widthpercentage = 25;
cell1.verticalAlignment = Element.ALIGN_MIDDLE;
var p : Paragraph = new Paragraph( 'test', PurePDFGenerator.pdf.cyrillicFont );
p.alignment = Element.ALIGN_MIDDLE;
cell1.add( p );
row.add( cell1 );
table.add( row );
How to align a paragraph text into the middle of a SimpleCell ?
Until Paragraph.alignment works you could use
cell.horizontalAlignment = Element.ALIGN_CENTER;
Have you tried to do horizontal align at the cell level? From what I can see, it should work from the docs. Also, are you not adding your paragraph to your cell?