I want to hide border of rich:fileupload.I just need to show only browse button.Can anyone please guide me on this.
<td colspan="4">
<rich:fileUpload id="upload" fileUploadListener="#{fileUploadBean.listener}" maxFilesQuantity="#{fileUploadBean.uploadsAvailable}"
acceptedTypes="txt,ppt,jpg,doc,xls, gif, bmp,pdf" ontyperejected="alert('Only TXT,PPT,DOC,XLS JPG, GIF,PDF and BMP files are accepted');"
addControlLabel="Browse" listHeight="auto" listWidth="300px" onsizerejected="fileSizeRejected();"
immediateUpload="#{fileUploadBean.autoUpload}" allowFlash="#{fileUploadBean.useFlash}" addButtonClass="browse-button-font" >
<a4j:support event="onuploadcomplete" reRender="uploadInfo" oncomplete="setFlag();"/>
</rich:fileUpload>
</td>
Below is my CSS code:
Even I put border:none still one border is coming outside the browse button.
.rich-fileupload-button-border{
border:none !important;
}
.rich-fileupload-ico-start,.rich-fileupload-ico-stop,.rich-fileupload-ico-clear,.rich-fileupload-anc{
display: none !important;
}
.rich-fileupload-ico-add{
border: 1px solid #474747; background: #0035a9 url(images/ui-bg_highlight-hard_60_0035a9_1x100.png) 50% 50% repeat-x;
position: fixed;
margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible;
background-image: none;
}
.browse-button-font
{
font-family: Segoe UI, Arial, sans-serif; font-size: 1.0em;font-weight: bold;
color: #ffffff;
}
.rich-fileupload-toolbar-decor {
background: none;
border:none !important;
}
.rich-fileupload-list-decor{
border:none !important;
}
div div.rf-fu { border: 0px; width: 85px; !important }
div div.rf-fu-hdr { border: 0px; !important }
span span.rf-fu-btn-clr { border: 0px; !important }
span.rf-fu-btns-lft{ width: 85px; !important }
span.rf-fu-btns-rgh{ display: none; !important }
div div.rf-fu-lst { display:none; !important }
Try the CSS above, this should do the trick.
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I have an PrimeNg Tree (Angular 2) and I want to delete the selected nodes highlight color.
Image Here
Based on the image I want to delete the blue highlight color.
Instead I want to get this style: Style I want
Here are my styles:
.ui-tree {
width: 100%;
}
body .ui-widget-content {
border: none !important;
}
span.ui-treenode-label {
font-family: Poppins !important;
line-height: 24px !important;
font-size: 14px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
span.ui-treenode-icon {
line-height: 24px !important;
font-size: 1.2rem !important;
}
.ui-tree .ui-chkbox .ui-chkbox-icon {
margin-left: 0px;
}
.ui-tree .ui-treenode-children {
padding-left: 20px !important;
}
.hidden-tree-node {
display: none;
}
.ui-state-highlight .ui-widget-content {
color: white;
}
You can override the original style by setting:
span.ui-state-highlight {
background-color: transparent !important;
color: inherit !important;
}
A few solutions:
1) Use ng-deep
::ng-deep {
span.ui-state-highlight {
background-color: transparent;
color: inherit;
}
}
2)Target the element in a more specific way
span.ui-treenode-label.ui-corner-all.ui-state-highlight {
background-color: transparent;
color: inherit;
}
Also, try to use SASS. It will make your CSS more readable and smarter. You will love it. By the way you should remove the importance from your code. using importants is not good practice.
I have a page with a jumbotron header. the page is - http://www.mzungu.co.il/article.php?id=10
The size of the jumbotron is 40vmax:
.jumbotron {
background-image:url('images/<?php echo $article_cover ?>');
background:repeat:no-repeat;
background-size: 100%;
height: 35vmax;
background-position:center center;
color:#fff;
text-shadow:2px 2px 4px black;
}
the code i have tried so far is:
.jumbotron h1,
.jumbotron .h1 {
position:relative; top 30vmax;
}
with many different variations of position (fixed, absolute, etc) and with "margin top". could not find something that would work for both pc and mobile view.
Also, i wanted to create a background just for the text part, like in this pic
this maybe can help you out.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image
and for the background of the text you may do it like this.
.h1 {
margin: 0 auto;
width: 100px;
h1 {
padding: 6px;
display: block;
border-radius: 30px;
background: rgba(192,192,192,.7);
box-sizing: border-box;
font-size: 22px;
line-height: 1.8;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 1s ease-out;
position: relative;
}
}
CSS
.title{
margin-top: 200px; // does not work!
margin-left: 20px;
font-weight: bold;
color: $green;
font-size: 2.5em;
}
.title:hover{
background-color: transparent;
}
.title:visited{
color: $green;
}
rails / html.erb
<body>
.....
<%if current_page?(login_path) or request.path == "/signup"%>
<%= link_to "TITLE", "#", class: "title"%>
<%= yield %>
<% else %>
.....
</body>
My title CSS use to work but now it does not. Right my title is always stick to the top of the screen no matter what.I've tried margin-top and padding-top, but it refuses to move down. Margin-left, however, does work, so I am not quite sure why one aspect of margin works but the other does not.
What am I doing wrong here? And if you think the problem is not listed in the code above but rather elsewhere in my CSS, please let me know so I can maybe look into other parts of my css where the problem might be !
Just in case below is the portion where it defines the fundamental layout
/* BASIC CONFIGURATION */
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
table{
border-collapse: separate;
border-spacing: 10px 5px;
}
td{
margin-right: 10px;
}
#main-content{
font-family: 'Lato', sans-serif;
}
ul li {
list-style: none;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
a:hover{
background-color: inherit;
}
::selection {
background: #68dff0;
color: #fff;
}
::-moz-selection {
background: #68dff0;
color: #fff;
}
#container {
width: 100%;
height: 100%;
}
Your problem is right here:
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
You have marked that you want all margins and padding to be 0 and made them !important. If you want to override that you have to make your .title element to be important for margins.
I would recommend avoiding !important as much as possible. Typically you don't need it unless you are overriding a provided CSS that defines some fields with !important.
You use percentage for padding-top. Use pixel value and it will work. Percentage in this case will only work if you have fixed height
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;