I use <material-date-range-picker ...> but it is displayed to tall. I found that material_date_range_picker.scss declares .main-content { ...; height: $datepicker-main-content-height; ... } and $datepicker-main-content-height is defined as $mat-grid * 9 which is 72px. The component looks ugly and breaks a layout. Other datepicker components don't define height and look normal.
I tried to override the height in my CSS by :host .main-content { height: auto !important} but as Angular adds some _ngcontent-rnp-XX classes to elements it doesn't apply.
Does anybody know how to style material-date-range-picker height? (And why it is styled to have fixed height).
So you might want to try to use this mixin here which might work better for your environment. https://github.com/dart-lang/angular_components/blob/c644746d2824df7cfaf0a34f900b1f8557caddbc/angular_components/lib/material_datepicker/_mixins.scss#L221
You can also see how it sets the .main-content height by using :ng-deep. For Google products we don't want people to customize using ng-deep as it makes everything part of public API which makes migrations hard, but it should be OK in this content.
We are going to look into providing a mixin for teams to set the height themselves in a more maintenance friendly manner.
I'm glad you like using the widgets, but I would ask that you take care with your criticism. This particular design works well for our products and many of our designers love it and thinks it looks beautiful. I understand it doesn't work for your use case, but hopefully the customization outlined above will work for you.
Related
We have an Angular project, with Material and we're having some issues with overriding styles.
For example, if we want to change the border-radius globally on <mat-card>, we currently need to add important to the styles:
.mat-card { border-radius: $some-var !important; }
This seems to me to be caused by the material styles loading after our own custom styles. At least according to "traditional" CSS standards. So usually you could just change the load order around, and the last loaded styles would overwrite the previous.
Is there a way to achieve this? Or how are we supposed to style these kinds of elements, without adding !important all over?
You are not really supposed to "style these kinds of elements" - that's not what Angular Material is about. But some customization can be done - and a guide is available: https://v6.material.angular.io/guide/customizing-component-styles.
You especially need to understand how style is encapsulated and dynamically applied. You can control when the global Angular Material style sheet is loaded in the "traditional" way, but you cannot control when all component style is applied because some of it is dynamic. If you hope to completely restyle everything - you should probably consider a different library as it is not always merely a matter of redefining class properties.
I have an XtraReport that overflows text on to the next page but occasionally cuts the last line of text from the first page in half when it does.
I would normally handle this with the height property of the text area but I am unsure how to target a specific table row of an XtraReport to work out what the remaining height of the page is to achieve this or whether that would even work in this instance.
I'm rather hoping there's a simple work around to achieve this, please don't go too much out of your way to help out as I won't be investing much development on this.
I don't think there are any settings I have missed within the designer, perhaps there's a golden font size or line height that the reports want to overflow correctly.
Any help or direction would be greatly appreciated, thank you.
If there is no simple way, I will just have to loop through the tr / td tags and see if by manipulating the height I can find that sweet spot, i just worry that it will hide page 1 but still be split on page 2.
It seems to me that you use the ASPx/MVCx -DocumentViewer,
this control shows you a html content which is not suitable for pixel-perfect documents.
I recommend you to try the ASPx/MVCx WebDocumentViewer which is like the the Google Docs shows pixel-perfect document and more convenient with bootstrap and other progressive web frameworks.
here are demo and docs.
I am starting to make my Vaadin web app responsive. Reading Vaadin docs, I managed to make a CssLayout flexible such that an image is shown either to the left of a text section or in a separate row depending on available width.
Now I want to make my login form flexible. By default, captions are moved to the left of the fields. How can I achieve that the captions are moved to the top of the fields when a certain width is reached? Is that even possible with FormLayout?
Can't really imagine that it is possible with CSS because the FormLayout is rendered as HTML table. If so, what is a simple alternative?
That is not possible with FormLayout. Structure of FormLayout is not flexible. Also there is not simple alternative for that. You can use CssLayout or create your own component container.
Starting point for this can be extending AbstractComponentContainer as described in Creating a simple component container
Please bear with me, I'm having a little trouble wrapping my head around this one...
On face value I know this questions seems foolish. The answer us you DON'T modify your bower contents because anything you do is going to be overwritten each time the bower updates and you would have to reimplement the changes over and over.
But if the situation effectively requires that I modify the CSS stylesheet that styles one of my bower components how do I handle this?
The only solution that I can come up with would be to have my custom stylesheet style the same components, make sure it is called after the original bower stylesheet, and let my alterations cascade over the initial styling.
This will work fine for certain attributes (color, etc) but what about more "incremental" attributes? For example lets say the bower gives an item a left margin of 5px, but I set it to 2px.
Would my style cascading on top get negate the initial one or would they combine to give me a margin of 7px?
If they are added together does that mean I should reset these bower item attributes in the CSS reset at the top of my custom style sheet?
Sorry if this question is dumb or way off base, I just don't understand how I should handle this.
CSS properties are not cumulative. They don't add together. If a property is set in multiple places, the property with the most specific selector wins and the rest are ignored. You can override properties set before by re-specifying them with a higher or equal specificity.
The correct way in this case is probably to override the few styles you need in your own stylesheet that is included after the component's stylesheet, as you said.
I have a Silverlight DataGrid and I have set the ItemsSource to an instance of PagedCollectionView (I'm wanting to paginate my data with DataPagers).
I've noticed that the vertical scrollbar disappears when using the PagedCollectionView - which is a problem for me because I have the DataGrid nested inside of a Grid in which the RowDefinition.Height is set to Auto (I want my DataGrid to be as big as possible). Now the DataGrid extends beyond the window. I still don't see the Scrollbar when I set VerticalScrollBarVisibility="Visible" on my DataGrid - just a gray strip where it should be.
Does anyone know how I can use PagedCollectionView without having to explicitly specify the height of the DataGrid?
EDIT:
Woops - this was my fault. I can't remember what I did wrong (I figured out my problem a week or two ago), but it had something to do with me not paying attention to the surrounding layout.
Thanks,
-Charles
This is nearly always related to the container of the grid rather than the grid itself. A real pain. There are lots of good references for understanding and refreshing your knowledge on the layout system:
http://www.liquidjelly.co.uk/supersearch/?query=silverlight+layout
http://msdn.microsoft.com/en-us/library/cc645025(VS.95).aspx
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx
http://www.nikhilk.net/Silverlight-Layout-Panels-1.aspx