I have the following CSS class:
.table-price-item {
vertical-align: middle;
margin-bottom: 10px;
font-size: 0.875em;
padding-right: 5px;
}
And the following input in simple_forms:
<%= f.input :price, :input_html => { :class => "table-price-item" },
:label => false, :as => :string, :readonly => true %>
When the form renders I get this
<input class="string optional readonly table-price-item" ...
The table-price-item doesn't get applied because it's overridden with this:
textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
from bootstrap. How can I get it to override that last one?
BTW the table-price-item is also applied to select2 and other items on that form.
Order in which css are linked:
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
Finally found the solution.
Since the classes are described in more detail in bootstrap they got overriden.
One way to solve this is by adding !important
.table-price-item {
vertical-align: middle !important;
margin-bottom: 10px !important;
font-size: 0.875em !important;
padding-right: 5px !important;
}
Then they do get priority and get applied!
Include your custom CSS after the Bootstrap CSS and it will override those styles.
Related
im trying to install the universal parallax library, however when i call in my component nothing appear. no error appear also, can anyone help me? i would really appreciate, im not sure what is causing the issue but kindly help.
This is the code:
Can also access the code here:
https://codesandbox.io/s/quirky-paper-b2lm0t
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="universal-parallax.min.css" />
<script src="https://cdn.jsdelivr.net/npm/universal-parallax#1.3.2/dist/universal-parallax.min.js"></script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
new universalParallax().init();
</script>
</html>
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<section>
<div
class="parallax"
data-parallax-image="https://marrio-h.github.io/universal-parallax/demo/img/bg1.jpg"
></div>
</section>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style>
.parallax__container {
clip: rect(0, auto, auto, 0);
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -100;
}
.parallax {
position: fixed;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
/* BG behaviour */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
I need your help. The following code is a copy of a code in jsfiddle.(https://jsfiddle.net/atfLe15b)
In jsfiddle it works but the following code in my computer doesn't work.
More details, In jsfiddle show all file list in the folder. but in my computer it show only the folder name.
Anybody knows about this? thank you in advance.
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ExampleEdit</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
#dropzone {
text-align: center;
width: 300px;
height: 100px;
margin: 10px;
padding: 10px;
border: 4px dashed red;
border-radius: 10px;
}
#boxtitle {
display: table-cell;
vertical-align: middle;
text-align: center;
color: black;
font: bold 2em "Arial", sans-serif;
width: 300px;
height: 100px;
}
body {
font: 14px "Arial", sans-serif;
}
</style>
<script id="insert"></script>
</head>
<body>
<p>Drag files and/or directories to the box below!</p>
<div id="dropzone">
<div id="boxtitle">
Drop Files Here
</div>
</div>
<h2>Directory tree:</h2>
<ul id="listing">
</ul>
<script type="text/javascript">
let dropzone = document.getElementById("dropzone");
let listing = document.getElementById("listing");
function scanFiles(item, container) {
let elem = document.createElement("li");
elem.innerHTML = item.name;
container.appendChild(elem);
if (item.isDirectory) {
let directoryReader = item.createReader();
let directoryContainer = document.createElement("ul");
container.appendChild(directoryContainer);
directoryReader.readEntries(function(entries) {
entries.forEach(function(entry) {
scanFiles(entry, directoryContainer);
});
});
}
}
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
dropzone.addEventListener("drop", function(event) {
let items = event.dataTransfer.items;
event.preventDefault();
listing.innerHTML = "";
for (let i=0; i<items.length; i++) {
let item = items[i].webkitGetAsEntry();
if (item) {
scanFiles(item, listing);
}
}
}, false);
</script>
</body>
</html>
Your code is working for me!
try to change your file name to *.html (index.html)
You need to add /js/lib/dummy.js and /css/result-light.css files.
I am trying to use the retina-1.1.0.less code from retinajs.com. It isn't working because the background images are not showing up at all.
Here is the html:
<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
</head>
Here is the retina.less:
// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
#highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(#path, #w: auto, #h: auto) {
background-image: url(#path);
#at2x_path: ~`#{path}.replace(/\.\w+$/, function(match) { return "#2x" + match; })`;
#media #highdpi {
background-image: url("#{at2x_path}");
background-size: #w #h;
}
}
#button {
.at2x('images/button.png');
}
Here is the CSS (I don't think it matters, though):
#button {
height: 50px;
width: 50px;
float: left;
margin-right: 10px;
}
button.png and button#2x.png are both in the images folder.
I think I might not have linked to the LESS file correctly, but I have no idea how to fix it.
Thanks
The problem is that there is no LESS compiler script (as suggested by seven-phases-max).
Here is the fix to the html:
<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js" ></script>
</head>
I'm following the book http://pragprog.com/book/rails4/agile-web-development-with-rails and my scss files aren't working.
The css file is this one:
.store {
h1 {
margin: 0;
padding-bottom: 0.5em;
font: 150% sans-serif;
color: #226;
border-bottom: 3px dotted #77d;
}
/* An entry in the store catalog */
.entry {
overflow: auto;
margin-top: 1em;
border-bottom: 1px dotted #77d;
min-height: 100px;
img {
width: 80px;
margin-right: 5px;
margin-bottom: 5px;
position: absolute;
}
h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 100px;
margin-top: 0;
margin-bottom: 2px;
color: #227;
}
p, div.price_line {
margin-left: 100px;
margin-top: 0.5em;
margin-bottom: 0.8em;
}
.price {
color: #44a;
font-weight: bold;
margin-right: 3em;
}
}
}
and the html file the following:
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% #products.each do |product| %>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%= product.title %></h3>
<p><%= sanitize(product.description) %></p>
<div class="price_line">
<span class="price"><%= product.price %></span>
</div>
</div>
<% end %>
The CSS is loading properly, but not being applied. However if add a surrounding div with the class "store" it works. The book doesn't refer this situation, and I believe it should "automatically" apply the style, right?
Thanks.
**EDIT********
I found the problem. For those who may encounter the same issue, check the file:
app/assets/views/layouts/application.html.erb
body tag should have the following code:
<body class="<%= controller.controller_name %>">
Great that you found out the solution. But im trying to explain what happened behind the scene.
The way you are using the css is not a general convention. This facility comes with some additional gem. Check this link https://stackoverflow.com/a/4564922/1160106. With these gems you are able to design your css more DRY way.
General Convention
if you want to apply style to the following h1 element
# Here "store" class is the parent element of "h1"
<div class="store">
<h1> some text </h1>
</div>
Will require following way of css
#Here also "store" is written before "h1"
.store h1
{
#some designs
}
Whats happening in your case?
Probably you are maintaining controller wise css files. And presuming that you have a stores_controller. Thats why the classes for your stores_controller is encapsulated in .store {} block. Like
.store {
h3 {font-size: 120%;}
}
So it is clear that your h3 elements require a parent element having store class. And you are doing so by adding class="<%= controller.controller_name %>" with your body tag. Undoubtedly the <body> tag is parent of all following nodes. Now when you are hitting stores_controller it sets class="store" and your styles are working.
The approach is really DRY and recommendable.
As per your code all the styling is between the .store { } block, so it will not reflect as long as you surrounding div with the class "store"
For example
.store {
h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 100px;
}
}
is same as
.store h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 100px;
margin-top: 0;
margin-bottom: 2px;
color: #227;
}
I have been fighting with getting the Dijit.form.DateTextBox working inside of a div. I have found that if I apply the "claro" class to the body tag that it will work just fine. Although, I don't want the claro class overwriting my other styles. Also, I don't have access to my body tag on all of my pages due to MVC.
Here is what I have:
<html>
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.layout.ContentPane");
</script>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
</head>
<body>
<table>
<tr>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date1" id="date1" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
<td>
<div dojoType="dijit.layout.ContentPane" class="claro">
<input type="text" name="date2" id="date2" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
</div>
</td>
</tr>
</table>
</body>
</html>
Just had him implement the Calendar feature that comes with jQueryUI. It is much more straight forward. I see Dojo as more of an Application Framework instead of just using certain widgets for web pages.
This happens because, by default all dojo pop-ups are appended to the BODY (weird).
I found a work around. Just copy the tundra/calendar.css to calendarFix.css and remove all .tundra or .claro references from it. For example, consider this fragment:
:
.tundra .dijitCalendarDecrease {
background-position: top left;
}
.tundra .dijitCalendarIncrease {
background-position: -30px top;
}
.tundra .dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
:
to
:
.dijitCalendarDecrease {
background-position: top left;
}
.dijitCalendarIncrease {
background-position: -30px top;
}
.dijitCalendarContainer {
font-size: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #ccc;
margin: 0;
}
: