Vaadin text field has a default underline. I want to remove it.
I am using it inside of a Vaadin combo box.
In dev tools I can see that a div with the attribute part="input-field" is the cause.
Setting it to display: none; works in the browser.
I can't seem to target it with code. I've tried the following:
`[part="input-field"] {
display: none !important;
}
.vaadin-text-field-container [part="input-field"] {
display: none !important;
}`
Add Viritin add-on (use latest version) to your project, and configure:
TextField field = new MTextField().withSpellCheckOff();
OR
you can use the low level API to configure the html element:
new HtmlElementPropertySetter(yourTextInputComponent).setProperty(
"spellcheck", false);
I solved it by adding this module to the HTML file.
I placed this above the first script tag in the file.
<dom-module id="vaadin-text-field-module" theme-for="vaadin-text-field">
<template>
<style>
div::before, div::after {
display: none;
}
</style>
</template>
:before is the underline before the input has a value and :after is the line after.
Therefore this would disable both.
[part="input-field"] disabled the input and the value was not seen after selection.
Related
In my vuejs component I have style like this
<style>
.preview-page {
.preview-section {
width: 100%;
}
.logo-section {
text-align: center;
}
}
</style>
Its building fine and showing correct results in browser, but on vscode its showing 2 errors
Do not use empty rulesetscss(emptyRules)
and
} expectedcss(css-rcurlyexpected)
OK, looks like there are two issues being picked up on:
Do not use empty rulesetscss(emptyRules) is a valid complaint, since .preview-page{} contains no styles (although its children do). Add some styles to .preview-page or suppress the warning if it bothers you.
} expectedcss(css-rcurlyexpected) I assume is triggering because you have not defined lang="scss" in your <style> tag. Here is the documentation.
One has a ConvertKit form, that was added using ConvertKit plugin, and uploaded on a widget as follows
After applying some styles, when I am logged in, the form looks like this
However, when I log out, there are some default styles being loaded and the form ends up looking like this
How does one remove ConvertKit default stylings?
There may be different ways of removing the default styles applied by ConvertKit. I have tried the following, but with no success:
Inspecting the form in the front-end, one sees that inside a form with the class "seva-form formkit-form", apart from two div, one has a style element., as follows
<form class="seva-form formkit-form">
<div class="formkit-background">...</div>
<div data-style="minimal">...</div>
<style>...</style>
As I have seen that removing the style block <div data-style="minimal">...</div> solves the issue with the form, tried, as per #m4n0's suggestion applying .formkit-form div[data=style="minimal"] { display: none; }, but it didn't solve the problem.
Based on your changing requirements that we discussed through comments:
form.formkit-form[data-uid="3624b8b144"] {
border: transparent;
margin: 0 auto; /* To center the form, you can also use flexbox centering */
}
/* I had to increase the specificity of the below selector because there are other selectors acting on it */
form.formkit-form div.formkit-powered-by-convertkit-container a.formkit-powered-by-convertkit {
display: none; /* To hide the copyright but check how their licensing works */
}
.formkit-guarantee a {
color: #fff; /* To change the color of privacy link */
}
Output:
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
Is it possible to implement jqGrid search without operators? I need the operator to default to 'contains'. I don't want to modify the original jqgrid js or css files because they will be overwritten when we upgrade to a new version.
I need the dialog to look like this:
I can override displaying the operators dropdown by defining:
.operators
{
display: none;
}
I need to also adjust the width.
Ok this seems to work although it will change the default width for all jqgrid dialogs:
.operators
{
display: none;
}
.ui-jqdialog
{
width:220px !important;
}
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.