I copied all the htmls and css in demo, except kendo.all.min.js, since I'm only trying out the opensource version.
However, the look and feel is different. I checked the code on the demo and I am doing the same thing. Any ideas?
DEMO
http://demos.kendoui.com/web/grid/editing-popup.html
MINE
http://i.stack.imgur.com/PAzxR.png
Set the font-size of your page. The Kendo UI demos have the following CSS rule:
html {
font: 75% Arial,Helvetica,sans-serif;
}
Related
I feel like this could be a possible issue with how CodePen interprets things. I am new to CSS, so, would appreciate any explanations.
I have code running on CodePen. https://codepen.io/jay-pancodu/pen/bGjdbry
The output looks like this.
Now, that code, I also run locally. that code is available here. https://github.com/Jay-study-nildana/StackOverDoubtsWeb/tree/main/CalculatorwithBootstrap
When this is run locally, I get an output like this.
All I did was create a new Pen, copy pasted the code from the local files to the online codepen editor.
Why would this happen? is this normal CodePen behavior that I should simply anticipate?
Further, The original code is available here, https://codepen.io/giana/pen/GJMBEv. That looks just fine, and oddly enough, when I copy paste this codepen code to run locally, the layout gets screw up again.
So, I am just confused. And, I am new to CSS.
Adding some lines of code, because, the editor won't let me post without some lines of code.Please ignore this below code snippet.
body {
color: #181ce9;
font: 300 18px/1.6 "Source Sans Pro", sans-serif;
margin: 0;
padding: 5em 0 2em;
text-align: center;
}
I find that the normalize.css is the main reason why your CodePen won't work. Take note that CSS will make the last line for the main style. In CodePen CSS will always take the style on the top. And this normalize CSS is under the CSS Codepen style, different from your local that the normalize CSS is on top of your style.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
I am getting a weird behavior when I make height as a variable $main-height in CSS.
height: $main-height/2;
Result of checkbox check
Demo fiddles are listed below:
Hard coded height JSFiddle
Variable height JSFiddle
When I use the same code in CodePen it works - CodePen .
How to fix this in jsFiddle and my HTML?
Please note that I have no experience in LESS/SASS.
Thanks for the comments. Based on the comments, I am adding it as answer.
Why the HTML is not working: This code need to be compiled as CSS.
How to make it work in JsFiddle: On top/right of the css box and choose "scss" as the language. (as mentioned by #MichaelCoker)
How to get Compiled CSS: In codepen, on top/right arrow in the css panel, select "View compiled css" to get the compiled CSS (as mentioned by #MichaelCoker)
I am looking for a ressource where I can download CSS styles suitable for Rstudio/knitr markdown output?
The default look of the default CSS-style is fine, but I would like to find a CSS style where the content is positioned in the middle of the screen.
something like this (ignore content, colors, sidebar etc):
http://www.barackobama.com/news/
not like this (which is similar to the default):
http://stat.ethz.ch/R-manual/R-patched/library/stats/html/Normal.html
I don't really know CSS so I can't do it myself. I have tried to change the margin in the default CSS style from 0px to 200 px:
body, td {
font-family: sans-serif;
background-color: white;
font-size: 16px;
margin: 200px;
}
The problem with this "solution" is that it only works when the browser window is maximized, and pdf printed from the browser are too narrow also.
edit: This is good:
https://gist.github.com/andyferra/2554919
edit2: The preview version of Rstudio ( RStudio 0.98.932 - Windows XP/Vista/7/8) has a nice default CSS. Get it here: http://www.rstudio.com/products/rstudio/download/preview/
edit3: The newest version of Rstudio now includes some very nice CSS-styles to choose from :) http://www.rstudio.com/products/rstudio/download/
Not just a CSS resource, but you can take a look at the knitrBootstrap project, which provides a way to convert Rmarkdown to HTML styled with the bootstrap framework, including a CSS style chooser and some fancy javascript add-ons :
https://github.com/jimhester/knitrBootstrap
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.
I'm using Telerik RadControls for ASP.NET and wondered if there was any way to turn off/stop the CSS that is automatically downloaded with the controls.
I don't want to remove any of the class names that are applied to the telerik HTML elements, I just want a clean slate so that I can style them exactly how I want.
The reaon I ask is that I'm trying to apply an font enlarger for people with impaired vision to my site. I can overwrite the current styles with something like:
html body .RadInput_Default .riTextBox, div.RadComboBox_Default input.rcbInput {
font-size: 0.9em !important;
height: 1.4em !important;
line-height: 1.3em !important;
width: 6em !important;
}
I have to write !important to overwrite the styles that are coming down with the .axd file taht comes down with the Telerik control. The problem with this though is that if I try and enlarge the font (I'm using javascript to increase the default size of the font in ems) the font-size for the Telerik control always remains at 0.9em.
Any ideas?
Thanks for your time
That each telerik control has:
EnableEmbeddedSkins
EnableEmbeddedBaseStylesheet
Setting both of these to false will disable all of telerik's embedded stylesheets.
A quick warning though - some controls, e.g. the panelbar, won't work without some of the built in CSS (the expanding/collapsing of child elements won't work) unless you add the necessary styles yourself, so tread with care.
More info can be found here:
Disabling embedded resources - especially the part entitled "Disabling embedded skins".