I'm using #angular-material-components/datetime-picker library for date picker. I use hideTime to just display date picker. The simplified code is below.
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker hideTime="true">
</ngx-mat-datetime-picker>
</mat-form-field>
The result is as follows.
How can I adjust the width of this date picker so that the highlighted area is minimal?
I tried the following style class in styles.scss, hoping to overwrite its default styling, but it does not work
.mat-form-field-wrapper {
width: 150px !important;
height: 36px !important;
}
Please help. Thank you
You need :host ::ng-deep to allow the access of DOM elements that are not in your component's HTML and overwrite its CSS styling rule.
Note:
Be sure to include the :host selector before ::ng-deep. If the
::ng-deep combinator is used without the :host pseudo-class selector,
the style can bleed into other components.
.component.css
:host ::ng-deep .mat-form-field-wrapper {
width: 150px !important;
height: 36px !important;
}
Sample Solution on StackBlitz
References
(deprecated) /deep/, >>>, and ::ng-deep
Related
On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.
I'm using Material 2
In my html I have the following:
<div class="case-nav-container">
<div *ngFor="let item of nav">
<a md-button
routerLinkActive #rla="routerLinkActive"
class = "case-button"
[class.active]="rla.isActive">{{item.display}}</a> <br>
</div>
</div>
In my SCSS I have:
a.case-button{
min-width: 200px;
text-align: left;
&:hover{
border-left: solid blue 6px;
background-color: none;
}
}
My question is how do I remove the bg-color of the button?
The background color comes in the form of a focus overlay div. This will remove it,
template:
<a mat-button class="no-hover">Basic Button</a>
css:
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
demo:
https://stackblitz.com/edit/angular-material2-issue-dyck3s
I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.
Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
I am using simple form for bootstrap in my rails app. I am trying to figure out how to style radio buttons in my form. The radio buttons for Yes and No are right on top of each other (and very close to the button field). I'd like to add padding to each segment (so space in between the button and the label and then more space between the two options.
I have tried this (to see if I can even force CSS styling into my form. It isn't working at all (the text isn't even changing the font-weight - which is my test to see if it works).
<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {}, {:class => "create project"} %>
I have a css.scss file for projects with this class defined:
.createproject {
font-weight: normal;
padding-right: 20px;
}
My first question is how to I add CSS styling to Simple Form components (yes I have read the Simple Form documentation and I can't figure out the answer from that) and then, how do I add padding to each component of the attribute (so there will be padding between the button itself and the label and then more padding between the yes and no options)?
Thank you
First, change your CSS class from 'create project' to 'create-project'
Then try something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input {
margin: 5px 5px 0px 5px;
}
label {
margin-right: 20px;
}
}
To style just the radio buttons (and not all the inputs and labels in the form), you can do something like this:
.create-project {
font-weight: normal;
padding-right: 20px;
input[type=radio] {
margin: 5px 5px 0px 5px;
}
label.radio {
margin-right: 20px;
}
}
It sounds like you might not be using your browsers CSS editing tools to adjust element styling (F12, or right click -> inspect element). This tool should give you insight into how simple_form_for structures the DOM.
Your class name in your form element is "create project", but the CSS class is createproject. Have you tried removing the space in the former?
I have the following button in my jQuery mobile 1.4.0 , I want to modify its border radius in order to be as the button in the following image , I have tried the following code but it didn't work for me , How can i modify the button border radius in jQuery mobile 1.4.0? Plese help me ..
<div class="ui-btn ui-input-btn center_BTN " >
<input type="button" id="save" data-inline="true" value=" Save" data-icon="check" />
</div>
CSS
.center_BTN {
text-align:center;
background-color:transparent !important;
border:none;
}
.center_BTN.ui-btn,.center_BTN .ui-input-btn{
border: solid #cccccc 5px;
border-radius:32px !important;
}
Update
jQM has added a new feature which doesn't require any JS intervention. Create a custom class e.g. foo and then add data-wrapper-class="foo" attribute to input itself.
<input type="button" data-wrapper-class="foo" />
Demo
Old answer
jQuery Mobile dynamically wraps input in a div where all CSS styles are added to it, hence it is not possible to style it statically.
Create a custom class with all your CSS and add it after page is created.
$(".selector").closest("div").addClass("custom-class");
Demo
Rounded rectangle button
.ui-btn-corner-all {
border-radius: 1m;
}
Rectangle button
.ui-btn-corner-all {
border-radius: 0m;
}
I am having a listbox and I want to remove its border. Can any one help?
I thought of using clip in jquery? Anyone knows that?please help
<select id="lbCommcatFrom" runat="server"
style="height: 230px; width: 232px; border: none;"
multiple name="lbCommcatFrom" class="ContentTextNormal">
</select>
or set border color to transparent.
either in css border-color: transparent;
or in code behind something like
listbox.BorderColor = System.Drawing.Color.Transparent;