I use the Kendo UI grid in my project to present my data.
I have a trouble about the its row height. When the grid is initialized; the row seems very odd. I tried to give some informations about the grid's back. The console screen contains some informations about the grid's initialization. You can glance through the enclosed picture.
.k-grid tr td {
border-style: solid;
border-width: 0px 0 1px 1px;
border-color: #c5c5c5;
}
Related
Hi I have a tabulator table which the headers are all icons
I want to add in a fitler box for one field but when I do so using the headerFilter:true the filter is below the icons
is there any clever way to have the filter on the same level as the icons, space is a premuim on my page so ideally Id like them all aligned
I've solved this by modifying the tabulator css I had to give the header-filter a negative top position and it now works fine
`.tabulator .tabulator-header .tabulator-col .tabulator-header-filter
{
position: relative;
box-sizing: border-box;
margin-top: -23px;
width: 100%;
text-align: center;
height: 33px ;
} `
I have two scroll bars and I've set a border radius for it with
::-webkit-scrollbar {
width: 17px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
I have assigned the Div's each unique ID's and a class for both: #Scroll1 & #Scroll2 & .Overflow
My issue is that the overflow is for scrolling through my table of data but both tables are in one big div and I wanted to match the border radius's to the main div.
here is an example:
I will position it better later but what I want is the bottom scroll bar to abandon its
border-top-right-radius and the top scroll bar to drop the border-bottom-right-radius
Any help will be kindly appreciated.
here should be a friendly JSfiddle with the same issue:
http://jsfiddle.net/z98Kq/
If the top scrollbar has the id #Scroll1 and the bottom #Scroll2, simply use:
#Scroll1{
border-bottom-right-radius:0;
}
#Scroll2{
border-top-right-radius:0;
}
If the bars dont have id attributes like this- you can use nth-of-type or nth-child (or their first- and last- derivations) to target the first (top) and last (bottom) scrollbars.
Given your fiddle provided HERE, you should use:
#canceltable::-webkit-scrollbar-thumb,#canceltable::-webkit-scrollbar-track{
border-bottom-right-radius:0;
}
#Deletetable::-webkit-scrollbar-thumb,#Deletetable::-webkit-scrollbar-track{
border-top-right-radius:0;
}
Demo
I created a button using Zurb Foundation styles and Sass mixins. I used #include dropdown-button($base-style:false); to get rid of the default arrow style. Now I want to insert my own arrow in its place (right side)
Here is the default button:
Here is my button now:
I want mine to look something like this:
Here is my html:
<a class="login width-limit" href="#" data-dropdown="drop">Client_Test_1 </a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
<li>Logout</li>
<li>Account Settings</li>
<li>Change SMTP Settings</li>
</ul>
Here is my scss:
.login {
#include grid-column(2);
#include button();
#include dropdown-button($base-style:false);
font-family: $font-stack;
font-size: .9em;
color: #fff;
background-color: $secondary-color;
height: 27px;
border-radius: 7px;
margin: 6px 0 5px 0;
padding: 5px 4px 5px 4px;
}
.width-limit {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 2em; //shrink text
}
.login:hover {
background-color: $primary-color;
}
Here is a fiddle: http://jsfiddle.net/Yq5uU/
How can I add my own custom arrow to make it look like the third example?
Thanks in advance.
You can't make it infinitely long and not break page layout. So simple solution will be deciding how long it can get and setting button container to fill maximum amount of columns before it starts to look wired. Then you can align your button inside the container as you wish and if it gets too long you can replace part of the name with "..." css:overflow:hidden; text-overflow:ellipsis; or show the short form with js.
example: http://jsfiddle.net/z8aWL/2/
The grid column 2 mixin gives you this:
width: grid-calc($columns, $total-columns);
If you're using the default 12 grid, your inputs look like this:
width: grid-calc(2, 12);
The calc function returns the percentage of 2 divided by 12
width: 16.67%;
You are then overwriting that width value with 150px. If you're using default grid values for large rows, that should be closer to 167px wide.
You should avoid setting hard px values if you want to keep this responsive.
Now as for long names, you have two basic options. Either truncate names, by hiding overflow (as JAre suggested) or let crazy long names break your grid, but be contained in the button. Then you would need to not set a width. All the grid col mixin does is give you a width percentage. The row sets the value of the width (of which the col is a percentage). Your button is still contained in a row, so you should be good to go.
I think your best option, if you have access to your username database is to find the "worst case scenario" and design for that. Or better yet, have a shortened name value returned to your design in the first place.
I have a header strip with a shadow effect and contains navigation links; when you hover over them, a sub-menu appears.
See test page here
How can I make the sub-menu appear on a layer BEHIND the header strip? I need the header's box shadow to cast on top of the sub-menu.
Currently the sub-menu ( .main-navigation li ul ) has a z-index lower than the header strip ( .site-header ) but this is having no effect. I've tried giving it a negative z-index but this puts it behind the content (therefore hidden) and the links no longer work - I've read this is a common problem so I'd like to avoid using a negative z-index.
Hope you can help.
Z-index might not be the solution in this case, due to the stacking context of elements. Without re-ordering your html, you might try this trick using box-shadow on a pseudo-element attached to your sub-menu. For example:
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
Check this DEMO. Note that this is only one possible solution, as there are likely other ways to achieve the same effect.
The text content should already naturally appear behind the shadow of the header since it is an adjacent sibling element, ordered after the header in the html. (I added a background image to the content div in the demo to show this.)
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}