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
Related
I tried to implement select2 plugin using the Bulma css framework but it seems messy in frontend. I tried this using bootstrap and yes there's no problem since select2 has a bootstrap compatibility.
HTML:
<div class="field">
<label class="label">Role</label>
<p class="control">
<span class="select is-fullwidth">
<select2 v-model="form.role"
placeholder="Select Role"
name="role"
:value="form.role"
:multiple="false"
>
<option></option>
<option v-for="role in roles" :value="role.id">{{ role.display_name }}</option>
</select2>
</span>
</p>
</div>
I made it work, maybe my example can help you.
View
<div class="field">
<label class="label">Hair</label>
<div class="control">
<select2 class="is-medium" v-model="post.custom_data.hair" :options="{}">
#foreach (config('post.cat.hair') as $id => $value)
<option value="{{ $id }}">{{ __($value) }}</option>
#endforeach
</select2>
</div>
</div>
SASS
.select2-wrapper {
.select2-container {
.select2-selection {
transition: border-color $speed;
font-family: $family-sans-serif;
height: 2.285em;
line-height: 1.5;
font-size: 1rem;
outline: none !important;
display: inline-flex;
align-items: center;
width: 100%;
border-color: $border;
border-radius: $radius;
&:hover {
border-color: $border-hover;
}
.select2-selection__rendered {
padding-left: 0.75em;
padding-right: 0.75em;
}
.select2-selection__arrow {
display: none;
}
}
&.select2-container--open {
.select2-selection {
border-color: $primary;
&:hover {
border-color: $primary;
}
}
}
}
&.is-medium {
.select2-container {
.select2-selection {
font-size: $size-5;
}
}
}
&.is-large {
.select2-container {
.select2-selection {
font-size: $size-4;
}
}
}
}
.select2-container {
.select2-dropdown {
border-color: $primary;
.select2-search {
margin: 10px;
.select2-search__field {
#extend .input;
border-radius: $radius !important;
}
}
.select2-results__options {
max-height: 210px;
.select2-results__option {
padding: 0.75em;
font-family: $family-sans-serif;
font-size: 1rem;
&.select2-results__option--highlighted {
background: $primary;
}
}
}
}
}
Result
Hope it helps ^^
.select2-container {
.select2-selection--single {
height: auto !important;
padding: 3px 0 !important;
border: 1px solid #dbdbdb !important;
.select2-selection__arrow{
top: 5px !important;
}
.select2-selection__placeholder {
color: #dbdbdb !important;
}
}
.select2-dropdown {
border: 1px solid #dbdbdb !important;
border-top: 0 !important;
.select2-search {
margin: 5px;
.select2-search__field {
padding: 10px !important;
border-radius: 3px !important;
font-size: 1rem;
height: 2.25em;
box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
max-width: 100%;
width: 100%;
border-radius: 3px !important;
}
}
.select2-results__options {
max-height: 200px !important;
.select2-results__option {
padding: 0.37em 0.75em !important;
font-size: 1rem;
&.select2-results__option--highlighted {
}
}
}
}
}
I open issue about this.
https://github.com/jgthms/bulma/issues/1555
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
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/
I'm trying to use the background-image css property with a website I'm building with Ruby on Rails.
I've tried several different variations of background-image: url, background: url, with and without quotations, and several paths to the image. The image is currently located in app/assets/images/upload.png.
background: url(upload.png);
custom.css.scss
/* UNIVERSAL */
body {
background-color: black;
padding-top: 8px;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: arial, sans-serif;
font-size: 16px;
}
.content {
background-color: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
padding: 1px 15px;
}
h2 {
font-size: 18px;
}
p {
font-size: 16px;
}
ol {
font-size: 16px;
}
/* NAVIGATION */
ul {
padding: 0px;
}
#navtop {
float: right;
display: inline-block;
position: relative;
bottom: 47px;
right:4px;
letter-spacing:1px;
}
#topnavcontainer {
margin-bottom: -40px;
}
#navtop li, #navbottom li, #navbuttons li {
display: inline;
margin: 0px;
padding: 0px;
}
#navbuttons {
word-spacing: 25px;
position: relative;
left: 400px;
bottom: 60px;
display: inline-block;
}
#navbottom {
text-align: center;
word-spacing:90px;
letter-spacing:1px;
margin-top:25px;
}
#navtop a:link, #navbottom a:link, #navtop a:visited, #navbottom a:visited {
text-decoration: none;
font-size: 12px;
color: #999999;
}
#navtop a:hover, #navbottom a:hover {
color: white;
}
#uploadbutton a:link, #uploadbutton a:visited, #viewbutton a:link, #viewbutton a:visited {
text-decoration: none;
border-style:solid;
border-width:3px;
border-color:#666666;
padding: 5px;
color: white;
font-size: 14px;
font-weight: bold;
letter-spacing:2px;
}
#uploadbutton a:hover {
color: #FF0000;
}
#viewbutton a:hover {
color: #0066FF;
}
/*style the main menu*/
.myMenu {
margin:0;
padding:0;
text-align: left;
}
.myMenu li {
list-style:none;
float:left;
}
.myMenu li a:link, .myMenu li a:visited {
display:block;
text-decoration:none;
padding: 0.5em 1em;
margin:0;
}
.myMenu li a:hover {
background-color:black;
}
/*style the sub menu*/
.myMenu li ul {
position:absolute;
visibility:hidden;
margin:0;
padding:0;
}
.myMenu li ul li {
display:inline;
float:none;
}
.myMenu li ul li a:link, .myMenu li ul li a:visited {
background-color:black;
width:55px;
}
.myMenu li ul li a:hover {
background-color:#999999;
}
/* HOME PAGE */
#homepage {
text-align: center;
}
#homeheadline {
color: white;
background-color: #333333;
font-weight:normal;
border-style:solid;
border-width:6px;
border-color:#333333;
letter-spacing:1px;
margin-bottom: 45px;
}
a#clickhere , a#clickhere:visited {
text-decoration: none;
color: #0066FF;
}
#videotitle {
color: #FF0000;
position: absolute;;
bottom: 70px;
display: inline;
font-size: 19px;
left: 60px;
}
#videolist {
position: absolute;
left: 40px;
display: inline-block;
}
#audiencetitle {
color: #0066FF;
position: absolute;
bottom: 70px;
left: 340px;
display: inline;
font-size: 19px;
}
#audiencelist {
position: absolute;
display: inline-block;
left: 320px;
}
a.greenbutton, a.greenbutton:visited, {
font-size: 14px;
color: white;
font-weight: bold;
text-decoration: none;
background-color: #009900;
border-style:solid;
border-width:7px;
border-color:#009900;
letter-spacing:1px;
}
#homead {
margin-bottom: 25px;
margin-top: 45px;
display: block;
}
#lists {
width: 538px;
height: 100px;
position: relative;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* FORMS */
.greenbutton {
font-family: arial, sans-serif;
font-size: 14px;
color: white;
font-weight: bold;
text-decoration: none;
background-color: #009900;
border-style:solid;
border-width:3px;
border-color:#009900;
letter-spacing:1px;
margin-bottom: 40px;
}
.textinput {
border: 1px solid #bbb;
height: 18px;
width: 300px;
margin-bottom:30px;
}
.signform {
text-align: center;
width:300px;
margin-left: auto;
margin-right: auto;
}
.signformfields {
text-align: left;
}
#error_explanation {
color:#f00;
font-size: 16px;
ul { list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
/* Upload Menu */
#uploadpage {
height: 580px;
}
.uploadnav ul {
list-style-type: none;
}
.uploadnav {
width: 200px;
text-align: center;
float:left;
}
.uploadbox {
background-color: black;
background-image: url( image_path ("upload.png"));
border-style:solid;
border-width:25px;
border-color: black;
margin-top: 20px;
}
.uploadgreybox {
background-color: #CCCCCC;
border-style:solid;
border-width:25px;
border-color: #CCCCCC;
margin-top: 20px;
}
.uploadtext {
color: white;
background-color: black;
padding: 5px;
}
.uploadgreytext {
color: #666666;
background-color: #CCCCCC;
padding: 5px;
}
.uploadpagecontent {
float:right;
}
The most correct way:
background-image: url(<%= asset_path 'upload.png' %>)
See the Guide for details: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets (sec. 2.2.1 CSS and ERB)
NOTE: If you're doing this in your application.css then add .erb extension to it to become application.css.erb
if somebody comes by and still looking for an answer and you're using SASS and bootstrap, you can try
background: image-url('bgImage.jpg');
that worked for me. You can as well take a look on http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets as jdoe mentioned.
You need to point to the image path correctly. It should be:
background: url(/assets/url.png);
Try using the Inspector in Google Chrome - useful for checking resources like this that are called by CSS.
I have had the similar problem and I found that the following code works
background-image: url('/assets/xyz.jpg');
you probably need to change the path to the image. Where is the css file in relation to the images folder, eg app/assets/css/style.css.
If it is here then your path the the upload.png will be background: url(../images/upload.png); background: url(/images/upload.png); or background: url(images/upload.png);
You shouldn't have to change the extention to your custom.css.scss or your importantly no need to add erb to the scss file
in application.css file in your /assets/stylesheets directory
all you need is an element
html{
background: url('/images/test.jpg');
text-align:center;
color:#fff;
}
Poss your css file, move the
try
background: white;z-index:-1;
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.