I have a jquery datatable where I create custom logic to display a custom style that I require when the header column lable is in hover state.
This is my fiddle:
/* UPDATE FIDDLE WAS NOT THE LAST ONE */
https://jsfiddle.net/y1b6puhn/
What I need is that the sorting icon is inside my rounded rectangle so it looks fluent and smooth.
So I would like to have something like this where the sorting icon is moved to left a little bit so when you hover you see it in the same position but on top of my rounded rectangle style.:
I edit your .table-rounded-header a little and it seems to solve it:
#example .table-rounded-header {
border-radius: 25px;
background: #dcd9d9;
padding: 5px;
height: auto; /* for more the one line headers */
width: 85%; /* instead of 100% */
text-align: center; /* make it look nicer */
}
Hope that solve it.
Related
Sandbox link: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css
.line and .arrow are the classes you want probably. Click create event and you see how the arrows are too low, and the clickable area is below the actual button as well as on the button. It even goes outside of the main div, which is #secondPage.
For the clickable area, I can't find anything about reducing it.
For centering text I tried this as well as a few other display: table-cell and text-align: center way. https://www.codecademy.com/forum_questions/50c29d469bc1e14c8b001f64
Hi #secret This is happening because of the fixed height of button,
I made few changes in your CSS you can try with this one it's help you
.arrow {
border-radius: 2vh;
font-size: 2em;
font-weight: bold;
color: darkblue;
width: 5vh;
height: 2vh;
line-height: 0; /* 1. Change Line Height otherwise you want to remove height */
padding: 10px 0; /* 2. TOP - BOTTOM spacing */
cursor: pointer; /* 3. Show cursor this is clickeble */
}
I hope It's Help You :) Thanks
This problem occurs because your button has a fixed height, but the font-size is bigger in some screens. In order to fix this you should change your font-size and height to use the same metrics (e.g. both px,em,rem,vh etc) and make sure that the font-size will always be less than your height.
Things to remember when adjusting those two:
Padding also consumes some of your height
Line height must not be less than your font-size.
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I am working on a CSS/HTML submit form that I am going to make look like the image below.
I am not sure how to make the Submit button appear like it is inside of the Text input though?
Put a container div that has the exact background color as your text-box. By doing this you can obtain the effect of the button being inside the textbox.
Easy, put it inside a div and style the div to look like an input text. Then you just make the input field have the same background than the div.
I did something similar with my blog for submitting comments using relative positioning. You won't need any extra HTML markup with this method.
Start by placing your submit button directly underneath and on the right side of the text input, then move it upwards with relative positioning into the text input. Something like this should work.
input[type="text"] { <-- Your text input (height comes out to 35px with padding)
height: 25px;
padding: 5px;
margin-bottom: 0;
}
input[type="submit"] { <-- Your submit button (10px shorter for padding)
height: 25px;
position: relative;
bottom: 35px;
right: 5px;
margin-top: 0px;
margin-bottom: -30px; <-- To get rid of the empty leftover space.
}