Error Message Styling in Trinidad - jsf-1.2

I am using JSF 1.2 with apache Trinidad.I have used the following to take date as input
<tr:inputDate label="Date From" value="#{someBean.fromDate}">
<tr:convertDateTime messageDetailConvertDate="Invalid Date" pattern="dd-MM-yyyy"/>
</tr:inputDate>
After doing this I can see the error message when I enter invalid date.But the problem is I can not find an attribute to plug css style to
<tr:convertDateTime >.
I tried to keep the tr:convertDateTime tag in a div class and applied css styling to it but that did not work.

Hi you can style it with the selectors you can find here:
http://myfaces.apache.org/trinidad/skin-selectors.html

Related

How to set style to kendo-grid-column?

I'm use of kendo-grid in my project for many reason.
In one of the cell, I want to set input TextBox like:
<kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column>
As you see, in client, I have bad style
Attention that I never use of any CSS, which want to effect to this.
If you want to set style in kendogrid, you have to override basic css of your selection tag like this:
Image processor > a > span > (your general css class)
Now you have your css that you wanted.
You can use ng-style (I'm using angular 5 and [style] works fo me)
For example:
ng-style="{'background-color':'blue'}"
Learn here:https://docs.angularjs.org/api/ng/directive/ngStyle
<kendo-grid-column field="value" title="{{l('Value')}}" ng-style="{'background-color':'blue'}" width="200"></kendo-grid-column>
EDIT!
According this answer:Kendo UI Grid and ng-style
Use \" \":
ng-style=\"{'background-color':'blue'}\"
You can use Attribute Style
<kendo-grid-column [style]="{'background-color': '#666','color': '#fff','line-height': '1em'}">
</kendo-grid-column>
Actually I don't like to answer my question, but it's better to answer.
If you want to style to that, you have to find one of css class and override that. it's best way to set style to cell-grid
GoodLuck.
You can not set style classes in kendo-grid but you can find kendo classes and override them.

RSpec Issue with have_css

I'm using Rails 5.1.1, RSpec 3.5.0 & Capybara 2.7.1.
I want to have a test that checks for a navbar on the home page, according to some documents that I've found I should be using have_css for this. The example given is:
have_css("input#movie_title")
My understanding is that this would look for an input tag with an id of movie_title. Is that correct?
I'm trying this in my code:
have_css("div.navbar-default")
I get this error, however:
Failure/Error: expect(page).to have_css("div.navbar-default") expected to find css "div.navbar-default" but there were no matches
Why is this not working? I have a div with the class 'navbar-default', so this should work as far as I can work out.
Edit / Solved:
I realised my mistake. I have to expect statements, the navbar-default class is in a nav tag, not a div tag. The 2nd statement is in a div tag but wasn't running due to the error on the first one.
I've fixed it now, all working
The have_css matcher is applied to the parent container instead of the actual element. Is there a parent container?
Try something like this:
# Find the parent
parent = page.find('div#nav')
# Check for the nested div
expect(parent).to have_css(".navbar-default")

Modify CSS for a span with equalsign

I have this strange code:
<h1>Firmware 0.6 <span="postdate">April 02, 2015</span>
</h1>
How can I change only this certain span that has ="postdate" in it with CSS?
The problem occurs in a widespread template in the posttime of for example: http://luebeck.freifunk.net/2015/01/07/announce-0.6.html
the main source in github is corrected already, But I wonder how to fix such with only access to the CSS file.
That's not valid HTML.
If you validate it using an HTML validator, you will receive the following:
an attribute specification must start with a name or name token
An attribute name (and some attribute values) must start with one of a restricted set of characters. This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value looks like the start of a new attribute) or have used an attribute that is not defined (usually a typo in a common attribute name).
For what it's worth, you can technically select it by escaping the =/" characters.
Unfortunately, this will also select all succeeding elements due to the syntax error in the HTML.
span\=\"postdate\" {
color: red;
}
<span>Other span</span>
<span="postdate">April 02, 2015</span>
<p>Some paragraph</p>
<span>Everything appearing after the invalid span will get selected due to the syntax error!</span>
Ignoring the weirdness and considering it just another span there's usually another way to select it as it has a unique place in the DOM (though what that is may be unpredictable with dynamically created content such as you get in a CMS).
I'm guessing you've thought to target any ancestor items with an id attribute or determine if there's a way to target it through ancestors without affecting sibling spans or spans that sit within a similar structure elsewhere? Basically - does it sit within a unique structure in some way?
If not then you could also try to target it through span:nth-child(5). There's also a fist-child and last-child. This may help uniquely target it within the overall structure. https://css-tricks.com/useful-nth-child-recipies/
You could also try to enter an inline script in the html view of the wysiwyg (a bad CMS may allow this!) which will allow you to check the content of spans and do something to if it matches (like add a class or id for a styling hook).

How do I style the HTML5 form validation error messages with CSS?

How do I style the HTML form validation error messages with CSS?
Currently, there is no way to style those little validation tooltips. The only other option, which is what I have chosen to do, is to disable the browser validation all together for now and rely on my own client-side validation scripts.
According to this article:
http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
"The simplest way to opt out is to add the novalidate attribute to your <form>. You can also set formnovalidate on your submit controls."
Chrome up until version 27 provided a native look and feel for their validation error speech bubbles. The error bubble is made up of four containing elements that are not normative elements. These four elements are style-able via pseudo-elements that apply to separate sections of the bubble:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
With the release of Chrome v28, they removed these non-standard selectors: https://bugs.chromium.org/p/chromium/issues/detail?id=259050
Use pseudo selectors, as easwee said. For example, to make the form element green when valid, and red when invalid, do something like this:
:invalid {
background: #ffdddd;
}
:valid{
background:#ddffdd;
}
If you need a full reference of these, head to Mozilla Developer Network
A required field will be invalid until the correct input is entered. A field that isn't required but has validation, such as a URL field, will be valid until text is entered.
input:invalid {
border:solid red;
}
for more info http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

How to style links via textile?

Is it possible to apply style attribute or class to link in textile? I've tried to find a reference, but found nothing.
"{color:red}This is a testlink":http://www.google.com
or
"(myclass)This is a testlink":http://www.google.com

Resources