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 }
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'm trying to change the background color of the li element when it's class changes from "dropdown" to "dropdown open" on click. I've managed to successfully change the color of the text (which is an a). However I can't change the parent li properties.
I've copied the code here: http://www.bootply.com/FK88owgjgL. At the end of the CSS file you'll see what I've managed to code concerning background color of the li and of it's child. I can't understand why font color works and background doesn't.
Any help will be much appreciated.
Thanks for your time
I think the problem is related to the floating elements inside the form, adding clear fix will help.
.navbar-right .dropdown-menu form:after {
content: "";
display: table;
clear: both;
}
And there is a bit extra background at the bottom due to the parent margin, which can be rest.
.navbar-right {
margin-bottom: 0;
}
Use this below, if you need to change the background of the search item itself(with the magnifying glass) when active.
li.dropdown.open > a:focus {
color: #000;
background: red;
}
DEMO: http://jsfiddle.net/1ub60vcj/3/
Is this what you want: http://www.bootply.com/rzkcuqK3jA
.nav.navbar-right.navbar-nav.bot-search {
background-color: #000;
margin: 0 -15px;
padding: 5px 0px;
}
I want to make my navbar in BS3 to be of height 20px. How do I do this?
I've tried the following:
.tnav .navbar .container { height: 28px; }
Did nothing.
.navbar-fixed-top {
height: 25px; /* Whatever you want. */
}
Appears to be able to increase the size of the bar, but cannot decrease.
What is a good way to do this while preserving the container's alignment, etc.
bootstrap had 15px top padding and 15px bottom padding on .navbar-nav > li > a so you need to decrease it by overriding it in your css file and .navbar has min-height:50px; decrease it as much you want.
for example
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
add these classes to your css and then check.
Minder Saini's example above almost works, but the .navbar-brand needs to be reduced as well.
A working example (using it on my own site) with Bootstrap 3.3.4:
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important; padding-bottom:0 !important;
height: 30px;
}
.navbar {min-height:30px !important;}
Edit for Mobile...
To make this example work on mobile as well, you have to change the styling of the navbar toggle like so
.navbar-toggle {
padding: 0 0;
margin-top: 7px;
margin-bottom: 0;
}
Instead of <nav class="navbar ... use <nav class="navbar navbar-xs...
and add these 3 line of css
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
Output :
For Bootstrap 4
Some of the previous answers are not working for Bootstrap 4. To reduce the size of the navigation bar in this version, I suggest eliminating the padding like this.
.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
You could try with other styles too.
The styles I found that define the total height of the navigation bar are:
padding-top and padding-bottom are set to 0.5rem for .navbar.
padding-top and padding-bottom are set to 0.5rem for .navbar-text.
besides a line-height of 1.5rem inherited from the body.
Thus, in total the navigation bar is 3.5 times the root font size.
In my case, which I was using big font sizes; I redefined the ".navbar" class in my CSS file like this:
.navbar {
padding-top: 0.25rem; /* 0px does not look good on small screens */
padding-bottom: 0.25rem;
font-size: smaller; /* Just because I am using big size font */
line-height: 1em;
}
Final comment, avoid using absolute values when playing with the previous styles. Use the units rem or em instead.
The answer above worked fine (MVC5 + Bootstrap 3.0), but the height returned to the default once the navbar button showed up (very small screen). Had to add the below in my .css to fix that as well.
.navbar-header .navbar-toggle {
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
}
If you have only one nav and you want to change it, you should change your variables.less: #navbar-height (somewhere near line 265, I can't recall how many lines I added to mine).
This is referenced by the mixin .navbar-vertical-align, which is used for example to position the "toggle" element, anything with .navbar-form, .navbar-btn, and .navbar-text.
If you have two navbars and want them to be different heights, Minder Saini's answer may work well enough, when qualified further by an , e.g., #topnav.navbar but should be tested across multiple device widths.
.navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;}
.navbar-brand{padding-top:7px !important; max-height: 24px; }
.navbar .navbar-toggle { margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }
In Bootstrap 4
In my case I have just changed the .navbar min-height and the links font-size and it decreased the navbar.
For example:
.navbar{
min-height:12px;
}
.navbar a {
font-size: 11.2px;
}
And this also worked for increasing the navbar height.
This also helps to change the navbar size when scrolling down the browser.
Simply change the default 50px navbar-height by including this to your variable overrides.
You can find this default navbar-height on line 365 and 360 on bootstrap's SASS and LESS variables files respectively.
File location, SASS:
bootstrap/assets/stylesheets/bootstrap/_variables.scss
File location, LESS:
bootstrap/less/variable.less
This is my CSS/LESS CSS code so far:
//make navbar taller
#navbarHeight: 60px;
//make navbar link text 18px
.navbar-inner {
font-size: 18px;
}
//make navbar brand text 36px
.navbar .brand {
font-size: 36px;
}
Which produces this:
FYI I'm using the Twitter Bootstrap demo code, I haven't altered the html (aside from changing the brand name).
As you can see, the brand name is centered vertically within the navbar like it should be, but the navigation links are not (they're bit higher towards the top). The problem only became apparent once I altered the height of the navbar. How can I get them to be centred vertically (like this website, for example)?
If it's any help, highlighting the elements in Chrome shows this:
The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.
Relevant parts from the original bootstrap navbar LESS -
For .brand:
.brand {
// Vertically center the text given $navbarHeight
#elementHeight: 20px;
padding: ((#navbarHeight - #elementHeight) / 2 - 2) 20px ((#navbarHeight - #elementHeight) / 2 + 2);
font-size: 20px;
line-height: 1;
}
For links in the navbar:
.navbar .nav > li > a {
#elementHeight: 20px;
padding: ((#navbarHeight - #elementHeight) / 2 - 1) 10px ((#navbarHeight - #elementHeight) / 2 + 1);
line-height: 19px;
}
You'll probably need to play around with the values of #elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px #navbarHeight (these default values are meant for a 40px #navbarHeight). Maybe try a 40px #elementHeight and/or a 29px line-height to start.
If the above answer doesn't help, and you haven't touch the html, the only thing I can think of is the css. You might want to look at the css which the bootstrap example used and modify the sizes of .navbar-inner and .navbar .brand accordingly.
You can try this:
display: table-cell;
I've just had a similar issue with Bootstrap 3 but with the brand eliment. In the end I used the following css:
.navbar-brand {
font-size: 3em;
line-height: 1em;
}
My nav bar has increased in size due to a 50px image, with top and bottom margins of 10px. Not sure if that is of any help.
In order to make all my links looks like buttons, I've done that in my CSS:
a {
color: #06A;
text-decoration: underline;
margin: 10px 20px;
padding: 10px 20px;
/*background-color: #EEE;*/
border: #BBB solid 1px;
}
They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.
Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink
<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).
To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.
If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.
The easiest solution is to set the line-height correctly (without changing display).
Use "display: block" to make padding and margin have a effect.
Try styling your links with display: inline-block;.
You may want to consider using the float style:
<a style='float:left' href='#' />
...which will let you do all the fun stuff and "help" position your anchors as a bonus.
(If you want things to stop floating, put clear:both )
#snowflake's question-level comment got me thinking.
It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).
The code for this would look a bit like this:
HTML:
<ul class="genrelist">
<li>Fantasy</li>
<li>Children's Literature</li>
<li>Speculative Fiction</li>
<li>Absurdist Fiction</li>
<li>Fiction</li>
<li>Word I can't read</li>
</ul>
CSS:
.genrelist {
list-style-type: none;
overflow: hidden;
}
.genrelist li {
/*background-color: #EEE;*/
border: #BBB solid 1px;
display: inline;
float: left;
margin: 10px 20px;
padding: 10px 20px;
}
.genrelist li a {
color: #06A;
text-decoration: underline;
}
The code above would display like this (full-size image):