I have a large ASP.Net app to which I am trying to add a JQuery/Bootstrap multiselect dropdown (can't add this to Fiddle - to large). I am using a Bootstrap CDN/API to add the multiselect and generic Bootstrap css and js. There is a table in my application. Before I added the Bootstrap, it looked like this.
After I add the bootstrap, it looks like this:
Basically, the word-wrap: break-word; attribute seems to be getting messed up. I have the Boostrap added before my custom css stylesheet as recommended by other posts:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//js.arcgis.com/3.26/esri/css/esri.css?parameter=1"/> <%--"parameter= 1" prevents intellisense error --%>
<link rel="stylesheet" href="Content/Style/Style.css"/>
The table has its own id's for the element and children called #checkBoxesTable.
#checkBoxesTable > tr > td {
word-wrap: break-word;
}
...
.bootstrap-overrides #checkBoxesTable > tr > td {
padding: 10px;
word-wrap: break-word;
}
I've even tried to create a class (see above and below) to override any Bootstrap ids or classes but it doesn't seem to work (the table is dynamically created under the scenarios id in the Default.asmx file). Is there anything else I can try to get the word-wrap to work?:
<div id="scenarios" class="bootstrap-overrides"></div>
After much research, the problem here was the version of generic bootstrap I was using. I went to the multi-select gitHub documentation and looked in the index.html file for their example, which used the following:
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
Once I upped the version to 3.3.2, it worked (with my override class of course).
Related
I have a simple MVC project and I want to start design it with CSS file,
I created a Style/StyleSheet.css file with this content:
body {
background-color:green;
}
and added the link to it inside _Layout.cshtml, with this line:
<link href="#Url.Content("~/Style/StyleSheet.css")" rel="stylesheet" type="text/css" />
I don't see any change of the background color, what am I doing wrong ?
Help will be Appreciated ! Thanks !
Try basic html:
<link href="/Style/StyleSheet.css" rel="stylesheet" type="text/css" />
or change "..." inside the string to '...' :
<link href="#Url.Content('~/Style/StyleSheet.css')" rel="stylesheet" type="text/css" />
So if I copy and paste the google translate plugin code snippet:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
It changes all my site css [from headings, animations to even boostrap css].
I did some research and ofcourse I found class="notranslate" and yes I applied for headings and stuff.
I will try by myself, but an answer would be cool.
It was easy.
So for everyone who has this problem you just have to add class="notranslate" to the stylesheet's Link tag, for each one which actually does something on that specific page.
e.g:
<link rel="stylesheet" type="text/css" href="/Templates/CSS/bootstrap.min.css" title="standard" class="notranslate" />
I have solution width config javascript
<script>
$(".class-name").addClass("notranslate");
</script>
I'm using Play framework.
In a template it is possible to do the following to include css.
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
But what I would like to do is to include the css right into the webpage
<style>#[include the static file contents]</style>
Is that possible?
As others mentioned it is NOT preferred way, anyway you can use common 'tags' technique for doing this,
just create a file views/tags/yourStyles.scala.html with content:
<style>
* {
background: orange;
}
</style>
so in your template/view you can use it as (sample):
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.WebJarAssets.at("images/favicon.png")">
#tags.yourStyles() <!-- <-here ->
</head>
If you're using
wp_enqueue_style('handle-name', $loc);
you get something like
<link rel='stylesheet' id='handle-name' href='http://example.com/style.css' type='text/css' media='all' />
Is there any easy way to get the content of the style.css inside a <style> tag?
<style>
html,body {
...
}
...
</style>
Is there a built in solution or have I do it manually. For performance I'll use a caching around
You can use an include like this:
<style>
<? include('style.css'); ?>
</style>
I have two javascripts that I think are in a conflict. idTabs, which helps me make the navigation and lightbox, which is the photo gallery. I also want to add that I have a 3rd page linked, a PHP SELECT from database page.
this is in my head
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<script type="text/javascript" src="lightbox0/js/jquery.js"></script>
<script type="text/javascript" src="lightbox0/js/jquery.lightbox-0.5.js"></script>
> <link rel="stylesheet" type="text/css" href="lightbox0/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
I dont understand what the light box doesn work. the id tabs works perfectly but when i click on a page, it doesn have the lightbox effect. i tried with at least 4-5 lightobx versions, the same effect. help ?
idTabs should be loaded after jQuery. Try the following:
<script src="lightbox0/js/jquery.js"></script>
<script src="lightbox0/js/jquery.lightbox-0.5.js"></script>
<script src="jquery.idTabs.min.js"></script>
Sanity Check: Do you have a <div id="gallery"> with links in it in the page?