I am using Bootstrap Modal Plugin
$("#summaryFileDisplay").html(data.summaryfileContent);
$("#myModal").modal("show");
In above code data.summaryfileContent contains html and css data which i am rendering into summaryFileDisplay id
Modal rendering is fine, but it make changes in the parent CSS as well.
How can i avoid the same
Add .modal-dialog before all the styles rendering in modal. So it will make styles exclusive for Bootstrap dialogs.
/*
e.g.
Current CSS code.*/
.lineBorder {
border: solid 1px #000;
}
/*Change above to*/
.modal-dialog .lineBorder {
border: solid 1px #000;
}
Related
I have the following test code in my style.css (to turn borders on for all elements):
* {
border: 1px solid blue; /*testing*/
}
Currently, I am just changing 1px to 0px when I use this test feature.
* {
border: 0px solid blue; /*testing*/
}
But I found that buttons with borders, even border=0, do not take on default button style. So, I would like to exclude the button element from my test code.
Something like this:
*:not([button]) {
border: 1px solid blue;
}
But the above doesn't work.
Is there a simple way to exclude when applying a 1px border to all elements?
The correct syntax:
*:not(button) {
// ....
}
Square brackets are for attributes, as inside :not() you should have a selector.
I am making a django web application where I have base.html and base_bootstrap.html files. My base_bootstrap.html file contains the following two lines to use bootstrap CSS:
<!-- Bootstrap core CSS -->
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<!-- Custom styles for this template -->
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
Is there a way for me to modify the following css in order to change the #999 into a # without creating a separate css file?
pre {
border: 1px solid #999;
page-break-inside: avoid
}
You can always override external css by using either internal css on the page or the inline css specifically to the HTML element.
Example:
.card
{
margin:5px;
padding:25px;
border: 1px solid #999;
display:inline-block;
width:50px;
background:#ddd;
}
.card{
border:2px solid #f00;
}
<div class="card"></div>
You can also use !important to override any css with the HTML element.
Example: border:2px solid black !important;
DEMO
Refer to: https://css-tricks.com/specifics-on-css-specificity/
Use Internal CSS
You can override the color code by declaring it again in your HTML page again.
pre {
border: 1px solid #999;
page-break-inside: avoid
}
pre {
border-color:#878;
}
Your pre tag have now a border-color at #878.
But, if you can change the nativ color code, change him.
Hope this will help you.
You can download the the SASS version and modify the parts you want or include a custom file with modifications / extra styles you want, then rebuild bootstrap with the gem installed or create your own Grunt/Gulp script to build the SASS to CSS.
https://github.com/twbs/bootstrap-sass
BS is originally built in LESS which would work too.
I am using bootstrap 3. The input type=text elements are cool. Now I would like to create a similar rounded border around a div element. Anything I've tried seems ugly, Is it possible with bootstrap 3?
Thanks in advance
To quickly make a div look like a Bootstrap input, simply add a .form-control class to your div.
<div class="form-control">I am inside a div.</div>
Also check out Bootstrap Panels. Since divs are not form controls, panals have rounded corners and are more appropriate for divs.
<div class="panel panel-default">
<div class="panel-body">I am inside a panel.</div>
</div>
Here is a JSFiddle demo of both options.
Since you're trying to emulate a bootstrap input, #James Lawruk's suggestion of using .form-control is the quickest simplest way to do it.
But if you want to learn how to emulate styling you see elsewhere (which you should), you need to inspect the css used in .form-control (if on Chrome, right-click and "inspect element"), copy the relevant styling, and create your own class to apply.
In this case:
.form-control{
display: block;
width: 100%; /* THIS */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; /* THIS */
background-color: #fff;
background-image: none;
border: 1px solid #ccc; /* THIS */
border-radius: 4px; /* THIS */
}
becomes
.custom{
width: 100%;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
}
NOTE: I am ignoring a few pseudo-classes also attached to .form-control, like :focus, but pseudo-elements are a another reason you might not want to apply a class that was designed for another purpose.
I am trying to change default bootstrap tab styles. So my custom style should be similar to this image's styles.
I tried it like this, but it's not working. The main thing doesn't skew the bottom of each tabs.
.content .nav-tabs {
background: #dd5b5b;
padding: 15px 0 0 0;
}
.content .nav-tabs > li > a {
padding: 5px 40px;
background: #eaedf2;
border: 1px solid #a48686;
border-bottom: none;
border-top-right-radius: 2em;
border-top-left-radius: 1.5em;
}
JS BIN with the code so far
Can anybody help me to get the output like the above image using pure css?
Thank you.
Bootstrap easily allows to customize tabs and their behaviour.
For the colors, consider using Gradients in your CSS, working in the corresponding classes, as you wish. Here is a nice generator: http://www.colorzilla.com/gradient-editor/
For the icons, you can just use FontAwesome (http://fontawesome.io/icons/) or similar webfont.
I'm using this free Web Template - EliteCircle and have just incorporated it into a master page. The master page wraps the html in:
<form id="form1" runat="server">
//master page html
</form>
The template almost comes out fine except the entire page is surrounded by a think white border (default CSS behavior for form?) and the footer background is half white on the very bottom.
I wouldn't expect the form with id=form1 to change anything in the layout. There is nothing in the [CSS][2] with that id.
When I remove the form tags from the master page (just to check) the layout is perfect, no problems.
Any ideas?
(Using Visual Web Developer 2008 Express)
Thanks,
Greg
The CSS: http://www.styleshout.com/templates/preview/EliteCircle12/images/EliteCircle.css
Have you seen the
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
declaration in your CSS file? That might just explain the thick white border and other stuff you mention :)
Either change that declaration to form.myForm (and change all forms that need it), or re-cascade the form1 id or interior tags on your page to override those settings.
I agree with Konerak, but a word of advice, don't set properties to html elements in a generic way, instead, use classes...
Your css:
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
The sugestted:
form.standard {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
If you set the css to the form element, all forms in your page will receive does properties, but if you set does properties to a class, only form's with that class will receive then...
Btw: DocType may also interfere with the desired result...