this line!
i try to override css class by
.MuiDivider-root{ display: none }
it not working
Seems like it's a bottom border which comes from .MuiDataGrid-cell. Just set it to none.
I need to swap panels in a list. I've tried to reorder rows in a grid but I need to put a little more informations in the item so a panel will be nicely to show.
Must be the classic drag icon (four arrows) like here http://examples1.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/
This example is very close that I want. I need only vertical swap like this one http://tof2k.com/ext/sortable/ ( this could be just what I need but seems it don't use ExtJS themes and I don't know if I can put more information inside the items - and it is a little ugly too).
Some ideas?
Perhaps using a grid with a templatecolumn and drag and drop resolve your issue.
FIDDLE: https://fiddle.sencha.com/#fiddle/1i7l
Also, you can use CSS to change row.
.customRow .x-grid-cell-inner {
margin: 5px 5px 5px 5px;
background-color: yellow;
}
Remove de comment
//cls: 'customRow'
on fiddle (line 58).
I have a dijit/form/Select component which I make declaratively. I want to add text-overflow:ellipsis style for each option. I've tried giving id to the component and then I've set:
#myselectorid_dropdown td,
#myselectorid span{
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
max-width:50em;
}
Firstly, this solution doesn't fully work, because at first dropdown open, the ellipsis style is not applied (at next opens it is). Secondly, I consider it a "dirty" solution (there should be a cleaner way to do it, right?).
So the question is: how to add text-overflow:ellipsis to each select's options?
EDIT: I gave autoWidth:false attribute to the Select component, so it fixed the first issue (improper width at first open). I'm still looking for cleaner solution than td/span styling though.
Try using .dijitSelectLabel instead of span
#myselectorid .dijitSelectLabel {
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
max-width:50em
}
Trying to figure out how to add the expand / collapse arrow images on Dojo's Accordion dijit.layout.AccordionContainer just like the dijitTitlePane / dojox.widget.TitleGroup has.
Did a bit of research to find out where the TitlePane was getting the arrow images from and found it was a sprite image. I've created some extra code that uses that same sprite image to add the expand and collapse arrows to the AccordionPane. Have to add some extra CSS to the theme in order to make this work:
Add the following near line 2625 in /themes/THEME_NAME/THEME_NAME.css:
.THEME_NAME .dijitAccordionArrow {
background:url("images/spriteArrows.png") no-repeat -14px top;
width:7px;
height:8px;
margin-top:-1px;
}
.THEME_NAME .dijitAccordionTitleSelected .dijitAccordionArrow {
background:url("images/spriteArrows.png") no-repeat;
margin-top:-1px;
}
Replace THEME_NAME with whatever the name of your stock theme (i.e. claro) or the name of your custom theme.
Imagine the following code.
<body id="first_bg_layer">
<div id="second_bg_layer">
<div id="third_bg_layer">
</div>
</div>
</div>
Each layer has a different background that is static/repeated to achieve the desired effect. I need all layers to fill up the screen, otherwise the background will be broken. The background is split in layers to minimize the image sizes.
Setting min-height to 100% doesn't work for various reasons. Is there any way to do this?
Edit: If I set #second_bg_layer to height:100% and #third_bg_layer to min-height:100%, that works. But then the #second_bg_layer is locked to 100%, and will not be expanded more.
What I want to do is to set the min-height on both div's, or some other solution.
Is a trick I read sometime ago, and applied as seen bellow, if I recall well... As said just above by others for the first part, I'd set :
html,html body {height:100%;}
Then, a div containing all content. A sort of wrapper if you want to call it so.
...wrapper div to which I'd set {height:100%;min-height: 100%;}
In its class or id.
But sadly IE does not support min-height, nor height:auto, so...
just set first the IE case line: {height: 100%;}
and then the css that will apply to other browsers:
html>body whatever_the_div_class {height: auto;min-height: 100%;}
Finally, do a footer div to put it outside this wrapper div, just after it, to which css properties you will add:
height 1%; clear:both
(the 1% is like often happens, IE needs some "space" or will do weird things)
Well, let's hope it helps :)
Did you set the HTML and BODY height to 100% with 0 margins? If not, do that, if so, make sure your div elements are positioned correctly.
If you just aren't getting a full width and height out of the body area, then maybe what you are asking for is this:
html, body {
height: 100%; width: 100%;
}
/* And perhaps adding this if you're not using any reset CSS */
html, body {
margin: 0; padding: 0;
}
If its not, I'm not sure what you are having trouble with, but a background-image cannot be displayed outside of its selected element. If you want to differ the background layer from the layer itself then I would suggest using an additional div that has width/height: 100%; position: absolute; top/left: 0; and background: url(...); to hold the background image.