I know you can set the data-width. But, how would I go about making it taking up the full available width of the div? I am using Vue and tried to create some methods that would update the width from a variable but for some reason that didn't work and that is a complex solution for something that seems like a simple problem.
Related
Trying to build a virtualized table with dynamic row heights based on the content within them. The only thing I have seen somewhat useful is passing a rowHeight to the <VariableList/> component, but would have to know the height in the beginning. Is the only way to do this measuring each inner container using refs? Not sure if that would even work.
Try to do so with react-virtual that will be easy to integrate and customize.
I'm trying to use Qt's built-in functionality for table stretch-fitting (table->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);) but the table is stretched out of the viewport.
I remember seeing somewhere that there might not be a solution and I'd have to do some subclassing since the purpose of a scroll area is to allow this going-out-of-bounds in the first place, but anyway:
What I'm aiming for:
What I'm getting:
What's causing this and how to fix it?
The problem is QHeaderView::minimumSectionSize(). Header sections can't shrink below this size.
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
I am using Bourbon Neat grid framework and somehow i am unable to do source reordering.
i tried reading documentation but it didn't work.
Can someone please explain how source reordering is done?i mean generally how can we shift a div on top which is 100% to bottom and on bottom to to with width 100%.
What kind of Css Needs to be used.
thanks.
You can use the shift mixin to change the source order:
http://thoughtbot.github.io/neat-docs/latest/#shift
If you do this in conjunction with a media query you can shift elements around within a container.
I know there are a lot of questions about dynamic sizes for Flex components, but this one is quite specific and the other answers aren't a whole lot of help. Briefly, I need a List that resizes to exactly fit its content, unless that height exceeds its (dynamically sized) parent container. My requirements are as follows:
The component extends List, or at least acts similarly.
variableRowHeight and wordWrap both equal to true.
The height of the list cannot be less than minHeight (roughly 32px for scrollbar arrows).
The height of the list cannot be greater than the height of the parent container .
Note that the parent container can be resized dynamically.
The height of the list should be updated as the size of both the contents and parent container changes.
Live updating would be preferable but not necessary.
There should be no scrollbars if the content height is less than the parent container height (sounds obvious, but I've had trouble with this too).
The trouble is that with variableRowHeight and wordWrap, it's very hard to know the size of the content at any given time. If the parent container's width is reduced, a line wrap may occur in the list which will change the height of the content. I know I can measure the height of the list content using measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom, but when should I calculate that? What events should I listen for? And the thing I've had the most trouble with - when should I calculate it to set the size initially (i.e. just as the content has finished populating)?
I've been tackling this for months now on and off, but can never find a solution (though I've come close with chunks of code of varying degrees of incomprehensibility). I'm not asking for someone to create a full component for me, I'm just hoping someone has the right pointers to let me know how I should go about determining and updating the size. I'm happy to do all the prototyping for you and discuss the results :).
Custom Flex components are definitely their own beast. You have a lot of dedication to spend months working on one!
If you haven't seen it already, you should certainly take a look at the Flex Component Lifecycle. This will answer your questions about where to execute code. I believe that measure() and commitProperties() are going to be important for your component.
I also find validateNow() to be a very useful function when managing components with dynamically sized children and/or parents. I have not yet figured out when the optimal times to call this function are but it seems to be necessary when calculating sizes of Flex components. There's an informative article about it at judah's blog.
Best of luck!
Update -- I stumbled upon a seemingly great article about Flex component lifecycle at DevelopmentArc that I'm adding to my own reading list.