I am using Grails 2.1.0 and Twitter Bootstrap Plugin 2.1.1 and am encountering an issue with navbar-fixed-top.
In order to get the Navbar fixed to the top of the page to behave correctly during resize, the Twitter Bootstrap Docs states:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
How can I do this when using the Grails Plugin for Twitter Bootstrap?
Here is what I have tried:
main.gsp
<head>
...
<r:require modules="bootstrap-css"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<r:require modules="bootstrap-responsive-css"/>
<r:layoutResources/>
</head>
The problem is that Grails Plugin for Twitter Bootstrap takes the content of bootstrap.css and bootstrap-responsive.css and combines them into the following merged file: static/bundle-bundle_bootstrap_head.css.
Thus, I am not able to put the body padding style "after core Bootstrap CSS and before Responsive CSS" as per Twitter Bootstrap docs.
Here is the View Source HTML that I get from the main.gsp above
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css"
rel="stylesheet" media="screen, projection" />
If there is no way to do this, I could always just drop the Grails Twitter Bootstrap Plugin and manually download Twitter Bootstrap and put it my Grails Project's web-app/css, web-app/images, and web-app/js. However, I would like to be able to use the Grails Twitter Bootstrap Plugin.
Thank you very much in advance, I appreciate it!
Bootstrap recommends that place for the style because when the screen width goes below 980px navbar becomes static (not fixed). So calling bootstrap-responsive.css after the padding prevents from a blank space at the top in mobile devices (there's not fxed element to fill that padding).
You can reproduce this behaviour using a media query:
#media (min-width:980px) {
body {
padding-top: 40px;
}
}
Put this CSS anywhere in your stylesheets, and don't worry about your <links>
Related
My angular application is hosted on a server with no internet connection, because of that, I removed the following code from my index.html:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
And downloaded them via npm: npm install material-design-icons --save
And added them like this in my idex.html :
<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
Everything seems fine, mostly of the icons work except for this one:
No matter if I use it like this:
<span class="material-icons">
read_more
</span>
or this
<mat-icon
read_more
</mat-icon>
or even as the character code, since I thought it has something todo with ligatures (I took the code from here https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints)
<mat-icon>
</mat-icon>
It does work if I use <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> in my index.html and have an internet connection, but I need to find a way for it to work without an internet connection.
Has anybody an idea?
I solved my problem by using "fontface": https://github.com/fontsource/fontsource
I installed int by using npm install #fontsource/material-icons, this adds the following folder:
I replaced added in my main style file with the following:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
And in my main styles file (I use scss) I added the following:
#import "~#fontsource/material-icons/index.css";
That did the trick for me. I also were able to use the icon without the code:
<mat-icon>read_more</mat-icon>
Try to add it in angular.json rather than index.html. Also, check if that icon is available in the version you have downloaded. Try to downgrade the package and run the npm install command.
Scenario :
I'm using material icons, and I face a problem, I usually use filled ones and everything is ok, right now I want to use a outlined one, they have the same name, "screen_share"
Tried Case :
My try was include in index.html:
<link
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"/>
<link type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined"
rel="stylesheet">
and in myComponent.html
<button mat-button>
<mat-icon>
screen_share_outline
</mat-icon>
</button>
but it still shows the filled one.
How can I do it?
this is not the same than the suggested duplicate, because the solution presented is the option I try and didn't work
Use
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined"
rel="stylesheet">
Instead of
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons&style=outlined"
rel="stylesheet">
Looks like the outlined fonts have not been finalized yet per issue #773
https://github.com/google/material-design-icons/issues/773
I see you are reviewing this issue
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
Until the outlined versions are completely included you will need to use the workaround provided in that stackoverflow question... I verified it in stackblitz and it does work.
Add following import to index.html
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Add the following to style.css
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
Use the following in your component html.
<i class="material-icons-new outline-screen_share"></i>
You can use, for while, this repository. Works pretty equal to Material Icon normal
cguilhermf/material-icons-outline
I've seen similar questions, but not this exactly.
Do CSS media queries have to be in an external CSS file to work properly?
I've got a client who I’ve only got access to an inline css block within WordPress. Their IT department has the CMS really locked down, and the only thing I have access to change is the CSS via a plugin called Improved Simpler CSS that puts an inline block of <style type="text/css"></style> before the <head> closes.
In doing the site, the browser seems to pick up the "inline" media queries OK, responding to changing the browser's width, but utilizing an iPhone or iOS simulator, I only get the desktop view, and I'm thinking iOS doesn't like the CSS not being externalized.
<style type="text/css">
/* Mobile-specific media query */
#media only screen and (min-width: 320px) and (max-width:767px) {
#wrapper,
.home #content,
.page #container,
.page .page,
#footer,
.page #content {
width: 100%;
}
#header {
margin-top: 50px;
margin-left: 20px;
width: 95%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 151px;
}
}
</style>
No, they don't have to be external...
MDN's docs on Media Queries demonstrates the two main ways of setting media queries:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media queries are perfectly valid within <style>, they don't have to be within an external stylesheet.
Make sure you include the viewport meta tag in your head (if you haven't already):
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also help if you include the CSS you currently have.
I have an html page where I am experimenting with resizable and other ui features for divs created dynamically. The page shows correctly when in a local directory and accessed by IE File > Open. When I tranfer the file to the web server and access by http://localhost/file.html. The resizable grip icons aren't shown. Also, there are css styles that aren't applied.
The div is defined
var index = getCookie("divindex");
if (index == "" || index == null) index = 1;
var divid = "compage"+index;
$("#page").append('<div id="'+divid+'" class="comdiv ui-widget-content"></div>');
$('#'+divid).append('<p class="comhdr editableText ui-widget-header">Sample'+index+'</p>');
$('#'+divid).css('top',50);
$('#'+divid).css('left',50);
$('#'+divid).css('width',150);
$('#'+divid).css('height',150);
$('#'+divid).resizable();
$('#'+divid).draggable();
$('#'+divid).draggable("option", "handle", '.comhdr');
$( '#'+divid+' p').editableText();
This also happens for a static div.
<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px;
height:250px; border:1px solid grey;">
<p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>
The libraries in the file are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script>
<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<style>
.comdiv { position:absolute; padding: 0.5em; border: 1px solid black}
.comhdr { text-align: center; margin: 0; cursor:move; font: 14px bold Georgia; border 1px solid grey; background: grey;}
</style>
<script>
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
});
</script>
Why would the behavior be different between the local file and the web server?
http://jsbin.com/awosup
If I download a copy of jquery/jquery-ui to my web server this fixes the problem. From http://jqueryui.com/download I downloaded stable version 1.8.15 UI lightness theme.
I also had the probelm that the resizable grip isn't showing up along with some other styles not applied. In my case, I found out that I had a css defined which overrode some jquery-ui styles. You can see such things e.g. in Firebug. In my case, I had defined the background for div tags which weighed heavier than the ".ui-icon-gripsmall-diagonal-se" and ".ui-icon" class style definitions.
I did not need to install a local copy of jquery on my web server. CDN version works fine now.
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin