I can't get the format to display like the example on the DataTables website.
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.css"/>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/jquery.dataTables.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.js"></script>
$(function($) {
$('#myTbl').DataTable();
});
Here is my result.
I want it to look like this.
may you need dom
example:
$('#myTbl').DataTable({dom: "<'row gridheader'<'col-sm-12 col-md-12'B>>"
+ "<'row'<'col-sm-12'tr>>"
+ "<'row gridfooter'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"});
It looks like something has screwed <label> element styling with something like {width: 50px; display: block}. You may need to check whether your stylesheets, loaded after dataTables.bootstrap4.min.css may override <label> styling or, maybe, you did something, like $('label').css({'width': '50px'; 'display': 'block'}) within your code.
So, you might need to limit the scope of your 'label' selector within stylesheets or code. Or, if CSS is the case, change the order of loading your stylesheets, so that default styles are not getting overwritten.
You're using the default datatables.net CSS. Use the one specifically for Bootstrap 4 and this will work fine.
Related
I'm new at Mudblazor and trying to override the default padding of the expansion panel header. Here is what the html looks like:
html mudblazor
Mudblazor creates a div with a .mud-expand-panel-header in the background and that's the element I want to change the bottom padding on. I tried inline css and change the styling from the css file without success. I also tried to use pb-1 on the TitleContent tag but that element doesn't take classes. Any ideas on how to change that?
Solution 1: How to apply custom CSS (directly)
If you wish to override the mud-expand-panel-header style directly, create a new CSS file, include it in the index.html file and make sure it's loaded after MudBlazor.min.css to ensure it takes a priority.
Once that's done, add the following code inside the new file:
.mud-expand-panel-header {
padding: 4px;
}
Solution 2: How to apply custom CSS (indirectly)
Instead of modifying mud-expand-panel-header class directly, apply the CSS you need to any mud-expand-panel-header that's inside an element with a custom CSS class of your own.
Example
https://try.mudblazor.com/snippet/wumGaiveVFPlBBEe
<style>
.custom-expansion-panel .mud-expand-panel-header {
padding-bottom: 4px;
}
</style>
<MudExpansionPanel Class="custom-expansion-panel">
<TitleContent>
<div class="d-flex">
<MudIcon Icon="#Icons.Filled.CheckCircleOutline" Color="Color.Tertiary" class="mr-3"></MudIcon>
<MudText>Title</MudText>
</div>
<MudText Typo="Typo.subtitle1"><b>Price</b></MudText>
</TitleContent>
<ChildContent>
<MudText>Age</MudText>
<MudText Typo="Typo.body2">Notes</MudText>
</ChildContent>
</MudExpansionPanel>
Solution 3: How to get Bootstrap working
If you wish for the pb-1 bootstrap class to work, go to the index.html file and make sure that bootstrap.min.css is loaded a̲f̲t̲e̲r̲ MudBlazor.min.css.
That's what you may currently have:
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
That's what you should have for the Bootstrap class to work:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).
Jsfiddle of how the button is supposed to look like (no css loaded)
<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
</body>
Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:
<link rel="stylesheet" href="main.css" />
My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?
Thanks!
Line 1897 of your CSS is describing styles applied to the buttons.
If you remove line 1923:
height: 3.75em;
It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).
I want to know if it is possible to disable styling on a specific html element.
In my case it is a input text. I cannot resize it. I went through the bootstrap css and found it has padding. I tried to use padding: none and 0 0 0 0 plus !important and it did not work.
Is possible to disable the styling for that specific item?
As of Bootstrap 3, you'd use the list-unstyled class to achieve this.
Example:
<ul class="list-unstyled">
<li>...</li>
</ul>
Hope this solves your problem.
Yes it is possible. You can achieve it in following way:
Load your own stylesheet definition after the bootstrap.css. For your case define input[type=text]{padding:0px;} must call after the bootstrap's css file(s).
If you want to use in-line css you can try: <input type="text" style="padding:0px" />
Hope it helps.
in the 'head' of your HTML change the order of the local css file and bootstrap css, the local css should be the after the bootstrap css:
<head>
<!-- bootstrap css is the first here -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- bootstrap css is the last -->
<link rel="stylesheet" href="style.css">
</head>
now if you applied !important in your css it should work.
another solution is to apply your css inline <element style="padding:0"></element>
Set it in the style of the element in the style attribrute if an item is there it has priority.
Also if you want to be double sure add !important as well
Would Javascript be of any help to you? If so the .setAttribute native javascript function can help:
http://jsfiddle.net/nMJjS/1/
Just replace the id that I made up with the id of input element you want to change
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
i have a submit button with the code inside a form
<li>
<input id="zip" name="zipcode" type="submit"
class="zip-button" value="Find" tabindex="{counter name=tabindex}"/>
</li>
.zip-button{
height:30px;
------}
.zip-button:focus,.zip-button:hover{------}
for some reason the zip is not getting any style.but if manually add it in jquery like
$("#zip").css({"height":"30px",...});
its working.As am very new to styling i couldn't figure it.
Sometimes the cascade in CSS is a possible reason for the that case. Another rule with higher precedence is able to overwrite the definition. Firebug is a great tool for "debugging" css code.
It shows, how the browser interprets the style sheets.
Is your css directly in the page like that? if so, that is the reason. You need to use inline styles, a style tag or an external css file.
inline:
<input style='height:30px;' ...
style tag:
<html>
<head>
<style type='text/css'>
.zip-button{ height:30px; }
</style>
...
external file
sometimes we might be referring to minified css(abc.css.min) file in which some classes might be missing (my case)instead of the original source css.this might result in styles missing for few class which are absent in css.min ....we can find out this using FireBug...in this case we need to go back and set reference right...[am a beginner so bare with my technical terms usage]