I'm displaying data in divs that floats left on each other. I don't know how many divs that is displayed in one row due to screen size ( Can be one can be 10 ). Here is my scenario. Let's say my current screen size let me display 5 components in one row.
-c-c-c-c-c-
-c-c-c-c-c-
-c-c
Let's say every c is a React component. If I click first row third component I want to display more information under that row. Not next to the div. How can I find out where to paint the more information component?
This might be considered kind of "jank" but what if you had the element you clicked on expand invisibly -- by adding like an empty div or whatever on the bottom of it that has a set height but gave it a fixed width of 100% of the container -- and placed whatever information you wanted in there?
That way, the entire row that your clicked div was on would expand to accommodate that new div you placed on the bottom of it, and you could just place any pertinent information in there?
Related
My question is this: in a div (example height 500px, width 500px) if i insert two images of greater width than the div, one of the two is placed in the row below. But if I then insert a third image of reduced dimensions that can fit in the first line instead it is placed after the second image. How can i position the images according to the space available in the div? so that the large images will be placed in another row while the smaller ones will occupy the spaces left free. I should do it without manually changing the order of the images in the html. One last thing, the images must all be merged without spaces. thanks to those who will answer me
This is quite simple in javascript/jquery if its worth the trouble. You can get the width of all the images and then add them up and index them then math >500... jquery target the images loop through them with an each then logic and indexing--image1 width=300 image2=300 image 3 = 100, image4 = 100...
Once theyre all indexed if total < 500 then next kind of thing. If you know jquery and js this should make sense to you, if not, you probably wont be able to write it and maybe should move on.
I'm trying to hide overflow elements in the list. Example is present below.
I'd like to hide elements that do not fit inside the red container, but i dont have any idea how to do that and how to count them.
I tried use ViewChild and ViewChildren, but it did not work.
One time I had implemented a pagination for cards, and there I need to show the number of cards which fits inside the available width for handling the responsive mode. That task was quite easy comparing this as the card width was same.
I guess you can try, registering the window:resize listener and then calculate the available width and width of cards to be shown and show only which gets fits.
The Context:
I'm building out a div roster to use with jQuery or PhP for my roleplaying Star Trek Fleet (nerdy, yes, I know). I need my divs to behave in certain ways to make it robust enough to pull from XML and generate the roster automatically and auto-size my divs to fit however many names are added.
It will help to take a look at my current build example with Firebug/the like to understand what I'm doing.
Requirements:
Each subsection (Outpost Personnel, Outpost Defense), needs to have a number of divs:
1) The background image & subsection container (div id= outpostPersonnel in this example)
2) Sub-sub section container for each side of the listing, left and right. (Think newspaper paragraph.)
3) The top n number of roster names needed to fill/align to that background image in requirement 1. (div id= initialCommandTags (left side listing) and initialPersonnelTags (right side listing))
4) Div that stretches with n number of additional roster names. (div id = overflowCommandTags, overflowPersonnelTags, )
5) A colour div stripe to make it look like LCARS is still encapsulating the n number of roster names from requirement 4. (div id = colorStretchLeft)
The Problem:
I cannot get the parent subsection- the div from 1 (outpostPersonnel) to adhere exactly to the height of ALL its child divs- all the way down to the height of the overflowCommandTags/overflowPersonnelTags div.
One way I've tried it, and the next subsection (Outpost Defense) overlaps the overflowCommandTags div. The other- which is the way I have my example now (and where I gave up)- puts a ~160 pixel high blank space between the end of the overflowTags div and the top of the next subsection (outpostDefense).
If you firebug my current build example, you'll see that the parent div (outpostPersonnel) extends way the heck down, even though none of its child divs are that tall.
Overflow:auto and Overflow:hidden are NOT viable solutions insofar as I have read, since I need the divs to expand fully, and WITHOUT a scrollbar.
I'm completely stumped. Watch it be a really simple solution, too. Is it something to do with the fact that the parent div is only a BG, while the child divs have actual content?
Thank you for bearing with me this far!
Cheers!
((Also the reason why my div style stuff is in-line is because I'm embedding this on an Enjin page and I can't call a *.css file.))
There are a few things to mention here but I'll start with the reason for the gap in between the two sections.
From what I can see from your inline styles you have used position: relative and varying top andleft values to achieve the desired layout. On the element with ID personnelContainer you have added top: -230px. This is what is causing the gap.
When you position an element relatively you have to imagine that the element is in its original position and that you've just visually moved it. In other words, moving the element does not change the flow of the page, so applying the negative top value as in your example will not change the height of the container. (good reference: http://reference.sitepoint.com/css/relativepositioning)
With this in mind, you could go the route of applying minus top values to each of the sections that follow in order to close the gap, however you are likely to find that this complicates matters further and leads to overlapping content.
The best advice I can give is to read the following articles on floated layouts:
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html
Relative positioning has its applications but in this case you should use the float property to achieve your layout. If you read the articles above it will give you a good grounding in floated layouts and how to ensure your sections contain everything correctly. As long as you don't set any fixed heights on any of the child elements you will find they expand to accommodate any amount of content.
I have a design consisting of three divs ( http://jsfiddle.net/herrturtur/Mem6u/ ), put next to each other by display: inline-block, but for some reason the last div appears in the middle of the page.
If possible, I'd like to display the three divs next to each other, with the height of the switch div adjusting automatically to the height of the div containing the select element.
What is the function of the switch? you may be able to work this with the float method and strategically placed "clear"..
if you have the option to use JQuery there is a handy tool called accordion (or accordian as there are a couple) that can perform the actions you want relatively easy.. have you already developed the code to perform the actual switch?
UPDATE:
I think is is similar to what you are looking to do .. let me know
working url with this code:
http://home.comcast.net/~elkins35/test.html
Just view the source to see the edits to the code you were using
I have two elements (a field and some text) that I would like to link so that no matter how much I shrink the page, the two elements appear next to one another.
I also want for the two elements to remain where they were on the page prior to me encapsulating them in one element.
How can I do this? (I have tried putting them in a div and a table, both of which push the elements to a new line.)
If you want the 2 elements to be next to each other, in the same pixel position on the page, you need to use position:absolute and specify a pixel position for each element.
I assume this is what you mean by "link them" together.