In several of my mvc pages, I have disable certain fields like textarea and input boxes with the "disabled" attribute that are uneditable fields. But users are complaining about the text/font being hard to read. It looks blurred and too light.
Anyone have recommendation to make diabled fields more readable?
Well, you can use CSS style for that. I suggest you to use the :disabled selector.
As an example, you can do something like this to change the color for example :
input:disabled { color: #FF0000; background: #ccc; }
You can find a good tutorial here.
Related
I have this <v-select multiple persistent-placeholder></v-select> component and I would like to display some custom content if selection is empty, like No entry selected yet.
Is there any chance I can achieve this? I looked at props and slots but none seem to fit my need. I tried the no-data named slot but did not work.
Thanks
Looks like the best approach with the current vuetify version is to use the placeholder as you mention in the comments. Check this codepen I made: https://codepen.io/cmfc31/pen/GROyQMa
I just added some css to make it look like an item
.no-entries input::placeholder {
color: #212121 !important;
}
i have to reduce size of pagination icons and fonts in order to fit into a slickgrid
attached screenshot for ref-
enter image description here
Changing the CSS style of the Pagination buttons is not going to help much, it will barely give you back couple of pixels, if you want to do that then I added a couple more SASS variables if you want to play with them
with SASS, you can lower these 2 variables (defaults are shown below, for more take a look at all the SASS variables)
$pagination-button-height: 32px; // around 28px
$pagination-button-padding: 6px 12px; // around 4px 8px
Another thing you could maybe try is to change the English translation for "items per page" and remove the word "items" (via Translations (Wiki) or Locale File (Wiki) file depending on what you use).
{
"ITEMS_PER_PAGE": "items per page" // --> "per page"
}
The last option would be to create your own Custom Pagination but that would require much more effort but someone did just that and you can see it in this Example - Custom Pagination
When a message or error message is applied to a v-text-field (commonly as a result of form validation) the hight of the element changes slightly. Is there an easy / clean way to avoid this?
The issue is easily observed in the "Password Input" section examples of the Vuetify official docs. Just click back and forth between the two text inputs labeled "Normal with hint text" and "Not visible":
Update:
Overriding vuetify's css styling solves the problem:
.v-messages__message {
line-height: 12px;
}
But seems like a very brittle solution.
".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.
I have a recapture form field added through userforms module for Silverstripe. And if you look at http://www.ct.com.au/contact you will see the captcha form looks quite messy.
Using Chrome debugger I noticed that the captcha is adding an extra <tr> field and I've looked everywhere and have no idea how to get rid of it.
Please help!
The reason it looks so messy is the height of the captcha input that it inherits from your page css pushes out the box height. We need to reset the height of this input field.
Add the following to your css:
.recaptchatable #recaptcha_response_field {
height: auto;
}