I am working on a website where scrolling has been completely disabled using this css style.
::-webkit-scrollbar {display: none;}
But now I need a specific scroll inside a div (horizontal scroll) to be visible. How could I show only one scroll while hiding all the others.
Thanks in advance
Use this
body::-webkit-scrollbar {
width: 6px;
border-radius: 4px;
background: transparent;
display: block;
}
body::-webkit-scrollbar-thumb {
width: 6px;
border-radius: 0px;
background: #000000;
}
try instead of hiding all the scrollbars hide same of them
div {
width: 150px;
height: 50px;
border: 1px solid #000;
overflow-x: scroll;
}
.ele-2::-webkit-scrollbar {display: none;}
<div class="ele-1">aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccdddddddddddddddddd</div>
<div class="ele-2">aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccdddddddddddddddddd</div>
Related
my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
I'm trying to add an overlay box at the bottom of a textarea. Positioning the overlay box was easy, but now I want the textarea content to never overlap the overlay box.
My first approach was adding padding-bottom so that the text never reaches the bottom of the textarea, where the overlay box is placed. However, as I type, the text will go under it. Also, scrolling up will cause the same undesired behavior.
Edit:
In response to some of the answers that partially solve my issue. I'm trying to make the textarea look as native as possible, so border color changing on focus would be necessary as well.
.container {
position: relative;
width: 110px;
}
textarea {
width: 100%;
height: 50px;
resize: none;
}
texarea.with-padding {
padding-bottom: 1em;
}
span {
position: absolute;
bottom: 5px;
width: 100%;
height: 1em;
background: rgba(255,0,0,0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
<div class="container">
<textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea>
<span></span>
</div>
You can use a <div> container (which holds your textarea and overlay) as a fake border and remove the border of textarea. Just as shown in the snippet below:
$('textarea').on('focus', function() {
$('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)');
});
$('textarea').on('blur', function() {
$('.textarea-holder').css('border-color', '#333');
});
.textarea-holder {
border: 1px solid #333;
display: inline-block;
}
.textarea-holder textarea {
display: block;
resize: none;
border: none;
}
textarea:focus {
outline: none;
}
.textarea-holder .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
<textarea rows="6"></textarea>
<div class="overlay"></div>
</div>
Hope this helps!
You can simply add a bottom-border: 1em to the textarea to imitate the span element.
Here is a working example: http://codepen.io/anon/pen/woKyvy#anon-login
.container {
position: relative;
width: 200px;
}
textarea {
width: 100%;
height: 50px;
border-bottom: 1em solid rgba(255,0,0,0.5);
}
<div class="container">
<textarea>Try typing. The cursor will never end up under the red line.</textarea>
</div>
So I went ahead and wrote it down:
Removed the border and reset some styles of textarea
Added the fake border to the container and removed the positioning of the span and made it a block element.
See code below:
.container {
position: relative;
width: 110px;
border: 1px solid;
}
textarea {
width: 100%;
height: 50px;
resize: none;
border:none;
outline:none;
padding: 0;
}
.container span {
display:block;
width: 100%;
height: 1em;
background: rgba(255, 0, 0, 0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
I finally found a solution to this riddle thanks to Saurav Rastogi's and eyetea's answers. Both were almost perfect, but failed to make the textarea have its border highlighted on focus. I've managed to keep this behavior using outline.
I think both approaches are useful as they allow for two different border highlight on focus. One leaving the overlay outside, using a div wrapper strategy, and the one leaving it inside, using a very thick border-bottom.
/* Inner border on focus solution */
.textarea-wrapper {
border: 1px solid gray;
display: inline-block;
}
.textarea-wrapper textarea {
display: block;
border: none;
}
.textarea-wrapper textarea:focus {
outline: 1px solid green;
outline-offset: 0;
}
.textarea-wrapper .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
/* Outer border on focus solution */
textarea.bottom-padded {
border-bottom: 21px solid rgba(255,0,0,0.5);
outline: 1px solid gray;
outline-offset: -1px;
}
textarea.bottom-padded:focus {
outline-color: green !important;
}
<div class="textarea-wrapper">
<textarea rows="3">Inner border on focus</textarea>
<div class="overlay"></div>
</div>
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>
I have a custom drop down box for text fields, which is a very large in height when years are added from 2000 to 2020 (or for any large list).
How to make the list scrollable and visible 4 or 5 list items? instead of following full list:
#combobox {
display: none;
z-index: 99999;
position: absolute;
top:20%;
left:30%;
background-color:white;color:black;border:solid 1px black;
padding: 5px;
cursor:pointer;
}
#combobox div {
padding: 10px;
border-bottom: solid 1px #cccccc;
}
#combobox div:hover {
background-color: #cccccc;
}
<div id="combobox" style="" >
<div>2000</div><div>2001</div><div>2002</div><div>2003</div><div>2004</div><div>2005</div><div>2006</div><div>2007</div><div>2008</div><div>2009</div><div>2010</div><div>2011</div><div>2012</div><div>2013</div><div>2014</div><div>2015</div><div>2016</div><div>2017</div><div>2018</div><div>2019</div><div>2020</div>
</div>
You can add overflow: scroll to your div and give it a set height:
#combobox {
...
overflow: scroll;
height: 100px;
}
You can adjust the height to show the number of items that you need.
TIP
To make the scroll look nicer try something like perfectScroll
Add the max-height you want, and overflow-y: scroll;
Using max-height is preferrable over height in case your list contains less items.
#combobox {
z-index: 99999;
background-color: white;
color: black;
border: solid 1px black;
padding: 5px;
cursor: pointer;
position: absolute;
max-height: 245px;
overflow-y: scroll;
}
#combobox div {
padding: 10px;
border-bottom: solid 1px #cccccc;
}
#combobox div:hover {
background-color: #cccccc;
}
<div id="combobox" style="">
<div>2000</div>
<div>2001</div>
<div>2002</div>
<div>2003</div>
<div>2004</div>
<div>2005</div>
<div>2006</div>
<div>2007</div>
<div>2008</div>
<div>2009</div>
<div>2010</div>
<div>2011</div>
<div>2012</div>
<div>2013</div>
<div>2014</div>
<div>2015</div>
<div>2016</div>
<div>2017</div>
<div>2018</div>
<div>2019</div>
<div>2020</div>
</div>
So basically I have a custom multiple select list which has ul li structure. The issue is that when selecting an element, it is being highlighted, but if you scroll to the right the highlighted part is not filling whole row.
One solution is to assign display: table-row; attribute to each li element, highlighted part fills whole row after that, but the issue is that after adding that rows start to not react when clicking on the white part, they respond only if you click directly on the text.
Here is fiddle: http://jsfiddle.net/KRnxq/1/
You could wrap the ul in a wrapper like so:
<div class="wrapper">
<ul class="files multiple-select MultipleSelectBox vertical" unselectable="on" tabindex="0" style="-webkit-user-select: none;">
....
</ul>
</div>
and then put your box styles onto the wrapper and make the ul display:table like so:
.wrapper {
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid #aaa;
/* corner */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.MultipleSelectBox {
display:table;
list-style-type: none;
margin: 0;
padding: 1px 0;
background-color: white;
color: black;
}
Example
EDIT
Here is another version with the following fixes:
no black border creating a click effect when selecting items
better border radius so scrollbars don't remain square
Updated fiddle
you need to add wrapper div and put your UL-li in-the div
.wrapper {
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid black;
}
and
.MultipleSelectBox {
width: 200px;
border: 1px solid #aaa;
height: 200px;
list-style-type: none;
margin: 0;
overflow: none;
}
I am using dreamweaver to create a website and I thought of just using Photoshop to create backgrounds. I decided to do so only because in case I'd choose to change the button name easily by just editing the codes, I could just refer to the code. If I would construct buttons using Photoshop, I wouldn't be able to edit the Texts in those buttons or in any element easily.
So my question is simple, How do I create a button that has a simple inline style making it transparent leaving the value of the button still visible.
.button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
}
It still leaves a border shade after your click it.
To get rid of the outline when clicking, add outline:none
JSFiddle example
button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
<button>button</button>
The solution is pretty easy actually:
<button style="border:1px solid black; background-color: transparent;">Test</button>
This is doing an inline style. You're defining the border to be 1px, solid line, and black in color. The background color is then set to transparent.
UPDATE
Seems like your ACTUAL question is how do you prevent the border after clicking on it. That can be resolved with a CSS pseudo selector: :active.
button {
border: none;
background-color: transparent;
outline: none;
}
button:focus {
border: none;
}
JSFiddle Demo
Make a div and use your image ( png with transparent background ) as the background of the div, then you can apply any text within that div to hover over the button. Something like this:
<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>
CSS:
.button {
height:20px;
width:40px;
background: url("yourimage.png");
}
<div class="button_style">
This is your button value
</div>
.button_style{
background-color: Transparent;
border: none; /* Your can add different style/properties of button Here*/
cursor:pointer;
}
Setting its background image to none also works:
button {
background-image: none;
}
**add the icon top button like this **
#copy_btn{
align-items: center;
position: absolute;
width: 30px;
height: 30px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
.icon_copy{
position: absolute;
padding: 0px;
top:0;
left: 0;
width: 25px;
height: 35px;
}
<button id="copy_btn">
<img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>