My menu-button is a bit wider:
.menu-button {
-fx-pref-width: 250px;
-fx-background-color: #72b3c9;
-fx-padding: 5 16 5 16;
}
and the menu with its items (and their accelerators) is displayed as expected, like this:
But when I want to align the width of menu-item to the width of menu-button, like this:
.menu-item {
-fx-pref-width: 250px;
-fx-pref-height: 40px;
-fx-padding: 5px 16px 5px 16px;
}
then I don't get the accelerators aligned to the right of the menu items:
What I would want (and expect) is that the accelerators are following the width of the menu item and that are aligned to the right edges of their respective menu items, like this:
How can I achieve that?
Edit:
A hack to increase the left-label padding could be used, thus forcing the accelerators more to the right:
.menu-item .label {
-fx-padding: 0 120px 0 0;
}
But, that is a hard-coded platform-dependent approach that needs to be adjusted each time a menu item label text or an accelerator is changed.
Here is a solution that I managed to achieve, like that with the default color it will not appear but if you put two differents color (for Label and Background) it will be ugly for now it is the only thing That I realized. I know something is missing but I can't figure out what :
.menu-button {
-fx-pref-width: 250px;
-fx-background-color: #72b3c9;
}
.menu-item {
-fx-pref-width: 250px;
}
.menu-item > .label{
-fx-pref-width: 200px;
}
Try to perfect it, on my side I will try to find a better solution, good luck !
Its already a very old question and probably you have found some solution. But I am giving my answer here so that others can find it useful.
Don't set any width for .menu-item or it's child .menu-item > .label. Set the padding only in .accelerator-text instead as follows:
.menu-item > .accelerator-text {
-fx-padding: 0 0 0 30px;
}
Customize the left padding to adjust your menu item's width.
Related
I have some stuff I'd like to change in my dropdown. The website is https://community.entermedschool.com/
Below is the list of things I have tried along with the code I used. But none of them seem to be working...
Increase the font size for all of the items in the dropdown menus.
Change the font-weight for all the items in the dropdown to 400.
#primary-menu * {
font-size: 17px;
font-weight: 400;
}
Auto-scale the dropdown size so that all the items fit in one line.
.sub-menu {
width: fit-content;
}
Any help would be much appreciated!
Thanks in advance!
Edit:
The dropdown with which I want these changes is the primary header which I have highlighted here:
I want all of the dropdowns to basically expand automatically so that all of the content 'breathes' in it.
Your width: fit-content; is working but there is no space left for the ::after (the right arrow >). Therefor you could add a margin-right to each li in the submenu (for example 15px) and subtract that amount from the right-property of the ::after:
.sub-menu li {
margin-right: 15px;
}
.site-header .sub-menu .menu-item-has-children:not(.hideshow):after { {
...
right: 0; //instead of 15px
...
}
It works if i change it in the dev tools...
I created a drop down menu with menubar. However I have custumization problems :
The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ;
(just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight
The vertical menu items are too separated from each over and the width of the vertical menus too narow ;
The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;
Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?
I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :
Code:
.p-menubar {
background: transparent;
padding: 0;
height: 30px;
}
What are the particular css elements and clauses to modify ?
Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.
The impacted code:
In the vue.js file:
<div id="menuU" class="user-menu" v-show="isvisible()">
<Menubar:model="items" class="p-menubar"></Menubar>
</div>
the v-show parameter is application specific and not given here.
In css:
.menu-utilisateur {
background-color: lightgrey;
height: 30px;
}
.p-menubar {
background-color: lightgrey;
padding: 0px;
height: 30px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.5rem 1rem !important;
}
.p-menubar .p-menuitem-link {
padding: 0.5rem 0.5rem !important;
}
Don't forget the !important. It overwrites the default values.
I had this kendo treeview. When select a node or sub's-node I want the orange color at full line and same with others (refer to image below).
I to use script below, but when it come to sub's-group the align is not same. Appreciate your help.
.k-treeview span.k-in {
margin-left: -10%;
padding-left: 10%;
padding-right: 60%;
}
DEMO IN DOJO
The way the tree currently works is that the li.k-item have a left padding of 16px, so for the second level it's 32px and so on.
What you need to do is put the indenting mechanism somewhere else. Your li.k-item must have no left padding, but a div inside must. Depending on your item template, it will be something like:
.k-treeview li > div { padding-left: 16px }
.k-treeview li li > div { padding-left: 32px }
.k-treeview li li li > div { padding-left: 48px }
You can generate a dozen levels with less or sass.
When you have this, you can style the selected row:
li[aria-selected="true"] { border: 2px solid orange }
I have a QTabWidget with six tabs, and all the tabs have an icon -
but the icons are not in the center of the tab:
What I've done so far :
tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
"QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs
And:
tabWidget->setTabIcon(index, QIcon("iconPath"));
Any ideas why this is happening, and how I can fix it?
I too have been struggling with this issue. Here is how I resolve it.
Background:
I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:
My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).
I had this as my stylesheet:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
}
Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.
Solution:
After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.
adding the lines:
padding-top: -15px;
padding-bottom: 15px
Resolved the problem for me, however this needs to be changed according to your needs.
My final stylesheet resembles:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
margin: 0px;
padding-top: -15px;
padding-bottom: 15px
}
If somebody has the same problem like me with the icons in the tabs, I found a solution after days and days search for this, and its so simple :D
Just add this to the stylesheet for the TabWidget:
tabWidget->setStyleSheet("::tab {margin: 0px;}");
************
I am having the hardest time trying to figure out how to style that line.
I know that the class is called is-drop-target but I can't scroll through the list of styles to figure out what styles are applied to which properties because the cursor is holding the tab for the class to show and scrolling is not allowed when the cursor is holding something.
I've tried properties background-color, border-color and color but none of them worked.
I've tried pseudo-elements ::before and ::after but neither of those worked either.
Any suggestions would be greatly appreciated. Thanks!
EDIT:
I am using UI Theme named seti-ui. https://atom.io/themes/seti-ui
The class name for the line when dragging tabs around is named placeholder. Try the code below to see what I mean.
.placeholder {
background-color: yellow !important;
}
The easiest to debug this is by using the element inspector and manually adding a list-item with the class .placeholder between two tabs.
Example:
<li is="tabs-tab" class="texteditor tab sortable modified active" data-type="TextEditor">...</li>
<li class="placeholder"></li>
<li is="tabs-tab" class="texteditor tab sortable modified" data-type="TextEditor">...</li>
You can then expand the placeholder item and modify the :before/:after pseudo elements.
Here is an example for the Atom Dark theme:
.tab-bar .placeholder:before {
z-index: 1;
margin: 0;
width: 2px;
height: 2.5em;
background-color: #519fee;
}
.tab-bar .placeholder:after {
z-index: 0;
top: 1.25em;
margin: -4px 0 0 -3px;
border-radius: 0;
border: 4px solid #519fee;
transform: rotate(45deg);
background: transparent;
}
Hope this helps!
I am using Atom version 1.14.4. I have checked developer tools in the version I have there is a class tab-bar applied on ul. List elements of this ul has property background. You can change it.