I'd like to position bootstrap elements - buttons or other, at a given horizontal start position on my page. The exact horizontal position should vary dynamically. It seems html (and to some extent bootstrap) wasn't exactly cut out for this but is there a good way to reliably accomplish that?
My best shot is fiddling with its horizontal margin. Is there something even more straightforward, that will bypass the need to consider all other elements in its column and can directly use the desired height regardless of what's else in the column?
Related
I have a site built using the responsive Skeleton CSS framework (http://getskeleton.com) but when viewing on a phone in portrait mode, three columns across is automatically adjusted so the boxes are vertically stacked rather than all on one line. This has been fine in general but in one particular instance when the boxes have very little content, I need them to stay horizontal - all in one row/on one line. I cannot see anywhere in the css file where this is adjustable though?!
I ended up going old school and creating one twelve column row and putting the column divs inside a td tag each. I then applied some conditional padding at the different breakpoints. Sometimes, very occasionally, you still can't beat a table in my humble opinion!
I have a UWP app that I am working on, and using absolute position creates problems when using the app on screen sizes different than the one it was designed for.
I'm not sure how exactly i should place elements at distances from each other without using margin and absolute position. How should I be doing this?
Edit: I am using XAML to design the UI.
Well, it depends on what UI you want to build up.
There are various panels and, usually, there is NO need to use absolute position in most cases.
Usually, the Grid panel is used to create flexible layouts, by adding rows and columns: for example, if you want to create a page with some content and a bottom app bar with buttons on it, you usually create a Grid with as many rows as you need for your content controls, plus one for the bottom appbar itself.
Years ago, I also started building UIs by using absolute position for every element, but then times passes and you start having a flexible mind in order to build flexible layouts.
Sorry to not answer any further, but your question is just TOO broad to give any precise answer.
Best regards
How do you properly position elements in XAML without using absolute position?
You should use an appropriate layout panel:
Layout panels are containers that allow you to arrange and group UI elements in your app. The built-in XAML layout panels include RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, and Canvas.
Please have a look at http://www.bootply.com/133473.
I have at least a couple of problems and I didn't find any solution up to now...
First problem:
The leaflet map is 0px height and the next row is not in the correct position.
Second problem (but maybe it is related to the first one):
On a small device the width of the map is the full width but I'd like to have a margin and I wasn't able to get it (I tried but margin-left, margin-right and padding-left, padding-right...) and of course the text row is superimposed to the map and that's not what I want...
Looking at your bootply posting, it looks like your first problem was solved (I see the map so the height must not be 0px).
As for your second problem, it is the Bootstrap Editor that is not able to show your app on smaller screens. This problem may go away when you view your app on its own web page.
So,
I have a fairly simple parent div containing two child divs, one is text (floated left), the other contains an image (floated left against the first child)...the float of the second is kind of irrelevant (I just don't want it to drop down below). But what I want to achieve is for the image to sit in the bottom right of the parent and STAY there. At the same time I want it to be part of a fluid grid and for the distance from the bottom/right to also be responsive.
I tried absolute positioning (with an extra parent added around it to position:relative), which just didn't work at all...it could only be left/top positioned which then wouldn't work in %'s.
I then tried adding padding (top, left) instead of using positioning, thinking I could maybe push it into place...which worked great for keeping it to the right (pushing left), but obviously didn't work for the bottom (pushing from the top), as this value needed to increase as the screen decreased rather than the other way around (doh!).
Just wondering if anyone has any ideas or creative solutions?
I know I'm trying to do a number of tricky things all at the same time!!
I know there are plenty of answers about this, but something I do not get right, as my knowledge level of CSS is below elementary.
I have a div which I dynamically populate with labels (asp .net in code behind). I would like this div to expand only vertically, having a fixed width (say to 100% of the page). The layout I try to achieve is the one of a paragraph consisting of words represented by the <asp:Label> items.
Any help is mostly appreciated!
Expand Divs Vertically has detailed information and possible methods. It might be helpfull.