Is it Possible to remove header from DOJO Grid - dojox.grid

Is it Possible to remove header from DOJO Grid?

In your css, do this:
.dojoxGridMasterHeader { display: none; }
Hope this helps.

it is better to specify in which grid you want to remove header, for example by using id of your parent div:
#myDiv .dojoxGridHeader {
display: none;
}

Related

Is it possible to pass values from properties to CSS in SPFx?

Is it possible to have a web part in SPFx which has (for example) a property "divWidth"
and it be a numeric value in px.
Then then a div renders with the width specified in the web part?
I know you could probably do it with inline styles but can you pass the value to an SCSS file?
Thanks P
Create the CSS Variables, for example based on the web part properties
let styleBlock = { "--tileWidth": this.props.width + "px",
"--tileHeight": this.props.height + "px" } as React.CSSProperties;
render it like:
<div className={`${styles.linkTiles} ${styles.tileCont}`} style={styleBlock}>
css will be like:
.linkTiles {
&.tileCont {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.tile,
.tileFlip,
.tileFront,
.tileFront>img,
.tileBack {
width: var(--tileWidth);
height: var(--tileHeight);
}
Using CSS Variables to Morph Your SPFx Design at Run Time

Remove link to dashboard page inside rails_admin breadcrumb

I want to retain rails_admin breadcumb as is but without a link to dashboard page. I am not clear on how to achieve this. I have tried looking into rails_admin codebase but I am not sure how to make this possible.
I figured out one way would be to hide it via css.
Adding following css in app/assets/stylesheets/rails_admin/custom/theming.scss hides the link:
ol.breadcrumb li:first-child {
display: none;
}
Had to add extra css to correct placement of separator /, this override rails_admin default before selector behaviour:
.breadcrumb > li + li:after {
content: "/ ";
padding: 0 5px;
color: #ccc;
}
.breadcrumb > li + li:before {
content: "";
padding: 0;
}

Xpages OneUI 2.1 lotusColLeft: possible to make height same as lotusContent?

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;
}

typeahead function prevent editbox styling

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

hide a span without an id inside a specific ul

I installed eshop plugin in wordpress and I've beed told I should hide the span to hide the title
this is the code
<ul class="eshop rand"><li class="eshop-product-127"><a class="itemref" href="http://localhost/sab/to-40-gr-mix/"><img ilo-full-src="http://localhost/sab/wp-content/uploads/2013/07/DSC_4171-150x150.jpg" src="http://localhost/sab/wp-content/uploads/2013/07/DSC_4171-150x150.jpg" class="attachment-150x150 wp-post-image" alt="DSC_4171" height="150" width="150"></a><span>to 40 GR MIX</span>
I want to hide the span inside that ul with that class (eshop rand)
remember I can't assign an id to that span
thank you
You could use this css class
.eshop.rand span
{
display: none;
}
or
.eshop-product-127 span
{
display: none;
}

Resources