In previous versions of the SDK, specifying align : 'center' to a rallygrid column config would result in both the column contents and column header being horizontally centered. If I specify this setting now, the content is centered but not the header. With relatively wide columns this becomes an issue since the column header is no longer lining up with the column contents. Is there a separate setting for header alignment, or does this need to be accomplished using CSS?
Example:
This is a bug in 2.0rc2 introduced by the restyling of the grid headers. We never have centered headers in the product, so we styled them for the default left alignment and accidentally broke the center alignment.
You can fix this in your app by adding the following css override in your app css:
.yes-harmonized .rally-grid.x-grid .x-grid-header-ct .x-box-inner .x-column-header .x-column-header-inner {
display: block;
}
Related
I know that Vuetify.js has horizontal v-toggle-btn. Is it possible to make it vertical ?
Here is an example of horizontal v-toggle-btn
Thank you for the information from AndrewHarvey
It appears in one of the newer releases the class named changed, it's now .v-btn-toggle
Since Vuetify defined .btn-toggle's display as inline-flex, you can simply add
.btn-toggle {
flex-direction: column;
}
to your stylesheet to achieve vertical display of button items.
Check pen here
See this pen:
https://codepen.io/armandsdz/pen/xqGaoe
I have a simple Foundation grid and I set display:flex to "row" element in order to get all columns be the same height.
It all works fine in Chrome, Firefox.
But on Safari, Edge, Yandex browsers (any version) those columns are a pixel or so too wide and it results in them not fitting within one row. Therefore, it wraps to two rows.
See image
Setting flex-wrap: nowrap would be an option in case of only one line but it's often not the case.
And most importantly it doesn't solve the issue at its core.
What am I missing in this flexbox world or is it a bug?
Thanks!
Addition: It happens not only when column width is, for example, 33.33333% but also when it's 25%. So where does that extra pixel come from?
The :before and :after pseudo-elements are part of a clearfix hack to contain floats and prevent margin collapse. (See this SO question about that.) Flexbox essentially disregards floats, but older browsers that don't support flexbox would fall back to using the floats so they would need the clearfix. Based on #DannieVinther and #Armands' comments, there are two possible solutions:
If you want to maintain the clearfix functionality for older browsers that don't support flexbox, you can add a rule to set width: 100%; on the :before and :after pseudo-elements. This will give the pseudo-elements a width of 100% and a height of 0, so they won't mess with the width of the rows of actual content.
.row:before, .row:after {
width: 100%;
}
If you don't need/care to support older browsers, you can simply override the clearfix hack by adding a rule to set content: none; on the :before and :after pseudo-elements.
.row:before, .row:after {
content: none;
}
I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
Long time lurker, first time asker! I'm unable to find what I want after a few nights of searching.
I'm looking for very standard bootstrap behavior.
Greater than/equal to 760px width resolution, I want fixed width.
Below 760px width resolution, I want the two lists to stack and take 100% width.
The problem is that above 1200px there is a different fixed width. I tried to fix this by making setting the .container class a fixed width, but then the sub 760px is also fixed --- no longer fluid. I've also tried using media queries.
Here's the code I'm working on: http://travelprobiotics.com/
Any suggestions?
thank you,
Evan Jerkunica
If you are hosting bootstrap yourself, you can't go wrong using bootstraps customization tool found here.http://getbootstrap.com/customize/
Look under the 'Media Queries Breakpoint' section and changed the screen-sm to 760px. (it is already defaulted to 768px so if you're OK giving away the 8 pixels, skip this step and use the code snippet below by itself.)
After that, add this snippet below in your own stylesheet, set the container to whatever width you want to be 'fixed'
#media screen and (min-width:760px) {
.container {
width: 960px !important;
}
}
My Grid resizes as the browser resizes. Now the Grid headers are too long and when the Grid shrinks, the text is cut off. The CSS solution requires me to give a fixed with to it, which is not possible since the headers will be resized. Is there a dynamic way to add ellipsis when the header width falls below a certain value?
So easy! I wrote an entire function to add ellipsis and then found out the solution is just to explicitly set the span's style as display: inline. The Ellipsis shows up automatically!
.x-column-header-text { display: inline; }