I want to display Open tickets only through Open tab ,currently Open tab includes overdue tickets as well.
Please guide.
Thanks
Issue resolved.
I added the flag "&showoverdue=false" in the default case statement of switch in "tickets.inc.php" and its working fine now.
I use this, in css file:
#subnav6.overdueTickets
{
visibility:hidden !important;
width: 0px !important;
margin: 0px !important;
padding: 0px !important;
}
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
I'm trying to change my website's body padding depending on the screen size, but the medium range does not work. The website still uses the body padding of the default mobile size. I have tried lowering the min-width from 768px to 767px or lower to see if that will change anything but it didn't. I cannot see what is wrong with the syntax. Have I missed something? Thank you.
body{
padding-bottom: 300px;
margin-bottom: 900px;
}
#media (min-width:768px) and (max-width: 991){
body{
padding-bottom: 300px;
margin-bottom: 500px;
}
}
#media (min-width:992px) {
body{
padding-bottom: 300px;
margin-bottom: 100px;
}
}
#media (min-width:768px){
/*more codes here....... */
}
Should be max-width: 991px
Also, your last query with "more codes..." can override your previous settings. What are they? if you set those properties here, you literally saying "Ok, apply these when the screen is larger than 768px". This is within your previous range and will be overridden.
This is my site.. http://debt-trust.co.uk/home my problem is that my media screen css not working at the max width 545px... bu it will effect if the max width of browser is in #490px is there any who can help with my problem. thanks
#media only screen and (max-width: 545px){
.main-navigation {
margin-top: 0px;
background: #b5e61d;
padding-bottom: 4px;
padding-top: 3px;
}
#rightlogo{
width: 50%;
}
}
I got the solution of this problem there is an issue sometimes in the hosting sites that there is an error during for the updating there hosting site
I have looked all over for a solution to this problem and nothing seems to work and I really don't want to use a hack if I can avoid it.
When I set the line-height to vertically center my nav it's centered everywhere but safari, it's sitting about 2px high. Here is the css for the nav bar:
nav {
padding: 0px;
margin: 0;
font-size: 16px;
height: 25px;
}
nav ul {
padding-left: 0px;
margin: 0;
line-height: 1.5em;
}
nav li{
display: inline;
text-transform: uppercase;
padding-right: 12px;
padding-left: 12px;
}
I've tried line-height in px, em, and % and it's still wrong in safari. Here is a screenshot of the correct nav position in firefox and the wrong position in safari.
Any help on this issue is much appreciated.
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source: http://meyerweb.com/eric/tools/css/reset/