I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.
Related
I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).
Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result
You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}
I'm working on a website and the client wanted exactly the mockup. The problem is, the headers and some other divs that I've been using with a background are giving me some problems. And for the first time in my experience, it's not a browser-specific problem.
This is how my sister (I asked her to send me screenshots from another PC...) and I see it:
But, in every Mac, every mobile device, and the PC at my office, I see it like this:
As you can see, only in SOME Windows PCs, there's extra padding in top of the text. If I get rid of the padding-top of the titles, it comes back to "normal", only a pair of pixels thinner.
Here's the html for the title:
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
And this, is the css of that part of the html:
.contentHeader{
line-height: 38px;
padding-top: 6.5px;
padding-left: 11px;
background-color: white;
/*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
font-size: 20px;
letter-spacing: 1px;
}
.square{
font-size:20px;
background-color: black;
line-height: 15px;
min-height: 19px;
min-width: 19px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
font-family: "Arial";
}
I'm open to any solutions... I already use jQuery for some things in this site, so it could be a fix if it really works.
I made sure that the cache is not the problem. And I tested it in my PC in Chrome, Firefox and Edge... everywhere's the same. As I said, I only saw that in my PC and my sister's. Both of us use Windows 10, and in my office I have Windows 10 too. Any ideas of the cause?
Your top have padding and your bottom don't. I made both with the same padding:
.contentHeader{
height: 38px;
line-height: 38px;
padding-left: 11px;
font-size: 20px;
letter-spacing: 1px;
background: skyblue;
padding-top: 10px;
padding-bottom: 10px;
}
.square{
font-size:19px;
background-color: black;
line-height: 19px;
min-height: 19px;
min-width: 19px;
display: inline-block;
vertical-align: text-bottom;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
}
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
First, don't use <b>. If you mean to bold the text, use font-weight:bold in CSS.
Putting block-level elements in inline elements (a <div> in a <b>) will cause unexpected positioning. This is probably what's causing this, but we can't say for sure.
Don't alter line-height for positioning purposes. That's solely for text spacing.
Lastly, surround the text in a <span> and use display:inline-block on it (so it obeys vertical paddings). That way, you can position both the square and the text with paddings as well as target it for font-weight:bold.
Try just this and work your way with just paddings and dimensions.
<div class="contentHeader">
<div class="square"></div>
<span class="promotion-text">IN PROMOTION</span>
</div>
toss in some javascript code to read the info, and let it be placed in very bottom footer or some such. it might give details of what is pushing what.
chrome / firefox both have built in or third party apps to install to "right click" and choose inspect. you might find something, some place within the "dom" tree.
=================
honestly not sure what you are talking about... the images you linked to. both show "scrolling" left/right and up/down or at least that is what it seems like. good chance you are going out past "width" and/or "height" of the screen and causing scroll bars to happen per say.
Whenever clicking the buttons to complete the sum, the box automatically resizes. I want to make sure the box remains a certain shape and doesn't adjust when the buttons are clicked.
I've tried padding eat and none seems to work. Rather new to css so excuse any obvious errors!
This is my css as I can't upload the photo because of the limit:
div {
border-style: solid;
text-align: center;
background: white;
border-width: 5px;
width: 300px;
margin-left: 450px;
margin-top: 50px;
padding: 50px 50px 100px 50px;
box-shadow: 0px 0px 30px gray;
}
the html
the script, just repeated near identically for each button
Try to use a normalize.css or a reset.css
Just include it in you html like other css files
https://necolas.github.io/normalize.css/
My Navigation buttons are not displaying the entire HOVER and ACTIVE states on my Promotional Slider. The Circle needs to show, its getting cut off at the bottom and I do not know why.
Anyone Have any Suggestions?
Here is the Page:
http://newsite.702wedding.com/aaaa-promo-slide-index.asp
The Problem should be apparent. JUST THE CIRCLES i am worried about. Rest works fine for me.
Thanks
On .paging a, add some you need to add some padding-bottom.
So, replace your padding rule with this:
padding: 2px 4px 3px 8px;
To line all the numbers up correctly requires quite a few millions of changes. I've tested in Firefox.
Follow all of these steps:
On .paging, remove the letter-spacing / line-height rules.
On .paging, set these rules:
padding-left: 6px;
width: 236px;
display: block;
text-align: center
On .paging a, set these rules:
float: left;
margin: 24px 0 0 32px;
padding: 2px 0 3px 0;
width: 24px
look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins