Ant design always has colons after label in form input.
Is it possible to remove that?
https://ant.design/components/form/#components-form-demo-layout
set colon prop for form tag to false
<Form
colon={false}
>
</Form>
You can remove it by using css
.ant-form-item label:after {
content: none;
}
By the way, AntD doesn't show the colon on mobile.
Related
When clicking on a link (or button) to display a dismissible popover, the border of the clicked element is highlighted. This occurs with the example from the Bootstrap documentation and my page in practice. (FYI, I plan to replace my text "[ i ]" with an image; my assumption is that the highlighted element is the href and not the text.)
Bootstrap 5 Docs Dismissible Popover Button
My DismissIble Popover
In the Bootstrap Docs example, the following is added to the element when the button is clicked:
aria-describedby="popover808202"
My Code
<div class="tile-title">
Modified<span style="float:right;"><a tabindex="0" href="#" title="Help" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Descriptive and useful information can be displayed here.">[ i ]</a></span>
</div>
My JavaScript
let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
let popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
Desired Result
I would like to suppress the highlighting.
Turns out this was easier than I thought.
a:focus {
outline: none;
border-color: rgba(0,0,0,0);
box-shadow: none;
}
This example will of course disable anchor highlighting completely (for all anchors that use the CSS properties above) for the entire page.
I'm using toggle checkboxes by Semantic React UI.
The background color of a checkbox is defined in their styles here :
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
background-color: #2185d0!important;
}
... But I would like to be able to set a prop that would change that color, like
<Checkbox toggle toggleColor="red"/>
Could I extend that component to achieve that, or is there another way to achieve this ?
Thanks !
Yes you can, but it is not pretty!
I have a solution that works with semantic-ui and is heavily tested. I assume that it also works with semantic-ui-react but did not test extensively.
First, a color feature for checkboxes is missing from semantic-ui (as far as I can see, there is no documentation about it at least). So you need to use CSS to define your colors. All your colors! So if you have a lot you might to want SASS or something. Also you might want to make a feature request with semantic-ui.
Second, my solution uses the label of the checkbox to color the checkbox. I am fully aware that this is not pretty but this is apparently the only way to do this without too much additional code or even more ugly methods.
Add this to your code (please note, stackoverflow does not render this example properly since the <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css">is obviously missing. If there is a way to add this on this side please let me know.)
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
background: #000000 !important;
}
.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
background: #FFFFFF !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<div class="ui segment">
<div class="ui attached icon form" id="info_input_form">
<div class="ui toggle checkbox">
<input type="checkbox" tabindex="0">
<label class="coloring black">Toggle</label>
</div>
</div>
</div>
What is the best way to set the width of a Material Design Lite multi-line TextField? I set the CSS width to a pixel value, and it works, but when you click on it to enter some text, the underline highlighting does not extent out to the full width of the component. I tried cols="80" and that did not work. I also tried width="100%" and that did not work. I'm working in ReactJS and TypeScript if that makes a difference.
The width needs to be set on the mdl-textfield container div for the text field. For example, this works:
.mdl-textfield{
width:500px;
}
Though that will style all of your textfields. If you only want one of them to be that wide, then define an id or class on the same div as has the mdl-textfield class and apply the style to that. For example:
<div class="mdl-textfield mdl-js-textfield extrawide">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
with the css
.extrawide{
width:500px;
}
I have implemented form using angualr-material, I can't find any standard ways to change default color coding in material.
form
<div class="col-xs-12 testFormLabel">
<md-input-container class="testLabel">
<label>Reason</label>
<input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">
</md-input-container>
</div>
css
.md-input-has-value. testLabel > input {
color:#008cba;
}
Problem
How can i change auto focus label name and underline to different color ( let say from dark blue to green )
You can use this selector to change the input:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: red
}
Use this to change the label:
md-input-container:not(.md-input-invalid).md-input-focused label {
color: red
}
Include this after you include the css for angular material.
I got this by going to the docs page here: https://material.angularjs.org/latest/demo/input
Looking at their demo, and inspecting a focused input.
You can also use <md-input-container [dividerColor]="primary|accent|warn"> to set the color when the field is in focus.
From the docs...
The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.
I'm wondering if any knows how to disable the month/year navigation button on the Angular UI datepicker (http://angular-ui.github.io/bootstrap/#/datepicker).
We want to disable the ability for users to click on the "Month/Year" text in between the navigation arrows and can't figure it out.
Our current config options look like this:
$scope.dateOptions = {
'year-format': "'yyyy'",
'starting-day': 0,
'show-weeks': false
};
Our html looks like this:
<span datepicker-popup="shortDate" ng-model="currentDate" is-open="isDatePickerOpen" datepicker-options="dateOptions" show-button-bar="false" ng-click="openDatePicker($event)"></span>
Has anyone figured this out?
You can use the max-mode property and set it to day and will disable that button.
<datepicker max-mode="day" ng-model="dt"></datepicker>
Have a look here: http://plnkr.co/edit/5I8QQiI3dLvOpyDjd2fk?p=preview
How about just using css to remove the buttons from the ui?
.date-picker-button { display: none; }
Note: I do not know which selector to use, its just an example. You'll have to inspect the element to see what the actual selector is