Now I am using primefaces fileupload. I set width to fileupload. But when selecting long file names, filename is overflow. Like
How to solve this??? My css is
.ui-panelgrid tr,.ui-panelgrid td {
border: none;
}
.ui-fileupload .cancel {
display: none;
}
.ui-fileupload .progress {
display: none;
}
.ui-widget-content {
background: none;
border: 1px solid #A8A8A8;
color: #4F4F4F;
}
.ui-widget-header {
background: none;
border: none;
color: #333333;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
width: 450px;
}
.fileupload-content {
padding: 0.2em 0.4em;
}
.fileupload-with {
width: 600px;
}
You just have to fix your CSS, has been asked many times on SO in general. Since you are using PF fileUpload particularly you can use something like this.
.files td.name {
word-break:break-all;
}
More Info:
http://css-tricks.com/almanac/properties/w/word-break/
Related
Here, you can see that currently, we are using a native input tag as an example. It works well But if we replace <input> with <lv-input> , tooltip doesn’t works because <lv-input> uses ::focus-within event for all the wrapper styling.
Currently, LvTooltip doesn’t support focus-within event.
import Tooltip from 'lightvue/tooltip';
export default {
directives: {
tooltip: Tooltip,
},
};
.lv-demo_layout {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
input {
padding: 8px;
background-color: #edf2f7;
border: none;
width: 30%;
border-radius: 4px;
border: solid 3px rgba(0, 0, 0, 0);
transition: all 0.2s;
}
.tooltip-example-wrapper > input::placeholder {
opacity: 0.7;
}
.tooltip-example-wrapper > input:focus {
outline: none;
border: solid 3px rgba(0, 0, 0, 0.1);
}
i know this question has been several times,but none of the solutions worked for me
I have a JumboElevator.css.scc file
#import "bootstrap-sprockets";
#import "bootstrap";
Then i have just one page
new.html.erb
It has internal stylesheet
.jumbotron {
background: #358CCE;
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
#extend .has-error;
.form-control {
color: #b94a48;
}
}
.navbar-brand
{
padding:2px 5px;
}
.icon
{
padding:5px;
}
.check_box_type
{
padding-left:5px;
}
.field_with_errors .form-control {
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.field_with_errors .form-control {
color: #b94a48;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
After i included active admin,my this internal styling are getting overridden ny active admin stylesheet.
Please can anyone help me
Moving active_admin.css.scss to vendor folder didnt work
All this is happening when deploying to heroku
I've created grid in MVC5 like
.
But I want a vertical line as a column separator like
I'm using grid.mvc (version: 3.0.0) of nugget package and default bootstrap for VS2013(MVC5).
Here is my Gridmvc.css
/***
* Grid.Mvc stylesheet http://gridmvc.codeplex.com/
* This file contains default styles for Grid.Mvc.
*/
/* Grid */
table.grid-table { margin: 0; }
table.grid-table .grid-wrap { padding: 0; position: relative; }
table.grid-table .grid-empty-text { color: #666; }
/* Grid headers */
table.grid-table .grid-header { position: relative; }
table.grid-table .grid-header .sorted-asc .grid-sort-arrow:after { content: " \2193"; }
table.grid-table .grid-header .sorted-desc .grid-sort-arrow:after { content: " \2191"; }
table.grid-table .grid-header > .grid-header-title { border: #999999 1px solid;height: 21px;background-color: #f0f0f0;text-overflow: ellipsis;overflow: hidden; }
/* Grid body */
/*table.grid-table tr.grid-row-selected td { background: #4888C2 !important; color: white; }*/
table.grid-table tr.grid-row-selected td { margin-bottom: 1px; padding-top: 0px; border: #000000 1px solid; height: 21px; }
/*table.grid-table tr.grid-row-selected a { color: white; }*/
table.grid-table tr.grid-row-selected a { margin-bottom: 1px; color: #000000; padding-top: 1px; border: #c4ddff 1px solid; height: 21px; background-color: #a7cdf0; }
/* Grid filtering */
input.grid-filter-input { padding: 4px; font-size: 13px; }
table.grid-table .grid-filter { position: relative; margin-top: 2px; float: right; width: 10px; height: 12px; }
table.grid-table .grid-filter-btn { cursor: pointer; display: block; width: 10px; height: 12px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat; }
table.grid-table .grid-filter-btn.filtered { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat; }
table.grid-table .grid-filter-buttons { padding: 0; }
table.grid-table .grid-filter-datepicker { font-size: 12px; }
table.grid-table .grid-filter-datepicker table td { padding: 1px!important; }
table.grid-table .grid-filter-datepicker .ui-datepicker { width: auto; }
table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear { white-space: nowrap; padding-left: 23px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='); background-position: 3px center; background-repeat: no-repeat; }
table.grid-table .grid-filter-choose.choose-selected { background-color: white!important; cursor: default; color: #999; }
table.grid-table .grid-popup-additional { padding: 3px 0 0 0; }
/* POP-UP */
.grid-dropdown { font-weight: normal; left: -102px; top: 16px!important; min-width: 180px; }
.grid-dropdown-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat; height: 8px; left: 99px; position: absolute; top: -8px; width: 14px; }
.grid-dropdown-inner { padding: 5px 7px; }
.grid-dropdown ul.menu-list { list-style-type: none; margin: 3px 0 0 0; padding: 0; }
.grid-dropdown ul.menu-list li a { text-decoration: none; background-position: 6px center; background-repeat: no-repeat; display: block; padding: 4px 5px; }
.grid-dropdown ul.menu-list li a:hover { background-color: #EEE; text-decoration: none; }
Added these two lines under GridBody in Gridmvc.css :
table.grid-table tr td {border-right: solid 1px #666;}
table.grid-table tr a {border-right: solid 1px #666;}
To add a right border to your table you need to apply it to your table headings and table data tags
Add this to your CSS and place it after the gridmvc.css.
td, th {
border-right: 4px solid black;
}
Hope this helps
I want scrollbars to be always visible in IOS. The quick solution is the "::-webkit-scrollbar" fix. However when using "webkit-overflow-scrolling: touch" for the "slide feeling", the scrollbars are not visible anymore.
How can I get them both working?
See the example http://jsfiddle.net/gatb4ct6/5/:
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
/*-webkit-overflow-scrolling: touch;*/
/* uncomment above and scrollbars are not visible on IOS */
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
I was searching for the same problem. It appears that you can use just one of the two options. Scroll auto but with styled scrollbar or fluid scroll but with invisible and not styled scrollbar.
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Or use the -webkit-overflow-scrolling: touch; and none of the pseudo classes after.
I have a problem with my webkit scrollbar on the iPod/iPhone/iPad - the user can't scroll down. The scrollbar just looks like a floating line, and the page breaks halfway through. (It works fine in Chrome & Safari.)
Is there any way I can keep the scrollbar, but have it not be custom on apple products?
Here's my site, and here's my scrollbar code:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
}
::-webkit-scrollbar-button:vertical:increment {
background-color: #fff;
}
::-webkit-scrollbar-track-piece {
background-color: #eee;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
html {
overflow: auto;
background-color: #FAFAFA;
-webkit-font-smoothing: antialiased;
}
body {
background: #FAFAFA;
font-family: arial, serif;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
color: #999;
}
You might have to load that scrollbar styling code from a separate stylesheet. Move it over to a new file, lets say scrollbars.css, and attach this code to your JavaScript:
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.search('iphone') == -1 && userAgent.search('ipod') == -1)
{
$('head').append('<link rel="stylesheet" href="scrollbars.css" type="text/css" />');
}
In your site, you have these styles in the main page:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
}
::-webkit-scrollbar-button:vertical:increment {
background-color: #fff;
}
::-webkit-scrollbar-track-piece {
background-color: #eee;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
...
Take them and copy them over to a new file called scrollbars.css. Now, delete those old ones from your site completely. The JavaScript loads the scrollbar CSS file automagically.