Loaded Milestone 20 of 4.0 and all my screen layouts and dialogs are trashed.
I use an inline style for the input fields as all my input fields are different sizing, and I see that the Bootstrap look and feel sets a standard size of 206px. It appears to ignore my style.
<xf:secret id="loginUsername" appearance="minimal" xxf:size="8" ref="instance('login')/username" style="width: 80px; verticalAlign: middle;"><xf:label/><xf:hint>User Name</xf:hint></xf:secret><br/>
Any thoughts?
Bootstrap sets a width on input elements, so the width: 80px you set there with your style on the containing span has no effect. I think the best way is to use a class on the xf:secret, and other control, instead of a style, and then use an external CSS to set the width of the input based on that class, with a rule which is stronger than what Bootstrap has.
Since your form is using Bootstrap, I imagine that you created it with Form Builder, in which case see the section Writing your own CSS.
Related
We are using Highcharts styled mode in our project and very happy about it.
However, css object (inline styles) in certain situations better works for us.
For example, legend.itemStyle property with {textOverflow: undefined, width: "dynamically calculated width"}
I'd like to know if there is a way to "overwrite" styled mode setting only for legend styles or give the inline style higher precedence for this particular situation.
JSFiddle example
Hope it makes sense.
You can set your own custom style for certain elements.
In styled mode, the legend items can be styled with the .highcharts-legend-item class.
Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/legend/
API: https://www.highcharts.com/docs/chart-design-and-style/style-by-css
API: https://api.highcharts.com/highcharts/legend.itemStyle
Angular Material form fields are potentially very convenient because they add a bunch of classes to the surrounding element depending on whether the field is selected, empty, filled, etc. I want to use these classes to customize the style of the label and other custom elements placed inside the field container (example: making the label change color when the input is focused).
The problem is that Angular Material also adds a bunch of other properties, styles and elements that I don't want to deal with. Even if I add floatLabel="never" and floatPlaceholder="never", the placeholder is still removed from the input and turned into a label, which is positioned relative to the entire container. If I place other elements inside the mat-form-field element (like a regular label), this messes up the positioning of the placeholder-turned-label, causing it to appear outside the input.
Is there any way I can make Angular Material not turn the placeholder into a label, but just leave it as a normal placeholder?
So I wasn't able to actually fix it properly, but I was able to get around the issue by adding styles to undo the style changes that Angular adds.
mat-form-field.mat-form-field-hide-placeholder .mat-input-element::placeholder{
color: #ccc !important;
-webkit-text-fill-color: #ccc !important;
}
mat-form-field.mat-form-field-hide-placeholder .mat-form-field-label-wrapper{
display: none;
}
It would be nicer if there was a way to not have the .mat-form-field-hide-placeholder class added in the first place, but until someone figures this out this will have to do.
Turns out all you need to do is add appearance="none" to the field tag, e.g.:
<mat-form-field appearance="none">
<input matInput [(ngModel)]="email" placeholder="Email">
</mat-form-field>
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.
Can any1 tell me how to change the css style properties internally without changing custom.css file in jquery..so that the internal properties can effect the webpage..like changing properties of widgets and jquery-ui(ex:buttons,datepickers etc)...
You can just override the styles defined in the jquery style sheets in your own stylesheets. CSS stands for Cascading Style Sheets. The Cascading part means that one style can override another. You just have to place it further down the evaluation chain (or make it more specific, or any number of other ways).
You just create your own style sheet. Make sure it comes after the jquery-ui stylesheet in your page, and redefine the styles.
All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?
Thanks
Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]
So to avoid breakage of the widgets, i managed this:
.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
width: 14.95%;
}
It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.
[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report
With new version you can:
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
The old style solution still works:overwriting the ui-input-search
div.ui-input-search{
width: 55%;
display: inline-block;
}
don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)