I've created a form in a dialog using material forms, but I can't seem to get the inputs to be wider than 180px despite following numerous examples including https://material.angular.io/components/input/example.
I'm sure this is a pretty standard CSS thing, but I don't have that sort of brain so I cant figure out the problem.
Does anyone have a serious / non-trivial example that works??
Here's mine:
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<form novalidate #f="ngForm" class="form-full-width">
<mat-form-field class="input-full-width">
<input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
<mat-hint>Enter a unique name.</mat-hint>
</mat-form-field>
<mat-form-field class="input-full-width">
<textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
<mat-hint>You should describe the purpose/use of this thing.</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
CSS :
.form-full-width {
min-width: 150px;
max-width: 500px;
width:100%;
}
.input-full-width {
width:800px;
}
.mat-form-field.mat-form-field {
width: auto;
}
Thanks.
can you try using
mat-form-field {
width: 100%;
}
I had the same issue in a mat-card, this worked for me.
Seems like it's something to do with View Encapsulation. This thread explains it: https://github.com/angular/material2/issues/4034 but changing encapsulation for the component causes all sorts of compile failures.
This article gave me the correct solution:https://material.angular.io/guide/customizing-component-styles
I'll move my style to global scope...
.formFieldWidth480 .mat-form-field-infix {
width: 480px;
}
and in the component that opens the dialog:
this.newDialog = this.dialog.open(NewDialogComponent,
{
width: '650px', height: '550px',
data : newThing,
panelClass : "formFieldWidth480"
});
I hope this saves someone else the day I lost...
Just like Jonesie said, this behavior is related to View Encapsulation. In this context .mat-form-field-infix takes 180px as default value probably beacause of this. The auto value lets the browser calculates the width instead of puting hardcoded value. The !important declarations forces the style override for this.
I am using !important since it complies with the rules for the use of this property. See docs
::ng-deep .mat-form-field-infix {
width: auto !important;
}
It's that .mat-form-field.mat-form-field in the css that's causing an issue. As soon as I removed that, I could control the widths with .input-full-width width setting. I set up a demo here: StackBlitz.com
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<form novalidate #f="ngForm" class="form-full-width">
<mat-form-field class="input-full-width">
<input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
<mat-hint>Enter a unique name.</mat-hint>
</mat-form-field>
<mat-form-field class="input-full-width">
<textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
<mat-hint>You should describe the purpose/use of this thing.</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
.form-full-width {
min-width: 150px;
max-width: 500px;
width:100%;
}
.input-full-width {
width:800px;
}
/* .mat-form-field.mat-form-field {
width: auto;
} */
The solution I found was this one into general style.css
mat-form-field {
margin-left: 2.5rem;
width: calc(100% - 2.5rem);
}
::ng-deep .mat-form-field-infix {
width:800px !important;
}
This should work fine.Not sure if it can be done without custom CSS.
I have the same issue, fixed it with.
But still no idea why this issue is happening...
.mat-form-field-infix {
width: 100%;
}
Related
What do I want to achieve
So there is a gap between my jumbotron and my footer. I want to remove that gap. I did it already successfully by setting the margin-bottom to 0px; But at that moment, I had to pass an ID to the Jumbotron element. Now I want to achieve that same effect without passing an ID, but with classes.
I don't want to use inline styles. I want it in a separate css file.
In an old library (react-bootstrap not reactstrap) I could select for example all components from a certain type, like I did in the css provided below.
So the mistake is probably the selector in the css file. I couldn't find anything online which specifically shows it in a seperate "css file" way. Only with inline styling.
MainContent.js
import React from 'react';
import './MainContent.css';
import { Jumbotron, Button, Form, FormGroup, Label, Input, Container } from 'reactstrap';
const MainContent = () => {
return (
<Container>
<Jumbotron>
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input type="text" name="password" id="examplePassword" placeholder="password placeholder" />
</FormGroup>
<Button>Submit</Button>
</Form>
</Jumbotron>
</Container>
);
}
export default MainContent;
MainContent.css
.Container {
margin-bottom: 0px;
}
.Jumbotron {
margin-bottom: 0px;
}
If you don't want to do it with IDs or with inline-styling, there is a way I would call a hack.
In MainContent.js add className attribute to the component as follows:
<Jumbotron className="jumbotron">
And in MainContent.css add !important in the statement you want to override other stylings:
.Container {
margin-bottom: 0px;
}
.Jumbotron {
margin-bottom: 0px !important;
}
Unless you override like this, margin-bottom: 2rem from node_modules/bootstrap/dist/css/bootstrap.css is used.
I am trying to remove the padding:16px; property the md-subheader-inner inherits from the md-subheader directive.
The problem is, that when applying another class on my subheader, it seems like i can't change the inner style properties. I have made a codepen trying to show what the problem is here.
Whenever I inspect the element, it doesn't matter which of the two solution I made, the css properties are not updated... I think I am missing something obvious here, but I can't figure out what this is.
Please note that I don't want to use direct modification on md-subheader class because I am using that directive on a lot of places and I don't want any side effect (hence my 'padding-less-inner' class).
Html:
<md-select name="test" multiple="true" ng-model="whatever">
<md-subheader class="md-sticky padding-less-inner">
<md-input-container style="width:100%;padding-left:8px;padding-right: 24px;margin-bottom: 0px;">
<input style="width: calc(100% - 30px);float: right;" ng-model="searchText" class="_md-text" onkeydown="stopPropagation(event)">
</md-input-container>
</md-subheader>
<md-optgroup>
<md-option ng-value="item.id" ng-repeat="item in querySearch()">{{item.name_fr}}</md-option>
</md-optgroup>
CSS:
.padding-less-inner {
.md-subheader-inner {
padding: 0 !important;
}
/*div {
padding: 0 !important;
}*/
}
I made a slight modification to your CSS:
.padding-less-inner .md-subheader-inner {
padding: 0 !important;
}
Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<div class="input-group">
<span class="input-group-addon">some text</span>
<input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.
Anyone that can shed some light please?
try this
http://jsfiddle.net/Dzhz4/1/
.input-group-addon {
min-width:300px;// if you want width please write here //
text-align:left;
}
.input-group-addon { width: 50px; } // Or whatever width you want
.input-group { width: 100%; }
The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.
I have a a text type input field, and I have a button for "Search". I would like these 2 objects to be horizontally aligned; with the button being as big as it wants to be, and the input field taking up the rest of the space. I have been trying with CSS all day, but with no avail.
I am using RoR, and employing the Bootstrap library. I was wondering if there was anything out of the box that would make this work. I have also tried using flexboxes, but the input field seems to have a mind of its own. Below is the problematic code.
<div class="mini-layout fluid">
<div class="mini-layout-body">
<h2>Shows</h2>
</div>
<div class="mini-layout-sidebar">
<div class="search_container">
<input id="search_shows_text" type="text" class="search-query">
<button id="search_shows_button"
type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I've been able to get the search_container class to lay things out horizontally, but getting its children to resize appropriately has managed to escape me all day.
Any help is greatly appreciated.
EDIT Thanks to Krishnan and the SO community I got the solution working. Below is the code for anyone else.
HTML
Search
CSS
.search_container
{
text-align:center;
margin-top: 5px;
}
.text_area
{
width: 55%; //Change as per your requirement
display: inline-block;
margin: auto;
}
.but_area
{
width: 25%; //Change as per your requirement
margin: auto;
}
By default bootstrap have width set to 206px for text area and 71px for submit button. So in order to make it accomodate your requirements you have to override those default properties. I would probably do something like this.
create a class text_area with custom property
.text_area
{
width: 85%; //Change as per your requirement
}
create a class but_area with custom property
.but_area
{
width: 10%; //Change as per your requirement
}
And would use it in input text area and button.
<input id="search_shows_text" type="text" class="search-query text_area">
<button id="search_shows_button"
type="submit" class="btn btn-primary but_area">Search</button>
It will make my text area to occupy 85% of the space and button to occupy 10% space in my window and remaining 5% of space is left free.
I want that the unregistered users on my website, see the entire website's pages with a blur effect.
How can I create this blur effect with css ?
Try this...
body {
filter:blur(3px);
}
You'll need to add -moz-, -webkit- prefixes (or use something like PrefixFree)
Here's some results, if by blur you mean fuzziness:
This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:
http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur
If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:
http://jsfiddle.net/9qnsz/2/
This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:
Gaussian Blur onHover Using jQuery
EDIT: As requested, the contents of the jsfiddle:
<div class="container">
<div class="overlay">
<p>Please register etc etc...</p>
</div>
<form action="javascript:;" class="form0">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form1">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form2">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form3">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form4">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
</div>
.container {
width:500px;
height:500px;
position:relative;
border:1px solid #CCC;
}
form {
position:absolute;
left:10px;
top:10px;
}
form.form0 {
left:11px;
top:11px;
opacity:0.1;
}
form.form1 {
left:8px;
top:8px;
opacity:0.1;
zoom:1.02;
}
form.form2 {
left:11px;
top:11px;
opacity:0.1;
zoom:1.01;
}
form.form3 {
left:9px;
top:9px;
opacity:0.2;
}
form.form4 {
left:11px;
top:11px;
opacity:0.1;
}
.overlay {
width:250px;
height:250px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
border:1px solid #666;
}
Edit (2015): The filter css property is forming tantalisingly complete coverage. This lets you write rules like body { filter: blur(10px); }, which blurs the entire page.
From what I can tell, there's no cross-browser way of blurring an element, even in this "modern age" of html5, css3, etc...
There is a blur filter for IE (and only IE). An svg blur filter can also be applied to an html element but from what I can tell, it only works in Firefox.
If you're happy for browser-specific hacks, go ahead, but if you need the effect to work on all browsers you're outta luck.
If you just want to blur text, you can use a clever text-shadow trick:
.blurry {
color: transparent;
text-shadow: 0 0 3px black; /* set to colour you want */
}
There are also ways to blur images, either by overlaying transparent, shifted copies of the image, or by processing the data with javascript.
Perhaps you can cobble together these techniques, and it will achieve what you want.
But the broad answer, regrettably, for the moment is: there is no easy, holistic way to blur stuff in HTML.
(I thought we were living in the future, man? What gives?!)
Addendum: Hope is in sight. At the time of writing, some webkit nightly ("bleeding edge") builds are implementing some of the new css filter specification. That demo doesn't work on any webkit browser I have installed, so it's still far from mainstream yet.
You can add a fixed div set to 100% width and height to your body. That will fill the screen and you can put either a semi-transparent background on it or use CSS3 to create the effect you are looking for.
Create a new div tag with id="body_bag" and put your rest of the site edits within that div and use following css to give the blur effect.
#body_bag {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}