I am using bootstrap 3 for a webapp that I am building, normally when building a website I would either want my page centered (default .container) or have it on a total page width (.container-fluid). In other words the grid system would be a vital part of building the page. With this app I am more interested in using it for everything else but if I can make it work the way I need it, it would be a huge plus.
The app that I am building now does not need the bootstrap grid perse as it has a specific use case at a minimal screen resolution, the app does not have to be scaled for tablet or even a phone.
Just to give you a mental picture, I've build a custom navigation (75px width) that is stuck to the left side of the page. What I would like to have is to have the .container grid system NOT centered but aligned to the menu on the left.
I want something like this
I know that .container-fluid technically takes care of the MOST part of so that is NOT what I am asking.
The design that I currently want to build is based on the .container centered grid and not the fluid one.
Does anyone have some tips on how to modify bootstrap to make it work the way I described?
Related
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.
I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
I'm making a Chrome web app using the flexible box model, but I've gotten stuck on a (horizontal) scrollable window where I have a whole bunch of featured items.
I want to make the featured items have a constant aspect ratio, but I want them to be able to size with the rest of the page. The space that the featured items take up is 30% of height.
Any ideas to get this done? ( I can provide more information, but I'm just not where sure to start. Add a comment if you need more info and I'll edit this question).