Alright, so here is the situation...
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width: 18%;
padding: 0 1%;
However, I have two problems with this:
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow!
2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
Are there some js tricks I could use? I don't even know...
Thanks
Edit: Here is my demo fiddle
A pure CSS solution, based on justification of the links, though still as semantic list items:
See demo fiddle.
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
Update:
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
See updated fiddle.
Here's a solution with jQuery
http://jsfiddle.net/pxfunc/kKJcr/
The menu is dynamically sized based on number of menu items and the width of the nav ul
var $nav = $('#nav');
var formatNav = function() {
var menuItemCount = $nav.children().length,
// base width
menuItemWidth = $nav.children().width(),
// border + padding + margin + base width of the menu item
menuItemOuterWidth = $nav.children().outerWidth(true),
// border + padding + margin only for the menuItem
menuItemDiff = menuItemOuterWidth - menuItemWidth,
// menu item container width (the <ul>)
navWidth = $nav.width();
$nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};
I did something like this at a previous job, but it did require a blend of JS and CSS.
One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.
Just be careful not to hit exactly 100% cause this may cause wrap.
However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.
Then, the solution is to set up a series of css classes designed to each scenario:
.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */
And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...
.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}
...right. BUT - you get to set up a nice styling that actually fits various scenarios.
UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:
.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem..."; /* the user has failed, administer punishment*/}
Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.
If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.
I'm sure there could CSS3 answers but I dont know them.
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I've got a simple Bootstrap3 page, with some existing rows, and I want to insert a single new row that is full screen height.
What's the best (most clean & compatible) way to do this? I'd say using CSS3's new "height:100vh" would do the trick, but it still doesn't seem to be supported in quite some browsers.
Upon searching I came accross all sorts of tricks and wizardry, including using jquery, or plugins, but I wonder if there is just a simple css attribute or Bootstrap3 class that I can use for this?
Note that my page does not consist of just this one full-height row, I've got several dynamically sizes rows with random content, and now I want to insert one new row that has to be full screen height.
height:100vh
Should do the trick like you said, IE 9 support it very well.
EDIT :
For android user then forget CSS use Javascript :
var h = document.getElementById("container").offsetHeight; //the parent container or body
document.getElementById("my_100_percent_row").style.height = h + "px"; //the row that must have 100% height
So this is what I got:
http://mysite.com
Now when you press on the big fat blue button at the right with "Make An Appointment" a lightbox appears. Although this lightbox goes under the slideshow and the same with the menu, like the z-index is bigger than the lightbox. Although i have set the z-index to 999999 for the lightbox, and still it appears under them.
What should I do here?
The root of your problem is the placement of your modal-bg and modal-box.
They're both inside an element with the class "page-content-shadow" -- this class has both a position of relative and a z-index of 5. This means that even though you're setting the modal to have a z-index of 99999, that's only with the context of its parent element's z-index (which is 5 in this case).
To fix this all you have to do is change the z-index for the page-content-shadow class to 100. That will put it on top of both your nav and your slideshow (in Chrome at least).
I'm about to face a similar problem, but I've been ignoring it as best I can.
My plan, although it may not be perfect, is to run a script that will find the highest z-indexes on the page and decrement them by 1 so that my object can actually be on top.
Since you're using jQuery you could use a plugin like TopZIndex or you could simply inspect that plugin and borrow the code that makes $.topZIndex() work.
Once you have the objects with the highest z index you can mod their CSS to lower the value.
Using that plugin, the code would look like this:
var bastardObjects = $.topZIndex();
bastardObjects.css("z-index",999998);
EDIT: I'm sorry if I misunderstood, I thought you were saying that you had multiple objects with the maximum z-index and therefore they weren't playing together nicely.
I have used 960gs to get a first version of some pages going (I am not the designer, but would like to have an approximate layout before handing it to one). It has helped me greatly, but now I am wondering if there is a CSS grid framework where the columns will expand/shrink to make use of all available space in the browser window. Using a 960 pixel top-level container in 960gs, even in my humble 1280-pixel-wide screen there are large empty bands on both sides.
Are there alternative grid systems where I can define a certain column to "grow" if the browser window is larger than expected?
Many thanks!
lara
There is a Fluid 960 Grid System too.
See this ala article on fluid grids and example. Also see this example.
I'd use Unsemantic it's from Nathan Smith who developed 960.gs.
Either that, or you can customize Twitter Bootstrap so that you only take the responsive grid and leave out all the other features that might be unnecessary for your project.
Try the Dead Simple Grid. You can set the columns to have fixed or percentage widths. Setting to percent will dynamically fill the available space. It is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
Cascade Framework's grid system can do exactly what you want... and lots, lots more.
If you use the tag <div class='site-center'></div>, you get a centered div with a fixed width for desktop (width is different depending on browser width) and the full available width for mobile. You can, however, just drop that tag and use the full available width on desktop as well. See this website as an example of an implementation thereof.
The grid elements themselves are percentage based. That means that they fill up a certain percentage of the available width. Out of the box, Cascade Framework's grid system supports 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and far more combinations. In fact, you can even use combinations like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
To be able to use Cascade Framework's grid system, I recommend you use either the file 'build-full.min.css' (about 8kb minified + gzipped) or the file 'build-full-no-icons.min.css' (about 10.8kb minified + gzipped) in the folder 'assets/css/cascade/production, depending on whether you want to include support for its icon set. You can also create your own build and pick only the modules you want. For the sake of brevity, I'm skipping details on how to do that. If anything isn't clear about creating your own build and you'd like to know more about this, please send me a PM to avoid derailing this thread by going too far off-topic.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
See also http://www.cascade-framework.com/grid.html and http://jslegers.github.io/responsiveness/ .
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.