I have two edit boxes on my xPage.
Second one with typeahead enabled.
I want on onFocus event make editbox background e.g. yellow...
I do it this way:
var fldObj = dojo.byId("myEditBox");
if (!fldObj) {
fldObj = dojo.query("[id$=':myEditBox']");
if (fldObj) {
fldObj = fldObj[0];
}
}
if (fldObj != null) {
fldObj.style.background="yellow";
}
it works perfect for the first edit box but not for the one with typeahead enabled..
Any suggestion?
Thanks
Simple CSS does the trick. Your problem is probably caused by dojo CSS styling. Added !important overrides other inherited !important styling. Works for me with edit box with and without typeahead.
.xspInputFieldEditBox:focus, .lotusui .dijitTextBox input:focus, .xspComboBox:focus
{
font-weight: bold;
background-color: yellow !important;
background: yellow !important;
}
http://www.w3schools.com/cssref/sel_focus.asp
Related
I have a Tabulator table with this CSS styling for the headers:
.mytabulator.green .tabulator-header
.tabulator-col {
background: #92d050;
}
.mytabulator.wrapped-headers .tabulator-header
.tabulator-col
.tabulator-col-content
.tabulator-col-title {
white-space: normal;
}
Which makes the headers look like this:
... but how do I also style the header background green?
By background I mean this part:
I have tried multiple "Column & header" selectors and nothing works.
Thanks,
Matic
you need to add a background colour to the tabulator-header element too:
.mytabulator .tabulator-header, .mytabulator .tabulator-header .tabulator-col {
background: #92d050;
}
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
I'm trying to set an alternate color to my DataView control; I tried rowStyleClass and rowStyle but I can't get it to work.
rowStyleClass only gives me hover color for
What I'm doing is using a jQuery snippet:
$().ready(function() {
// Apply alternate color row to DataView
$(".lotusTable > tbody > tr:odd").addClass("odd");
$(".lotusTable > tbody > tr:not(.odd)").addClass("even");
});
This works, but, if partial refresh is executed (change page number; add rows, etc.) I lose the formatting.
Any ideas how can I accomplish this with DataView properties?
Try this CSS, it works great for me in a View Control. I am not currently using jQuery. In the view control I set "rowClasses" equal to "evenrow, oddrow". Of course, the Data View doesn't have rowClasses, so try setting either rowStyle or rowStyleClass to "evenrow, oddrow" and see if that gives what you are trying to accomplish.
.oddrow {
background-color: rgb(218, 234, 245);
}
.evenrow {
background-color: rgb(255, 255, 255);
}
.evenrow:Hover {
background-color: rgb(288, 250, 221);
}
.oddrow:Hover {
background-color: rgb(288, 250, 221);
}
I have a TextArea() and would like to hide the vertical/horizontal scroll bars. I see that the control seems to have a built in scroll-pane that shows as needed.
TextArea numberPane = new TextArea();
numberPane.setEditable(false);
numberPane.setMaxWidth( 75 );
// Set the characteristics of our line number pane
numberPane.setId( "line-number-pane" );
In my CSS file I have the follow settings.
#line-number-pane
{
-fx-text-fill: white;
-fx-background-color: black;
-fx-font: 12px "Courier New";
-fx-font-family: "Courier New";
-fx-font-weight: bold;
}
#line-number-pane .scroll-pane
{
-fx-hbar-policy : never;
-fx-vbar-policy : never;
}
As expected the text area font/color/size works just fine. However, the scroll-pane policy doesn't seem to work.
Should I be able to hide the scroll bars via the CSS file or is there some code that will do the trick.
Thanks.
From How can I hide the scroll bar in TextArea?:
Remove Horizontal Scrollbar
textArea.setWrapText(true);
Remove Vertical Scrollbar
ScrollBar scrollBarv = (ScrollBar)ta.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
CSS
.text-area .scroll-bar:vertical:disabled {
-fx-opacity: 0;
}
I just did it very simply using a StyleSheet:
CSS
.text-area .scroll-bar:vertical {
-fx-pref-width: 1;
-fx-opacity: 0;
}
.text-area .scroll-bar:horizontal {
-fx-pref-height: 1;
-fx-opacity: 0;
}
No need for all that whacky code.
I observed code of TextAreaSkin class, and found, that a
void layoutChildren(x, y, w, h) method, which is called "during the layout pass of the scenegraph" and de facto, each time, when something happens with a control, contains a code, which changes hbarPolicy and vbarPolicy between AS_NEEDED and NEVER, according to the current state of control.
So, looks like, there is no chance to do somethign with it, using a css.
Try to just make scrollbars invisible. But, as I see code of ScrollPaneSkin, scrollBars are created once, but their visibility state seems to change during the control is working, so, instead of using setVisible(false) (which will be ignored in the nearest layout), try to use a setOpacity(0.0). (I'm not sure, it will work, but it worth to try).
Also, instead of CSS using, you can apply a recursive search of scrollBars in a control structure, using a Parent.getChildrenUnmodifiable() method, and make them invisible manually.
i'm trying to make up a different look and feel on my sharepoint site. I try to make my main content's width down to 960px under my form tag in sharepoitn designer. when I refresh the page at the first it renders the main content down to 960px but when the page fishished loading the main content stretches itself to the whole screen's width.
I found out that it's because of the onload script running in body tag. but I caanot remove this script because this work has side effects on page functionality.
the function is _spBodyOnLoadWrapper().
does anyone know this function ? or does anyone know how to come up with this problem ?
UPDATE #1:
My css code is as follows.. I added this class to the main Form on master page:
.mainContent
{
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
direction:rtl;
}
UPDATE #2:
I use v4.master template.
I have taken the ribbon out of the form tag. it's directly after body tag. because I wanted the ribbon to be streched at the top. but when i add this line of code
<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
the mainContent blows up. something at the header streches in the whole width and some panels at bottom remains 960px.
you got me interested so I recreated your issue. By default, the javascript will try to inline the width based on its calculations.
However, what you need is to set the class s4-notsetwidth on a wrapping container.
Here is what i did to fix your issue
Add this to the head
<style type="text/css">
#s4-bodyContainer {
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 960px!important;
margin-left:auto;
margin-right:auto;
}
/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
</style>
Then locate the s4-workspace (that's the immediate parent of #s4-bodyContainer and add class s4-nosetwidth. That should work for you.
Use these two references to achieve exactly what you want (not sure if you want ribbon aligned or not), Randy Drisgill post and Tom Wilson's post.