For Dojo TabContainer I am setting two Tabs with titles: Role, Admin.
My tabs are not not at all styled.
In the browser those two Tabs are coming as RoleAdmin
How can I style tabs?
Can anybody please suggest?
It sounds like you need to add a theme.
Add the css to the head.
<link rel="stylesheet" type="text/css"
href="PATH_TO_DOJO/dijit/themes/claro/claro.css">
Add the theme to the body tag
<body class="claro">
http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html
I found the below great technique in http://www.codeproject.com/Articles/331920/DataGrid-View-with-CRUD-operations-using-Dojo-Data
And the answer is:
<script>
dojo.query("body").addClass("claro");
</script>
With the above answer, my Tabs are looking like a charm.
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
I'm using bootstrap-table-export to be able to export data from a table, but the icon is weird:
Does anyone knows how to change this icon? I read the docs, but I didn't understand it.
The icon is a glyphicon. If you got this symbol instead of the normal glyphicon-export, you should check if you are including the bootstrap correctly. The recommended CDN for Bootstrap is:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Hope it helps.
I have a problem with bootstrap and bootstrap awesome font.<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
when I put these together something is not working. If I remove for example bootstrap, font awesome is working. I am trying to add social media buttons like this: social media buttons
and it is working but without bootstrap. But when I add bootstrap I am loosing navigation bar: broken buttons when add bootstrap. Sorry for my bad explanation I am new in this :) any help would be appreciated.
Have you tried to implement bootstrap first and then the bootstrap awesome one?
If css classes have the same name they override each other based on wich one is defined last.
For example, when i add bootstrap.css first with a class .emoticon and after that a custom.css file that also has a .emoticon class it will use the implementation from the last one.
Hope this helps!
I would suggest to download bootstrap and implement locally. This will solve the issue, if I am not mistaken the problem cause integrity, crossorigin attributes.
Copy the code of font-awesome and bootstrap in new css file rather than cdn. Include bootstrap.css and then font-awesome.css in your Index.html, it would work.
I had a really simple question.
I'm trying to implement Flexslider (http://www.woothemes.com/flexslider/) onto my page http://www.gofree.com/123-LAC/ but it does not seem to work (the images appear really large and are listed).
I followed all of the directions on the page. What am I doing wrong?
Thanks in advance!
Use jquery library above the flexslider.
<link rel="stylesheet" href="styles/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="styles/jquery.flexslider-min.js"></script>
And dont use another jquery library in that page. It create the conflict of both jquery library.
Always Use jquery latest.. It improve the efficiency and performance
of the site
Learn jquery
I want to use a theme in dojo, dojox and dijit. For example tundra. Do I need only the line
<link rel="stylesheet" href="dojo/dijit/themes/tundra/tundra.css" />
or are more css imports needed to get all the styles that I need?
Do I need to import specific css for widgets like dialog?
Add it to the body as well:
<body class="tundra">
I think that's it: class + proper CSS link.
The class hints at how to use different themes for different parts of a page. Just put the proper class on the parent of a sub-tree where you want to see the theme.