CSS positioning of images and labels on div - css

I'm developing a kind of list where my elements are clickable. I already used this code and now I have this:
However, now I need to add some more elements (one or two buttons, 1 label, and 1 image) like in the following picture.
How can I achieve this?
Thanks in advance!

http://jsfiddle.net/SaRnR/9/ - here you have it :) updated. Put your buttons inside the buttonContainer

Related

Can i make tree graph where button means leaf?

id like to do something like tree graph with buttons. Idk how to explain my idea so ive created image. I build my website via Elementor. Is it even possible please?
My image
You can do this in one section using buttons and dividers, set width for the divider, and set it using margin and padding

Can you use mat-progress-bar inside another mat-progress-bar in angular material?

So I'm trying to figure out if there is a way to "inset" two mat-progress-bar spinners inside one another in Angular-material.
Example picture of the implementation I'm trying to achieve. So far I haven't come up with a solution exept to maybe just try to move one of the spinners inside the other and scale it down somehow.. could that work?
you can set them both in a div and use absolute position
https://stackblitz.com/edit/angular-corfs4?file=src/app/progress-spinner-overview-example.html

Nativescript: How to overlay one StackLayout over another StackLayout

I have a search suggestion component that is displayed under a TextField. whenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text... I have more content under the TextField that gets pushed to the bottom whenever the Search suggestion gets populated with results. Is there any way to overlay the search suggestions over the content underneath it instead of pushing the content down? in HTML/css I would apply the position absolute and z-index css properties to the search suggestion component but this doesn't seem to be the case in Nativescript. I see that Nativescript does support the z-index css property but just applying that doesn't seem to do anything. It doesn't look like Nativescript supports the position property... Any idea how I can make this work/what i'm missing?
You have a couple quick options. One is to use a grid as mentioned in the comments. Set the views on the same row/col. This is the same as stacking views on the z axis. Or an absolute layout and use the same positioning of the views within that layout.

how to adjust the height of two adjacent cell without using dispaly:table-cell

Can any one help this..
I want to adjust the two adjacent cell height using div tag without using the display:table-cell. Please reply as soon as possible..
I don't believe you can do what you're trying to do using simply CSS.
I'd recommend using a jQuery Equal Heights plugin like this one:
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
You simply load jQuery and the plugin onto your page then use it like so:
$('.myCLASSorIDorWHATEVER').equalHeightColumns();
Hope that helps.

Flex 4: Scrolling a Spark Form to focussed element programatically?

I found this example http://blog.flexexamples.com/2009/11/02/auto-scrolling-the-contents-of-a-vgroup-container-in-flex-4/ which works great but only if you have the focussable elements in a VGroup.
However I have a Form inside the VGroup which means that the focussable elements are in FormItems of the Form. The Form can't be added directly into the Scroller and doesn't have a layout property.
I could use form.getElementIndex(formItem) and then do some math using the formItem y position but that's very ugly. Anyone have an idea how to get this working in a clean way like the above example?
Woot woot! I just found Scroller.ensureElementIsVisible()! Nevermind! :D

Resources