I have this HTML which is generated by MVC3 Razor Engine:
<div class="editor-field">
<div id="autoComplete">
#Html.EditorFor(model => Model.group_name, new { ID = "group_name" })
#Html.ValidationMessageFor(model => Model.group_name)
</div>
</div>
And my custom CSS I am writing for my autocomplete functionality:
#group_name input[type='text'], input[type='password']
{
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
#group_name input[type='text'], input[type='password'] ul
{
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
#group_name input[type='text'], input[type='password'] 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;
}
But it is being overrided by the site.css which comes by default with MVC 3 solution which is this:
input[type="text"], input[type="password"]
{
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
width: 200px;
}
Does anyone know what CSS I have to write to target my div and input html? Thanks.
This is because of the CSS Specificity.
You will need to make your rules more specific to override the site.css styles.
Alternatively, just override your site.css styles in the file itself. Site.css isn't like a library of styles which shouldn't be overriden. It's just a start template which you can edit/delete.
I ended up using firebug to look at the HTML as it changes. IE has its own javascript debugging options but being able to see the li render in real time and looking at its tag helped me write my css.
Related
html
<a ref={resume} href='../assets/resume.pdf' download onMouseLeave={() => setMouse(true)} onMouseEnter={() => setMouse(false)} className='resume-container'>
css
.resume-container {
padding: 0;
margin: 0;
margin-left: .5vw;
margin-right: .5vw;
border-radius: 5px;
position: relative;
height: 5vw;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: #D4B44A;
}
all the other properties seems to work, and if I make that to div it will work. but background wont apply to tag
The CSS block looks okay but the A tag might benefit from enclosing a couple things in quotes and changing className to just class.
<html>
<head>
<style type="text/css">
.resume-container {
padding: 0;
margin: 0;
margin-left: .5vw;
margin-right: .5vw;
border-radius: 5px;
position: relative;
height: 5vw;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: #D4B44A;
}
</style>
</head>
<body>
Some Link
<a
ref={resume}
href="../assets/resume.pdf" download
onMouseLeave="{() => setMouse(true)}"
onMouseEnter="{() => setMouse(false)}"
class="resume-container"
>Another Link</a>
</body>
</html>
Links require content to be visible.
.resume-container {
padding: 0;
margin: 0;
margin-left: .5vw;
margin-right: .5vw;
border-radius: 5px;
position: relative;
height: 5vw;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: #D4B44A;
}
Link
As #Maniraj Murugan mentioned in his comment, the code should work.
A possible issue is that there is another background-color property applied which prevents the one inside resume-container class to take effect.
You can try adding !important like so: background-color: #D4B44A !important to override the previous properties.
Change className='resume-container' to class="resume-container". An a tag also requires you have text so that it will display, in the code snippet you provided there is neither text nor a closing tag. I also had problems with href='../assets/resume.pdf' and onMouseLeave={() => setMouse(true)} onMouseEnter={() => setMouse(false)} whenever I tried this code out. Change the apostrophes to quotes with your href and wrap your Javascript in quotes.
Final result below.
<a ref={resume} href="../assets/resume.pdf" download onMouseLeave="{() => setMouse(true)} onMouseEnter={() => setMouse(false)}" class="resume-container">Text</a>
so I'm using a gorgeous search bar component that I found on codepen in my react (CRA) project.
I have imported css in the default src/index.js
Then I have my search component which is composed of Search.js and Search.module.css.
Clearly Bootstrap styling and the Search component styling doesn't work together, when I comment the bootstrap file import in src/index.js, the Search component will be working fine.
So how can I override bootstrap only on my Search Component?
Here is the css of the Search.module.css
#import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}
As you haven't shared the code snippets. I am assuming the bootstrap search will be using: text and button tag. Now, the CSS of this would be coming from bootstrap.
You can do the following:
1) Make a search component level class eg "search-module"
2) Now, create css or scss file import in the search component and within that css
override the bootstrap css by :
.search-module input[type=search] {...}
OR
3) you can do this overriding on your main style.css file too.
You need do to step 2 for all the other conflicting classes, tags, and IDs in the bootstrap with the search component.
PS: This will bloat your CSS. Best would be if you can just pick that part of Bootstrap which is required and rest you write your own style.
Thank you.
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
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;