Remove panel border default css in ExtJS 5 - javascript

I want to remove panel border completely (border, background-image and all). I have a window which has 6 panel and every panel has title. I want only title name without any border.
Question may be duplicate but i didn't get answer.
I have tried border: false but doesn't work.

Add a cls option to the window so that you can scope your "no border" styles:
cls: 'noPanelBorder'
Then use this:
.noPanelBorder .x-panel-body-default,
.noPanelBorder .x-panel-header-default,
.noPanelBorder .x-panel-default {
border: none;
box-shadow: none;
background: none;
}
See example: https://fiddle.sencha.com/#fiddle/sbs
Note that using SCSS with Sencha CMD is recommended so that the style declarations can look simpler.

Related

custom toggler for jquery layout

I am using layout.jquery plugin.
I am trying to create a custom toggler for Wast Pane.
How can I create rotated text div as toggler.
See attached image below.
JSFIDDLE: https://jsfiddle.net/kap0e06s/3/
HTML:
<div class="myDiv" style="height:400px">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>
JS:
$('.myDiv').layout({
resizeWhileDragging: true,
sizable: false,
animatePaneSizing: true,
fxSpeed: 'slow',
west__spacing_closed: 0,
west__spacing_open: 0,
north__spacing_closed: 0,
north__spacing_open: 0,
});
Sorry... Could not create the jsfiddle properly. Here is modified code:
JS:
// OUTER-LAYOUT
$('.myDiv').layout({
resizeWhileDragging: true,
sizable: false,
livePaneResizing: true,
animatePaneSizing: true,
fxSpeed: 'slow',
west__spacing_closed: 0,
west__spacing_open: 0,
north__spacing_closed: 0,
north__spacing_open: 0,
east__spacing_open: 50,
});
CSS:
body {
background-color: white;
}
.ui-layout-center,
.ui-layout-north,
.ui-layout-south,
.ui-layout-east,
.ui-layout-west {
border: 0px;
}
.ui-layout-toggler{
background-image: url("http://placehold.it/50/ff9933/ffffff?text=Panel");
}
There are a number of options you can use for a custom toggler.
First you need to choose between using real rotated text (using CSS transform) and a background color, or an image of the text/tab. Depending on which you choose, the method is different...
IMAGE TOGGLER METHOD
If using an image, then assign this with CSS. If desired, you can use different images for the open and closed states of the pane.
To target a specific pane in a layout, append the 'side' to the generic class for togglers, or resizers/splitters, like...
.ui-layout-resizer-west
.ui-layout-toggler-west
To further refine selectors to target specific 'states', append the state, like...
.ui-layout-toggler-west-open
.ui-layout-toggler-west-closed
The toggler element extends beyond the boundary of the resizer-bar that contains it (your options set that to 0px width), so ensure that the overflow CSS is set to allow this. This applies whether using the image method or rotated text method.
Here is sample CSS to put this together. Note that some properties require 'important' to override styles hard-coded on the elements by Layout...
.ui-layout-resizer-west {
overflow: visible !important;
}
.ui-layout-toggler-west {
backgound: url(close-panel-image.png) center;
width: 16px;
}
.ui-layout-toggler-west-closed {
backgound-image: url(open-panel-image.png);
}
Here are the relevant layout options, in addition to those your question already show. Note that the height/length of the toggler element should be set here rather than in the CSS so that layout can properly center it inside the resizer-bar...
togglerLength_open: 50,
togglerLength_closed: 50
That should do it if using an image background.
ROTATED TEXT METHOD
You can also insert text or HTML inside the toggler element. Since the toggler is autogenerated, you specify this content in the options.
The CSS is almost the same for this method, but instead of a background image, specify the colors and font formatting you want...
.ui-layout-resizer-west {
overflow: visible !important;
}
.ui-layout-toggler-west {
backgound-color: orange;
color: white;
font-size: 12px !important;
font-weight: bold;
transform: rotate(-90deg);
width: 16px;
}
To support older browsers, add browser prefixes for transform; see https://css-tricks.com/snippets/css/text-rotation/
Specify the text you want in the layout options...
togglerLength_open: 50,
togglerLength_closed: 50,
togglerContent_open: 'CLOSE',
togglerContent_closed: 'PANEL'
If you want the same text for both the open and closed states, I believe you can just use a togglerContent option. You can test that to confirm if desired.
Lastly, you can add additional logic when opening or closing the panel in one of two ways...
Use the standard callbacks. These include options like
onclose_start, which allows you to abort the close action if desired.
After the layout is created, use standard jQuery to unbind the standard click event, and then add you own event. This is necessary if using a more complex custom toggler that contains more than one button/action. You can find samples of such togglers on the Layout website.

Wordpress drop down menu styling

I have recently started learning WordPress and have started creating a WordPress website.
I have created a drop down side navigation for one of my pages (using the menu options given in WordPress, and added it " ") and am having a little trouble styling it the way I want.
Since it is a drop down menu, I would like to style the parents of the navigation with a grey border (but not the children) if I style the li in css, then all li's are surrounded with a border (even the children). I know this is because they are also li's, but is there a class assigned to the parents (or a way I can assign a class to them) so I can style them separately?
http://jsfiddle.net/twLj3eba/
The fiddle is basically a visual example (this is not being used by me). I would like the parents to have a border around them, and the children to not have anything around them.
.sideNavi a{
color:#666666;
}
.sideNavi li ul{
display: none;
}
.sideNavi li:hover ul{
display: block;
}
The css code is my code
thank you
Create a class for the parent li in the same way as you have created a class for the ul. Assign this class to all your parent li.
For example:
<li class="parent-li">
Then assign styles to that class in your css.
.parent-li {border: 1px solid #222; display: inline-block;}
Unless I've miss understood what you're trying to achieve it should be a simple solution. Hope that helps.
Edit: I've just seen your comment mentioning you're using the edit menu screen within Wordpress. You should be able to assign custom classes to the menu items. If you can't see the option go to the screen options drop down tab at the top right and enable css custom classes under advanced properties. You will still need to create the css class either by editing your theme style sheet (not recommended) or by creating a child theme.
.parent > li{
border: solid 1px #000;
}

Fancytree remove blue border when selected

Using fancytree, how can I prevent the boundary around the fancytree div from becoming blue when it's active?
To replicate, go to the link below, click inside the fancytree control (click any node) and the light gray dotted border gets a blue highlight. No good!
http://wwwendt.de/tech/fancytree/demo/sample-configurator.html
https://github.com/mar10/fancytree
Add the style: outline:none !important; to either .fancytree-container and it won't get the outline around the fancytree
Little update on this, depending on your version / theme you may also need to disable outline: on .fancytree-treefocus class too, i.e.
.fancytree-container {
border: none !important;
}
.fancytree-treefocus {
outline: none;
}

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/

mootools accordion styling problem

I just built my first mootools accordion, but it is adding a lot of inline styles which is just ruining my UI. I can set up a inline style with !important keyword but it will just make my css maintenance a nightmare. any ideas how to get rid of the inline styles
It is just this
<script language="javascript">
window.addEvent('domready', function() {
//create our Accordion instance
var myAccordion = new Accordion($('accordion'), 'div.subTreeHeader', 'div.accordionElement', {
opacity: false, fixedHeight:400
});
});
</script>
Well this is quite old question, I answer it because I run to it when looking for the same problem.
Actually Mootools Acordion adds this much inline CSS:
padding-top: 0px; border-top-style:
none; padding-bottom: 0px; border-bottom-style: none;
overflow: hidden; opacity: 1;
The solutions I found for this are fixes that have to be applied after calling the new Fx.Accordion. I also agree that feels wrong to fix with !important CSS fixing. So I also looked for other options.
Option 1, set back the css as you want:
$$('.acordion3_content').setStyles({
border: '3px solid #0F0',
'overflow-y': 'auto',
});
Option 2, create one more div inside or outside it. I did this option to get a scroll div I could have events connected to. Like this I could have a scroll inside the accordion's content without it being affected of Fx.Acordion's CSS.

Categories