I've been reading numerous articles on side-by-side divs. There's something subtly wrong with what I'm doing that's preventing it from working. Ideally, I want to have my 3 divs appear on one line, each occupying a fixed amount of space. Something like this [15%][60%][25%]
The middle [60%] div is a progress meter bar. I do this by having a div within a div and then using angular ng-style set the expression for the percentage width of my meter.
The progress meter part is working, but I cannot seem to put it all together on one line.
<div ng-repeat="rec in records">
<div>
Items
</div>
<div ng-style="$scope.outerObj">
<div ng-style="rec.innerObj"></div>
</div>
<div>
{{rec.complete}} of {{rec.number}}
</div>
</div>
The $scope.outerObj is just the following expression:
$scope.outerObj = {
'display': 'inline-block',
'border-style': 'solid',
'width': '220px'
};
NOTE - you may ask (like I did), "why can't I just make that outerObj a class and reference it from the outer div like this: <div class="outerObj">? If I do, then the outer div border disappears and you don't get the sense of a progress meter. I could only get it to work by making it also an ng-style.
The rec.innerObj looks like this:
rec.innerObj = {
'width': (rec.complete ? (rec.complete / rec.number)*100 : 0) + '%',
'background-color': 'blue',
'height': '10px'
};
So with all this, I have never been able to get the full combination of what I want:
Item [progress meter] X of Y
I've changed the display from 'inline-block' to just 'inline' and that puts things all on one line, but then my progress meter is all screwed up.
So many tries with different combinations and I've never got it to work, thus turning to the experts here.
Related
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.
I have a table with variable number of rows according to data fetched from server
If the table contains more than X rows it becomes scrollable
I want to add "floating" button that either
Acts as a fake last row if theres too little rows to be scrollable
Ovelays last row if table is scrollable
Im doing this in React and im able to obtain coordinates of last row of table
e.g
let nodeBoundaries = document.getElementById('id').getBoundingClientRect()
but im unable to position it with css
what i have tried is something like :
let rect = document.getElementById('lastRow').getBoundingClientRect()
<div style={
{'position' : 'fixed',
'left' : rect.left + 'px',
'top' : rect.top+'px',
'height' : '20px',
'width':'50px',
'backgroundColor' :"red"}}>BUTTON </div>
}
as Tom said, you can try this and if table height is more than X you then can change button style to another property that matches your needs.
I also would like to point you to FLEXBOX . IMO, a much cleaner way to achieve this.
I spent more than 10 hours trying to find a solution to my problem (most answers were on Stack Overflow) but nothing seems to be exactly what I need and I may not be experienced enough to adapt a solution to my own issue.
So, I made a picture where I want text to appear on my website. But only inside that picture (frame). So I cut it in 3 parts and made it tileable.
The 3 images and what it should look like (notice the fact there are transparent parts):
So what I simply did in html/css : I made 4 divs, one for the top part, one for the middle part, one for the bottom part and one for the page content (text or images).
The middle part has a repeat-y. So here is the result when the text is longer than the middle part (242px):
In the above image, there are 2 middle images (the first one and the repeated one, but it's cropped automatically). Depending on the length of the text, it is cut at the wrong location and it messes everything. It must fit perfectly each time, and if it's longer than 242 pixels (height of the top image), it doesn't fit exactly.
I would like the div to show the entire "middle.png" WHEN repeated or to make the div lengths = (242 pixel * amount of "middle.png")
Help me please, if possible with pure CSS/HTML. I know close to nothing in PHP, and even less in JS (and even LESS in Jquery :D).
What you're asking for cannot be done in pure HTML/CSS (as far as I know). You need to have some calculations on the div height, and apply appropriate logic based on that.
Basically you need to check if the div height is divisible by 242. If it is, cool, everyone is happy, if not, then set the height of the div, to be the first next number divisible by 242.
Pure JavaScript
<script>
r(function(){
var div = document.getElementsByClassName('myDiv')[0];
var divHeight = div.offsetHeight;
if (divHeight % 242 != 0) { // checks if height is divisible by 242
div.style.height = ""+(Math.ceil(divHeight / 242) * 242)+"px"; // set height as the next number divisible by 242
}
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
</script>
WORKING PURE JS EXAMPLE
OR if you're more familiar with jQuery framework it would look something like this:
//First, add the jQuery library
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Then add the code that does all the work
<script>
$(document).ready(function() {
var div = $('.myDiv');
var divHeight = div.height();
if (divHeight % 242 != 0) { // checks if height is divisible by 242
div.height(Math.ceil(divHeight / 242) * 242); // set height as the first next larger number divisible by 242
}
});
</script>
WORKING JQUERY EXAMPLE
Is there an easy way, or existing library, which will shrink the content of a div if it overflows it's parent? I am envisioning something like Powerpoint / Keynote, where text in the main box shrinks in size automatically, when the content gets to big (so not just re-formatting, but the fonts and pictures get smaller to fit in the div).
I feel this should be simple to do, using CSS 'scale', but I am surprised I can't find someone else who has done it, so I wonder if there is an issue I am not thinking of?
Something like this? I set up a quick test that calculates the ratio of child to parent boxes and sets an appropriate scale to make the widths match:
var one = $('.one');
var two = $('.two');
if (two.width() > one.width()) {
two.css({
'transform': 'scale(' + one.width() / two.width() + ')',
'transform-origin': '0 0'
});
}
i don't need any calender, datepicker, or timepicker.. i just want to know...
Can somebody please tell me... how the divs come to appear when user clicks on some specific text fields...
see on this link..
http://pttimeselect.sourceforge.net/example/index.html
i dont' want to show calendar or time picker.. but may be some images with some details.. that is not a part of question.. i just want to show some div with "blabla" data...
Thank you
Oh.. i found it..
I got it.. in jquery i found a method of "offset();" that further give me its' left and top values..
.. Thank You
ALHAMDULILLAH
Well, the best way I can think of is to use JQuery and generate the div on the fly when your element is clicked.
The div should be absolutely positioned and set to display: none (if you want the slide down effect). This is a quick sample I made for showing the div:
$('.moreInfo').click(function(){
var data = "Whatever data you want to show in the div";
var div = $('<div />').text(data)
.css('display', 'none')
.css('position', 'absolute')
.css('top', $(this).outerHeight() + $(this).offset().top)
.css('left', $(this).position().left)
.css('width', '200px')
.css('height', '300px')
.css('border', '1px solid #000');
$(this).after(div);
div.slideDown(500);
});
(The CSS may as well be a separate CSS-rule and modified however you want, except for the 'top' and 'left' attributes)
This opens a new div for every click, so you probably want to check if the div already exists and then remove it.
The easiest way would be to define functions for the input field on focus and blur:
<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>
EDIT: Here's some psuedocode to get you started
//This will give you the distance from the top of the page to the input box
inputTop = inputElement.offsetTop;
//This will give yout he height of the input element
inputHeight = inputElement.offsetHeight;
//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;
//Now show the content div
contentDiv.style.visible = "true";