how do i add placeholder in textbox with css - placeholder

I do have old struts project, I want to put placeholder with the help of existing css class , because I have to do this change 100s of number of jsps. I want to do it in css once for all.
.boxLookupMan
{
border:1px solid #999;
background-color:#ffffc7;
font-family: verdana, arial, helvetica, sans-serif;
FONT-SIZE: 11.5px;
color: black;
text-indent: 2px;
background-image: url(/KCBWeb/images/lookupblueman.gif);
background-repeat: no-repeat;
background-position: right top;
content: "Enter your number";
}
I have added content attribute in boxLookupMan class after which I my textbox should show "Enter your number" text as placeholder.which is not working. Please , suggest other ways of doing it or improvement in current css.

The content property applies to ::after and ::before pseudo elements.
Add ::after or ::before to your style something like:
.boxLookupMan::after {
content: "Enter your number";
/* ... The rest ... */
}
Remeber pseudo-elements can't be used with with all HTML elements, you CAN'T use it with <img>, <input> or <br> for example, since they can't contain other elements.
::after DOCS
content DOCS

Related

Use Custom Local Font in WKWebView

I am attempting to use a local font (one installed with the application) in the CSS of some dynamic HTML presented within a WKWebView. I have read numerous Stack Overflow posts and this webpage. To review what I have done:
The font (in this case ImpactLTStd.otf) is part of the iOS application.
It is entered as part of the application plist in the Fonts provided by application section.
Per the referenced webpage, I can confirm that the ImpactLTStd.otf is listed in the Copy Bundle Resources section of Build Phases and leads me to believe that the ImpactLTStd.otf is being bundled with the application correctly.
The font is listed in the CSS as:
<style> #font-face {font-family: 'Impact LT Std'; src: local('Impact LT Std'), local('ImpactLTStd'), url('ImpactLTStd.otf'); format('opentype'); } </style>
I reference the font two different ways in this fashion (one by font family and one by font name in order see which one worked and neither did):
<style> .box_root { overflow: auto; background-color: #000000; padding-top: 1.5em; padding-bottom: 1.5em; padding-left: 1.5em; max-width: 1440px; max-height: 640px; display: table; } .box_title { color: #ffd300; line-height: 1em; font-size: 85pt; font-size: 6vw; font-family: 'Impact LT Std'; text-transform: uppercase; } .box_description { padding-top: .5em; line-height: 1em; color: #ffffff; font-size: 65pt; font-size: 4vw; font-weight: bold; font-family: 'ImpactLTStd'; }
I load the HTML into the WKWebView using loadHTMLString:
webView.loadHTMLString(getHtml(), baseURL: nil)
However, the HTML text that is displayed in the WKWebView using the CSS tags does not use the Impact font but instead some default font that looks like Times New Roman.
Anyone have an idea what step I did incorrectly?
You did not provide a base URL when loading the HTML string, this will cause the font failing to load. Try accessing your bundle's main resource path, like this:
if let resourcePath = Bundle.main.resourcePath {
let url = URL.init(fileURLWithPath: resourcePath)
webView.loadHTMLString(getHtml(), baseURL: url)
}

White gaps in links border in Safari

I have a link that looks like this:
Документи
And problem is that in Safari when "Документи" is underlined, letter "Д" and "у" cut line and there is small white space in link line.
How to remove these white gaps in link?
Remove the underline for all <a> elements
In CSS you could do:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Remove the underline for only Cyrillic class
Or alternatively for only Cyrillic links:
a.cyrillic {
text-decoration:none;
}
a.cyrillic:hover {
text-decoration:none;
}
Here's a JSFiddle to clarify.
This removes the underline from the link. It's by no means perfect (if you wanted to retain the underline) but it at least solves the issue by removing it entirely. Of course, this assumes that your links are coloured somehow
border-bottom underline
It is possible to get the result you want using the CSS border-bottom style as such:
a.cyrillic {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
a.cyrillic:hover {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
And obviously on your HTML <a> element it should be:
Документи
Here's another JSFiddle to clarify.

How to change the font, font size, and font color in JQ Grid?

I want change all of fonts of the grid to Arial. Change the header font-weight bold and make the header color blue. Size of all fonts will be 12px.
The exact changes could depend on version of jqGrid and the fork which you use. Ch make the changes which you asked you should use CSS like
.ui-jqgrid {
font-family: Arial;
}
.ui-jqgrid > .ui-jqgrid-view {
font-size: 12px;
}
.ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-labels .ui-th-column {
color: blue;
}
If you use filterToolbar then you should need to add
.ui-jqgrid > .ui-jqgrid-view input,
.ui-jqgrid > .ui-jqgrid-view select,
.ui-jqgrid > .ui-jqgrid-view textarea,
.ui-jqgrid > .ui-jqgrid-view button {
font-size: 12px;
}
additionally. After changing the font size you could want to change some padding values used in the grid.
The demo uses free jqGrid 4.9 and it set red color instead of blue to display the results more clear on jQuery UI Theme which I use.
table{
font-family:'Arial', Helvetica, sans-serif;
font-size:12px;
}
th{
color:blue;
font-weight:bold;
}
You can change the style of a JQ grid like any other html element.

Html.ActionLink as an image button with vertically-centered text?

Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically

Action Message tag in struts2

I'm new to struts to How to decorate the action message and action errors in struts2 jsp page?
<s:actionmessage/>
<s:actionerror/>
you can use the css styles as well as jquery theme attribute to decorate your action error and action message.
<div class="error"><s:actionerror theme="jquery"/></div>
<div class="message"><s:actionmessage theme="jquery"/></div>
.message li
{
font-size: 14px;
color: #000066;
text-align: center;
list-style: none;
font-family: Trebuchet MS,sans-serif,inherit,Arial,monospace;
}
.error li
{
font-size: 14px;
color: #990000;
text-align: center;
list-style: none;
padding-right: 50px;
}
Hi here i am posting solution for your problem if you want your action messages and error messages to decorate use this code
<div id="sucessMsg"><s:actionerror /></div>
sucessMsg is the class that is using by struts2 internally so override this so kindly put the below code inside the css
#sucessMsg {
text-align: center;
font-weight: bolder;
color: #6A2A91;
list-style: none;
margin: auto;
}
#errorMsg {
text-align: center;
font-weight: bolder;
color: red;
list-style: none;
width: 350px;
margin: auto;
}
You should view the HTML source after it is rendered to see the CSS classes and HTML structure that Struts uses to render the message. You can also look in the template files.
By Default struts renders each action message as follows:
<ul>
<li><span class="actionMessage">${message}</span></li>
</ul>
Every message will have a <li><span class="actionMessage">${message}</span></li>.
You can create CSS for actionMessage or change the template file to render these however you want.
The template files for these are located in:
/template/simple/actionerror.ftl
/template/simple/actionmessage.ftl
Field Error might be useful to you as well:
/template/simple/fielderror.ftl
note: if you are using the xhtml theme those files may be located in that folder under template

Resources