The Kendo Splitter has a collapsible property that I want to use. However, the icon is a very small arrow that isn't intuitive at all, the users can barely see it. Even when they know it's there, the icon is so small that clicking it takes some time as hovering such a tiny icon is not that fast.
I want to make it bigger. I managed to enlarge the divider itself
.k-splitbar.k-splitbar-horizontal{
width: 20px;
}
but not the small icon.
I found this post from a user with the exact same issue as me but the solutions there don't work and the user hasn't given any feedback on them.
As stated you can ovveride the rules and here is the description of all the rules for a flat theme
.k-splitbar-horizontal .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
width: 20px; height: 20px;}
.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px;
width: 20px; height: 20px;
}
.k-splitbar.k-splitbar-horizontal{
width: 15px;}
I know 5 years is too late but if someone is struggling with this, here is my solution in SASS.
.k-splitbar{
.k-i-arrow-60-left, .k-i-arrow-60-right{
z-index: 100000;
position: relative;
background: #ccc;
border-radius: 0 10px 10px 0;
bottom: -32px;
left: 20px;
width: 34px;
height: 30px;
font-size: 30px;
}
}
This works for horizontal panes, you can follow similar strategy for vertical ones.
Related
I have a webpage made by me. There are few contents in it which are looking different on different screens (eg: mac and windows).
When I am trying to open the same webpage on my DELL laptop(Windows 10), there are few things which are looking different on another screen size computers.
On different screen size computer; the boxes section, the "See More" text, and the "Sales" text currently looks like this(which is not I want):
"See More" text
"Sales" text
Boxes section:
And the same link, when I am trying to open on my desktop which has bigger screen, it is looking in this way(which is I want):
Boxes section:
"See More" text:
"Sales" text:
I am wondering, what changes do I need to make in my CSS so that it looks same on different screens.
The CSS code which I am using for the boxes are:
.company-heads {
margin-left: 300px;
padding-top: 80px;
font-style: italic;
margin-right: 289px
}
.company-heads .rectangle {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
margin-right: 22px;
width: 355px;
height: 100px;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 100px;
position: relative;
}
.company-heads .rectangle .circle {
background: #aaa;
border-radius: 100%;
height: 60px;
width: 60px;
position: absolute;
top: 20px;
left: 20px;
}
You can do this by giving the parent container, .company-heads, in this case, a max-width! Looks like, .company-heads { max-width: 1140px; } will do the job. Let me know if this doesn't solve your problem!
Having an issue I don't understand. The only way I've been able to center a button on my page perfectly across all devices is if I apply a width: 100% to it.
Issue with this however, is it then makes a sprawling button, way too wide. I'd like to cut it down. The problem is, anytime I get rid of the width: 100% in any way, it makes the perfect button position go haywire.
Any thoughts on how I can have my button centered, but also not super wide and sprawled out. Thank you. -Wilson
link to site: http://www.wilsonschlamme.com/test3.html?
CSS:
img {
width:100%;
max-width:500px;
max-height:340px;
box-shadow: 5px 5px 5px grey;
border-style: groove;
border-width: 1px;
position: absolute;
top: 107px;
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
width: 100%;
position: relative;
top: 600px;
}
#ShowText{
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
position: absolute;
margin-top: 500px;
text-align: center;
margin-left: -140px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
h1{
position: absolute;
top: 5px;
font-size: 250%;
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
#wrapper {
width: 500px;
margin: 0 auto;
}
take a look at this site there's a complete guide to centering a div.
http://www.tipue.com/blog/center-a-div/
I don't know what's your base using absolute positioning for mostly of your element, but to answer your issue, give text-align:center; to #wrapper, then give text-align:left for each of #wrapper children, except the button.
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.
Vague questions but i don't know the right question to ask google either.
I have a widget that has a background img that is in columns on my page. But when I resize the page my widget will be destroyed making impossible to scroll the page sideways. The background image is also cut off.
Also: how can I prepare for my page to adapt to different screen sizes? Is there a way to make my widget stick in one place? Can anyone point me in the right direction?
Thanks
.example_wrapper
{
margin: 10px 20% 10px 20%;
border-style: solid;
border-width: 0px;
height: 315px;
border-radius: 20px;
}
.example_container
{
margin: 10px 0px 10px 3%;
align: center;
border-radius: 0px;
height: 300px;
overflow:auto;
background-image: url('img.png');
background-repeat: no-repeat;
background-position: center;
}
.example_textarea
{
position: absolute;
margin: 145px 30% 0 5%;
align: left;
overflow: hidden;
height: 130px;
}
.twitter_block
{
position: left;
margin: 6px;
height: 120px;
width: 120px;
align: left;
float: left;
}
.twitter_pic
{
position: center;
margin: 1px 20% auto 20%;
}
.scale-image
{
height:73px;
width: 73px;
}
.twitter_link
{
position: none;
margin: 0px 100px auto 30px;
}
.twitter_half
{
margin: 0px;
}
.twitter_profile_pos
{
text-align: center;
margin: 0px 10px auto 17px;
font-weight: bold;
}
.twitter_profile_pos a
{
color: #043E6B;
}
It could be some sort of clearing issue, or it could be something to with your position rules.
position:none, position:left and position:center are not valid rules. So those won't help with any positioning issues.
position:absolute might be breaking your layout if position:relative is not applied to the parent element (otherwise it positions the element relative to the whole document, rather than a specific element). This could be causing the break on resize.
If you could post your corresponding HTML, everyone should be able to recreate it. Or better yet, if you post the code on jsfiddle and put the link here, we can help solve it even faster!!
I have a similar problem to this question Why does my floated left div go to the next line in IE6 using the 960.gs?
In my design, the subcategories should be 4 per row. They look fine in FF,Safari,Chrome, but in ie6 they only show 3 per row. I tried creating a different css for ie6, but it didnt work, also i tried reducing the width and padding of each row, but still i have 3 subcategories per row.
I asked again because i bet the solution can be very specific to the css you have.
try setting width of each .subcategory at 24% or max 237px
.subcategory
{
width:24%;
}
updated
in category.css change in this way:
.subcategory {
FLOAT: left; MARGIN-BOTTOM: 15px; WIDTH: 24%; HEIGHT: 230px; TEXT-ALIGN: center
}
.category-item-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
.subcategory-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
Problems are
MARGIN: 5px 34px;
and
WIDTH: 25%;
I've tried to set them at 30px and 24% and in IE6 it works!