I have a server application which I am querying for a layout and get the following information - the coordinates of the top left corner of the object and it's width and height. The data is presented as a 2D array.
Using ng-repeat I have tried to iterate over the array as in the following plunk.
This is the HTML template code:
<div ng-controller="PositionDemoCtrl" width="1000px" height="1000px">
<div data-ng-repeat="option in options track by $index">
<div width="{{option[0]}}" height="{{option[1]}}" top="{{option[2]}}px" left="{{option[3]}}px"> </div.
</div>
</div>
and my array in the controller:
$scope.options = [[26,33,36,891],[25,29,72,341],
[17,20,145,0],[1,4,181,288],[17,25,363,0],[11,33,363,262],[30,54,399,944],[23,29,508,524],[17,16,690,236]];
Each sub-array represents the layout data in the order of width, height, top and left.
I find that all my divs are of equal height and the attributes though rendered in the HTML are not applied.
Am I missing something basic here or should I be trying a different approach?
The width, height, left and top aren't meaningful HTML attributes. Although you can set them, they won't have any stylistic effect on the DOM element. Instead, you should set the corresponding CSS attributes. You can do that with the ng-style directive.
<div ng-style="{
'width': option[0] + 'px',
'height': option[1] + 'px',
'top': option[2] + 'px',
'left': option[3] + 'px'
}"></div>
Related
I have an color legend for discrete data, which is done using SVG. But I am getting issue to display the whole content as it is getting cropped. I cannot define fixed height since content are dynamic.
FYI: My code is written in react
Note: I can give overflow: visible and make the content visible but again then the issue comes in giving background color (background color wont get apply for overflowed content).
Code link: https://jsfiddle.net/rb4p9max/4/
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
select(legend)
.append("svg")
.attr("height", 100 + "%")
.attr("width", 100 + "%")
.style("background-color", "black")
.style("border-radius", "5px")
.call(colorLegend);
}
return (
<div style={{position: "absolute",right: 16,top: 10,backgroundColor:
"grey"}}>
<div id="legend"></div>
</div>
);
It's hard to answer it with just a small example from the react code. But, based on the fiddle you submitted, you could set a fixed height, but based on the number of legends you have. Something like:
height: calc(22px * 7 + (4px * 6));
Explaining the numbers:
22px * 7 is because every square is 22px height.
4px * 6 is accounting for the bottom margin. You don't need a bottom margin in the last one.
https://jsfiddle.net/gzebj1qn/
So, the final code would be something like:
height: calc(22px * ${legends.length} + (4px * ${legends.length -1}));
SHORT VERSION/CLARIFICATION
The gist of my question would be, assuming each value was unique to it’s context, would it possible to use undefined variables in sass, similarly to an algebraic function.
[formula for height of “.page-wrapper” div]
a * 0.75 = b
[formula for height of nested/child “sticky-vert” div]
b * 4 = c
a=the base value
b=the calculated value of the parent element
c=the calculated value of the child element
…and so and so forth
Most of the #mixins and #extend functions I’ve seen in sass have to do w/ overriding or replacing a display value like color or margin but not actually using calculations to get a new value from an "undefined" variable.
LONG VERSION
I have an SCSS document and I'm trying to take the numeric value from one class to use as the base for another class. Basically, I'm trying to take the height calculated from the parent class (".page-wrapper") to use as the base variable for it's child (".sticky-vert"). Is this possible to do, solely w/ sass and without javascript modifiers?
For what it's worth the website itself is set to horizontal scroll (except for the 1 section, explained below) and all the ".page-wrapper" element is set to display:flex along w/ its children. I want the child element to have four times the height as it's parent to accommodate for 4 diff content items within that section.
1. Here are the values set at the top of my scss doc:
/*Base Variables*/
$height: 100vh; // *the default value for height*
$width: 100vw; // *the default value for width*
2. These are the calculations for the parent container(s), using the $height value:
.header {height: $height * 0.14} // *header is 14vh, remains static / never scrolls*
.page-wrapper {height: $height * 0.75} // *page-wrapper is 75vh. This is a div container between the header and footer for the main content, this is the only area of the page that moves*
.footer {height: $height * 0.11} // *footer is 11vh, remains static / never scrolls*
Imagine it like a hamburger style webpage with only the middle moving.
3. This is the new value I want to calculate, without using JS modifiers or the actual numbers for flexibility:
.sticky-vert {height: height of ".page-wrapper" * 4} // Technically, the formula would be 75vh * 4 = 300vh but...
I don't want to plug the actual numbers in, in case I change the values later on down the line and have to plug in the new numbers again. Also while sticky-vert {height: $height * 0.75 * 4} could work it still requires plugging in the then-assumed value of the parent's height (75vh).
HTML SAMPLE:
<header class="colors-1">header text, etc etc</header>
<div class="page-wrapper dark">
<section class="sec-1">THE PAGE SCROLLS HORIZONTALLY</section>
<section class="sec-2">UP UNTIL YOU REACH THE NEXT SECTION</section>
<section class="sec-3 sticky-vert">
<div id="vert-1">WHICH THEN SCROLLS VERTICALLY, STARTING W/ THIS DIV</div>
<div id="vert-2">THEN IT SCROLLS DOWN TO THIS ONE.</div>
</section>
<section class="sec-4">NOW ITS BACK HORIZONTAL</section>
<section class="sec-5">AND FINISHES HERE.</section>
</div>
<footer class="colors-1">footer text, etc, etc</footer>
If I'm following correctly, you may not need to do all these calculations. Instead, would it be possible to add the height values for the header and footer regions, and have them set to position: fixed;, which would lock these elements in place which you could set with top: 0;, et.al. Then the page wrapper (for the moving content) could have margins or padding set (depending on how the main content moves around) to offset from the header and footer regions. This method could avoid a number of calculations, allowing freedom for focusing on the other areas.
I need little help from you in order to set the position of div dynamically.
I have two divs and I want to position 2nd div below the first one. Currently it is overlapping both of them. And my content of 1st div changes dynamically, how it could be possible. Please help. I believed, it could be done with jQuery, but not able to get idea how can I get the position of first div and set the next div position.
<div id="firstDiv">
</div>
<div id="secondDiv" style="position:absolute;">
</div>
you asked for a jQuery solution, so:
var first_div_top = $("#top_div").offset().top;
var first_div_height = $("#top_div").height();
$("#bottom_div").top = first_div_top+first_div_height;
// or this
$("#bottom_div").css({
"top":first_div_top+first_div_height
});
Try specifying position for element..Like specify position from left and top
#secondDiv{
position:absolute;
left:100px;/*your left position*/
top:150px;/*your top position*/
}
I am creating a division, in which there are some elements. For the example below, there is a sentence inside a division. However when the sentence becomes very long when I insert something through ajax, it seems like the height of the division does not change.
<div style="width:300px;min-height:10px;background:red">
<div style="width:100px;height:inherit;background:blue;float:left"></div>
<a style="width:100px;height:10px;float:left">The length of this sentence is always changing.</a>
</div>
you have to set the height for the div using javascript or using jquery
assign a ID to div e.g
<div style="width:300px;min-height:10px;background:red" id="test">
<a>The length of this sentence is always changing.</a>
</div>
$.ajax({
$(function() {
$("#test").width(100).height(200);//set height or width here
});
});
try to set the height here...
I am doing a div that needs to display the whole content of a text field and adjust the text size dynamically so that it will not overflow.
To get an idea of the problem, look here http://sandbox.littlegraffyx.com/bible/
You can try entering verses at lower left text box using the format GEN 1:1 for "Genesis 1:1"
My problem is when I try to display long verses, they get truncated. I need to change the size based on how long the current text is. Is there some css that can be applied based on text field size?
As mentioned in the comments, it isn't possible to scale text based on the height of its containing element using pure CSS. But here's a small jQuery script I have used in the past when I needed to achieve what you want. It also adjusts the text size when the user resizes the browser window.
HTML:
<p class="quote">
Really long text goes here...
</p>
CSS:
.quote {
// The largest size to display text at.
font-size: 36px;
}
JS:
$(window).bind('resize',function(e){
scaleQuote();
});
function scaleQuote(){
var quote = $('.quote');
var winH = $(window).height();
// Reset font size.
quote.css('font-size', '');
// If quote is larger than viewport, reduce font-size until it fits.
while (winH < (quote.height())){
var fontSize = parseInt(quote.css('font-size'), 10);
quote.css('font-size', fontSize-1+'px');
}
}
scaleQuote();
Demo: http://jsfiddle.net/eCBmc/2/
You can try something like this. It will set input field to 10 character, and if it's bigger it increase it's size.
http://jsfiddle.net/4qjjf/1/
<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>