I'm using Angular6 with material-designs. What I'm trying to do is get color input from mat-form-field. For that I used matinput type="color" inside my input tag. My HTML file is as follows,
<div>
<mat-form-field class="form-field">
<mat-label>Color</mat-label>
<input matInput type="color" formControlName="color"required placeholder="Color">
</mat-form-field>
</div>
Then I have added some CSS on it to design the color picker box according to my need,
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 25px;
height: 25px;
float: right;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
Now the output what I'm getting is,
Even though this contains black color in default, the form field didn't get any default input. So what I want to do is get the default color box as follows. (To easily understand the requirement I have designed my expectation using photoshop),
You have to add some styles and need some changes in ts file code to display that box
Here is a working example: https://stackblitz.com/edit/angular-tbkqbt
Related
I am trying to integrate an HTML 5 required checkbox into a form:
<p>
<input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
<br>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
</p>
It is not displaying in a single browser. I haven't had this problem with other sites before, this site is running Bootstrap v2.2.2.
I found some possible solution with labels which didn't work.
Your Style.css file has this rule:
input[type="checkbox"] {
display: none;
}
Delete it and you will see your checkbox.
If you need that rule for whatever reason and you only want to override it for this particular checkbox, then you'll have to add another CSS rule to override it. Obviously, adding an inline style will do the job, but it might be not the best way to go:
<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">
Your style.css might contain the appearance css property. This is used to display an element using platform-native styling, based on the operating system's theme. Look up : https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
your code might contain a css rule such as:
input {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
if you wanna keep this property and change the checkbox specifically then use :
input[type="checkbox"] {
appearance: checkbox !important;
}
You can use both css.
But here
style="display: inline-block;"
inside input type are override display: none;
input.checkbox {
display: inline-block;
}
/*input[type="checkbox"] {
display: inline-block;
}*/
<p>
<input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
How can I have a Label and a Button.Group be attached to a Dropdown in Semantic UI for React?
The attached picture shows what I have currently. If I try using the attached attribute, the label or button group become nested within the dropdown.
Edit: Following is the Semantic UI React markup I currently have:
<Label size='big'>Code</Label>
<Dropdown
options={options}
placeholder='Choose a Patch'
search
selection
allowAdditions
value={value}
/>
<Button.Group>
<Button icon='save' content='Save' color='green' />
<Button.Or />
<Button icon='clone' content='Clone' color='yellow' />
<Button icon='cogs' />
</Button.Group>
I got this to work with semantic-ui-react v2.0.3.
Here's the markup I used:
<Container className='refreshable-dropdown'>
<Dropdown className='left attached refreshable-dropdown' multiple select />
<Button className='refreshable-dropdown' attached='right' icon='refresh' />
</Container>
You can see I added a CSS class called refreshable-dropdown. I added a "refresh" button next to my dropdowns. Here's the CSS classes I used:
/* This is for "fluid" dropdowns that take the whole width of
* their container.
*/
.ui.container.refreshable-dropdown {
display: flex;
flex-flow: row nowrap;
width: 100%
}
/* If you want the dropdown "inline" with other content, apply
* the inline CSS class
*/
.ui.container.refreshable-dropdown.inline {
display: flex-inline;
flex-flow: row nowrap;
}
.ui.attached.dropdown.refreshable-dropdown {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.ui.attached.button.refreshable-dropdown {
border: 1px solid #2185d0; /* Specific to my button color */
border-right: none;
box-shadow: none !important;
vertical-align: top;
}
.ui.attached.button.refreshable-dropdown:hover {
border-color: #1678c2; /* Specific to my button color*/
}
Note that I left the select attribute on the Dropdown. This causes some different HTML to be generated than other markdowns, so this may not be 100% applicable to your situation. But I hope it'll at least give you some inspiration for making this work for you. Oh, and here's the resulting dropdown:
I have the following HTML
<label class="item formulario item-input item-floating-label" ng-class="{'has-error': registroForm.nombre.$invalid && registroForm.nombre.$dirty, 'valid-lr': registroForm.nombre.$valid && registroForm.nombre.$dirty}">
<span class="input-label">Nombre</span>
<input type="text" placeholder="Nombre" name="nombre" ng-model="vm.nombre"
pattern="[A-Za-z'áéíóú ]+"
ng-minlength="2"
ng-maxlength="30"
required>
</label>
I need to set the following style:
label.item.formulario {
border-style: none none solid none;
border-color: darkblue;
}
But the custom style is not taking effect. If I remove my custom name ".formulario" from my CSS selector and also from the class list in my HTML, the style works perfect BUT it modifies the wholes label with an item class. I just need to modify a specific label, this is the reason what I'm trying to create a custom class.
What's wrong?
Thanks for helping!
I've just tested it here and the style does take effect :
https://jsfiddle.net/8eo8crz1/
label.item.formulario {
border-style: none none solid none;
border-color: darkblue;
}
If you want to have a unique custom style for each label, you'll need to use an id instead of a class (or in addition to the classes you're using).
I'm attempting to override the default simple_form styles for a collection/drop down I have, but am unable to get the width to adjust as my drop down takes up the entire width of the page.
I've add the css provided here, https://github.com/plataformatec/simple_form/wiki/CSS-for-simple_form to my stylesheet and have added a class to be applied to the drop down.
.simple_form div.input {
margin-bottom: 10px;
clear: both; /* Required for Webkit, but not for Gecko */
}
.simple_form label {
float: left;
width: 100px;
text-align: right;
margin: 2px 10px;
}
div.boolean, .simple_form input {
margin-left: 120px;
}
.simple_form input.test {
width: 30px;
}
I used the information from this, Rails simple_form label_html and Add a class to each select options with SimpleForm in attempt to get it work, but while my test class is added, it shows as, class="select optional test". I'm unclear on where the "select optional" is coming from and how to remove it.
In the end, the resulting HTML looks like,
<div class="input select optional f_User">
<label class="select optional" for="f_User">User</label>
<select class="select optional test" id="f_User" name="f[User]">
<option value=""></option>
<option value="15">Shawn</option>
<option value="87">Bob</option>
<option value="88">John</option>
<option value="89">Mary</option>
</select>
</div>
Thanks in advance for your time and assistance.
The classes select and optional seem to be generated by SimpleForm to style the selection box. Taking a look at the code for custom wrappers, each input type has a CSS associated to it based on the input name, i.e. selects have a class="select" etc. The optional class seems to come from the custom options assigned to the specific field such as is the field required or not. If you truly want to remove them, it seems you'll have to monkey patch SimpleForm to achieve this or create a custom wrapped with the css classes you choose.
That said, you could overwrite the width parameter for the "select" class:
.select {
width: 30px;
}
I would like to blend a static value next to a simple text input form.
so it will look like, for example:
[static]What do you think about[/static] [user info]...[/userinfo].
i've came up with this:
<p style="display:inline;">What Is It Like To Be</p>
<div>
<input name="post_title" type="text" id="topic" class="input" size="50" maxlength="100" tabindex="1" placeholder="<?php echo $_GET["pr"];?>" style="padding-left:45px; " style="display:inline;"/>
</div>
So, I do get the static 'prefix' inlined with the input form, but i want to make the static text look 'like' it is part of the form. Like a static 'placeholder' tag.
Thanks guys :)
You could try something like this:
HTML
<label class="input-stretch">prefix_<input type="text" /></label>
CSS
.input-stretch {
border: 1px solid #222;
padding: 0.1em;
}
.input-stretch input {
border: none;
outline: none !important;
}
Basically remove the input border and outline, then add one to the label or whatever other element you want to wrap it in.
outline: none !important; may also need to be applied on active/focus states, iirc chrome gives it some nice blue outline??
DEMO