How to hide scrollbar in v-textarea?
While this works on simple textbox, but in v-textarea doing this does not work:
<v-textarea class="hide-scrollbar"/>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
</style>
.hide-scrollbar textarea {overflow-y:hidden}
Hide Scrollbars But Keep Functionality
// Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
// Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Hide Scrollbars and Functionality
.hide-scrollbar{
overflow: hidden;
}
Related
I want to create a .NET CORE application without using javascript at all and I am struggling to show dialogs to perform various crud operation, I want to call a controller action that will fill the dialog data and then show it to the user, without ever needing to use ajax or jquery.
How to show a dialog or popup from .net core without javascript
You could use CSS style to show the dialog or popup, code like this:
CSS style:
<style>
/* popups without javascript */
/* showing popup background */
a.popup:target {
display: block;
}
/* showing popup */
a.popup:target + div.popup {
display: block;
}
/* popup target anchor and background */
a.popup {
/* background is initially hidden */
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 3; /* anything, really, but bigger than other elements on the page */
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
cursor: default;
}
/* popup window */
div.popup {
/* popup window is initially hidden */
display: none;
background: white; /* choose your color; */
width: 640px; /* width */
height: 480px; /* height */
position: fixed;
top: 50%;
left: 50%;
margin-left: -320px; /* = -width / 2 */
margin-top: -240px; /* = -height / 2 */
z-index: 4; /* z-index of popup backgroung + 1 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* links to close popup */
div.popup > a.close {
color: white;
position: absolute;
font-weight: bold;
right: 10px;
}
div.popup > a.close.word {
top: 100%;
margin-top: 5px;
}
div.popup > a.close.x {
bottom: 100%;
margin-bottom: 5px;
}
</style>
Html Content:
<h1>Popup without javascript demo</h1>
<p>Open popup</p>
<p>HTML visible body ends here</p>
<!--
Popup: the key is that id of <a> tag below is the same as href of <a> tag above
- that's what opens popup
<a> below serves several purposes:
1) popup background covering the whole window,
2) anchor to show popup when #my_popup is in URL,
3) link to close popup - if you click the background popup disappears
-->
<a id="my_popup" href="#" class="popup"></a>
<div class="popup">
<h3>My popup heading</h3>
<p>Popup content</p>
<a class="close x" href="#">x</a>
<a class="close word" href="#">Close</a>
</div>
The result like this:
Code from this link, and you could also refer this sample.
I am struggling to show dialogs to perform various crud operation, I
want to call a controller action that will fill the dialog data and
then show it to the user, without ever needing to use ajax or jquery
Since you don't want to use JQuery or Ajax, the above popup content should be populated when the page load, and when executing the CURD operations, you have to refresh the whole page. To implement partial view refreshes the popup content, you have to use JQuery and Ajax.
I might make a obvious mistake but somehow I am stuck with the following:
only for large screens i don't want the vertical scrollbar so i have this simple css:
#media (min-width : 2000px) {
// hacky
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
...more style definitions
but somehow this doesn't work
i am using chrome's toggle device bar tool to switch between different resolutions. All other css definitions for > 2000px are there, only body doesn't seem to be set??
#media (min-width : 2000px) {
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
}
Did you set 100% height for html and body, like this:
html, body {
height: 100%;
}
And also for possible other child elements inside body which span the whole height of body?
Otherwise one of them will get a scroll bar (not necessarily body, but it will look very similar)
datatables.min.css datatables.min.js 2.1.4 jquery, 3.3.5 bootstrap, 1.10.8 datatables
Clear icon does not appear on search filter input for chrome, firefox, but it appears in IE10 and later. Can be easily reproduced in bootstrap sample (https://www.datatables.net/manual/styling/bootstrap ).
When I add my implementation of clear icon the default one also appears in IE.
Is there a simple workaround to turn off extra clear icon for some browsers?
Bootstrap's styling removes the clear icon from the search input from bootstrap datatable. This is part of Bootstrap's default behaviour.
Add this to your CSS:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
It will override Bootstrap's hiding of the clear button.
This is html5 issue:
/* Disable browser close icon for IE */
input[type="search"]::-ms-clear { display: none; width : 0; height: 0; }
input[type="search"]::-ms-reveal { display: none; width : 0; height: 0; }
/* Disable browser close icon for Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
Here is an article for more details on html5 input[type="search"] disabling
This solution worked for me:
<script>
$(document).ready(function() {
$('.dataTables_filter input').addClass('searchinput');
$('.dataTables_filter input').attr('placeholder', 'Buscar');
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
var table = $('#dt_basic').DataTable();
//clear datatable
table
.search('')
.columns().search('')
.draw();
});
});
</script>
css:
.searchclear {
float:left;
right:22px;
top: 8px;
margin: auto;
font-size: 18px;
cursor: pointer;
color: #ccc;
}
and in jquery.dataTables.min.js you need add the icon remove-circle after input:
original code
'<input type="search" '+c.sFilterInput+'"/>'
new code
<input type="search" '+c.sFilterInput+'"/><span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>'
example image
animation style working fine with mozilla and changes color after 5sec but when I tried to run same code on chrome then its not taking that effect??
Style:
.changeColor{
animation: change 5s step-end both;
}
#keyframes change {
from { color: red }
to { color: #4D4D4D }
}
HTML:
<label class="changeColor">XYZ</label>
Internet Explorer 10, Firefox, and Opera supports the #keyframes rule and animation property.
Chrome and Safari requires the prefix -webkit-.
#keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
When the animation is created in the #keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation
Note: Internet Explorer 9, and earlier versions, does not support the #keyframe rule or animation property.
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?
In order for it to work in Safari, it seems to need overflow:auto applied to the div.
Additionally, the display height and width of the div will act as min-height and min-width.
This only worked for me in Safari, not in Firefox 3.5.
<div id="box"> Nice box </div>
CSS:
#box {
/* important */
resize: both;
overflow: auto;
/* Styling */
background: red;
position: absolute; /* per the question */
top: 50px;
left: 50px;
width: 300px
}