I'm evaluating ShieldUI for a client's application and I've run into an issue with setting styles on the Y axis header. Below is the code from the view:
#(Html.ShieldChart(Model)
.Name("chart")
.PrimaryHeader(header => header.Text("")) //no header needed
.Export(true) //turn on export
.ChartLegend(legend => legend.Enabled(false)) //turn off legend since there's only 1 series
.Tooltip(tooltip =>
tooltip.ChartBound(true)
//turn on the axis marker tooltip thingy
.AxisMarkers(axisMarkers =>
axisMarkers.Enabled(true).Mode(TooltipAxisMarkerMode.XY)
.Width(1).ZIndex(3)
)
.CustomHeaderText("{point.pointName:MM-yyyy}")
.CustomPointText("{point.y:c}")
)
.AxisX(axisX => axisX
.CategoricalValues(model => model.Date)
.Title(title => title.Text("Month").Style(style => style.FontWeight(FontWeight.Bold)))
.AxisTickText(axisTickText => axisTickText.Format("{text:MM-yyyy}")))
.AxisY(axisY => axisY
.Title(title => title.Text("Price").Style(style => style.FontWeight(FontWeight.Bold)))
.AxisTickText(axisTickText => axisTickText.Format("{text:c}")))
.DataSeries(dataSeries => dataSeries.Line()
.Data(model => model.Price)))
The bold setting on the x axis works fine, but I can't get bold or size to work on the Y axis. It looks like there may be something wrong with the markup that gets generated. Below are the two text elements from the markup:
<text x="432" y="375" style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;color:#404040;font-weight:bold;fill:#404040;" zIndex="7" text-anchor="middle" visibility="visible"><tspan x="432">Month</tspan></text>
<text x="25" y="181" style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;color:#636363;font-weight:bold;font:11px Segoe UI, Tahoma, Verdana, sans-serif;fill:#636363;" zIndex="7" transform="rotate(270 25 181)" text-anchor="middle" visibility="visible"><tspan x="25">Price</tspan></text>
The first one works fine, the second one doesn't, and I notice that the way they define their font information is different (the first using font-family and font-size, the second using a single font setting. If I copy (via firebug) the style definition from the x to the y, the y axis becomes properly bolded.
Is there something I'm doing wrong, or is this a bug with the way ShieldUI generates the SVG? If it is a bug, any chance of it being fixed any time soon? I can think of several ways to work around the problem, but I'd rather leave hacks out if possible and just wait for a fix if one would be on the horizon.
Edit: I realized that I'd copied markup for the Y axis that didn't match the view code I'd included here, so I updated that. After doing so, I realized that the tag is getting a "font:" style added at the end after it has already defined the family, size, etc. That makes me think even more so that this is a bug with ShieldUI in how it generates that markup.
We've identified a bug in the Shield UI JavaScript Chart component that also affected the ASP.NET and MVC wrappers. The behavior you're describing was due to an issue in the way font settings were applied to chart axis titles. In some situations, the Shield UI Chart applied a default font style that prevented settings like fontSize and fontWeight from getting applied.
The issue was fixed shortly after discovery and will be available in the upcoming 1.6.4 version of the Shield UI JavaScript suite expected in the coming week. The fix is compatible with all server-side wrappers, including ASP.NET MVC.
Related
I'm creating an image carousel for React that I style and rotate using the code found here: https://3dtransforms.desandro.com/carousel
When I first load the carousel things are nice and clear, but as soon as I rotate it, everything blurs (even once motion has stopped), except the item in the original 0-degree position when it finally rotates back around to the front. I tried using -webkit-filter: blur(0); but that doesn't have an impact. Any idea how I can avoid the text blurring?
Before:
After:
I've isolated it to this transform call:
transform: rotateY( ${(props : any) => props.yAngle}deg ) translateZ(${(props : any) => props.zAmount}px)
Since if I put 0 for the props.yAngle everything is clear but if there's any degree that's not zero there, it all becomes blurred.
I integrated the nivo library. I managed to get this pie chart to work:
For this, I used this slightly modified code from the example:
<ResponsivePie
data={data}
margin={config.margins}
padding={0.3}
colors="nivo"
borderColor="inherit:darker(1.6)"
animate
motionStiffness={90}
motionDamping={15}
legends={config.legends}
sortByValue
innerRadius={0}
padAngle={0}
cornerRadius={0}
borderWidth={0}
radialLabelsSkipAngle={10}
radialLabelsTextXOffset={6}
radialLabelsTextColor="#333333"
radialLabelsLinkOffset={0}
radialLabelsLinkDiagonalLength={16}
radialLabelsLinkHorizontalLength={24}
radialLabelsLinkStrokeWidth={1}
radialLabelsLinkColor="#CCCCCC"
slicesLabelsSkipAngle={10}
slicesLabelsTextColor="#333333"
/>
Now, I wanted the colors to be a grayscale, so I changed the colors prop to "greys", as shown in their docs:
colors={{ scheme: 'greys' }}
This results in:
I also tried:
colors="greys"
Using "greens" also results in the same.
If you want to try it out:
What do I need to do?
I see that this is an old question, but I recently encountered the same issue when integrating with nivo. However I did find a solution so I decided to share it anyway.
After playing around with it I found that the code provided in the interactive view is not valid in React, if you would like to use a theme you should use the following syntax:
colors={"nivo"} // or the name of the theme you picked
instead of:
colors={{ scheme: 'nivo' }}
PS: If you want to use some of the other themes you might need to supply them additionally since just a couple of them come with nivo by default.
I had installed Masonry Views module, along with Masonry module in my Drupal 7 site.
In my view, I can select format as "Masonry", and had updated the details such as column width.
But the output still displays the view like unfomatted list.
In my status report, it shows
jQuery Masonry 2.1.08
jQuery Update jQuery 1.10.2
My js file is in: www/mydomain/sites/all/libraries/masonry/jquery.masonry.min.js
I had flushed cached, but the masonry effect still doesn't appear. Any idea what's the problem?
Reading your question again I have a silight suspicion what the problem might be: are your content items display literally as a list? Then you might have to adjust their widths first so more than one can fit inside your content container – otherwise they'll be listed as a list.
So for example if your content container is 960px wide, you should add / modify something like this to your theme's stylesheet, adjusted to your personal preferences of course:
for the container:
.my-container-view #content {
width:960px;
}
for the items:
.my-container-view .item {
width:320px;
float:left;
}
The float might be redundant since masonry should take care of that – but this is at least what I have in my stylesheet…
I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.
The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.
I want to have a style for desktop with
navbar on top
1 left column (as sidebar)
height: 100% minus navbarHeight, with a scrollbar
width: .span3
content that fills the rest of the screen
Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.
I made a sketch to explain better
EDIT: Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)
EDIT2: I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.
EDIT3: Ok, here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.
EDIT4: Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer!
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
From my investigations this week (I'm trying to accomplish the same thing), it seems like bootstrap and a 100%-height design are incompatible from a pure CSS perspective (unless you want to make changes to bootstrap). I'd be interested in seeing your jquery solution.
I'm not sure that I totally understand what you are looking for, but take a look at http://reactivewebdesign.net/Chicago/Traffic which has a top menu (adding the bootstrap navbar should be easy).
The left column spans 3 columns and the map occupies 9 columns. There is also a link in the left menu named "Where Am I" that also uses a Google map. The css for the map is at the top of the page. If you are looking to squeeze the map into three columns, merely reverse the 3 & 9 to 9 & 3 - it should still work.
Hope this helps.
here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.
I'm making a responsive site and need to include a Facebook Like-Box for the client's Facebook fanpage. The developer page for the like-box has a widget for customization, but it doesn't allow you to set a width in percentages.
I've searched around and the closest I've got was this page from 2010, which refers to a fb:fan widget that allows you to link custom CSS. I tried to get this tutorial to work but it fails with this error:
<fb:fan> requires one of the "id" or "name" attributes.
So, to recap, I need a Facebook Like Box that I can either set up to be fluid, or which allows me to pass custom CSS to the iFrame it generates. Anyone able to point me in the right direction?
I found this Gist today and it works perfectly: https://gist.github.com/2571173
/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */
/* This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
You thought it couldn't be done? AHA! Have at you, Facebook and your wicked fixed-width ways: I wrote a JQuery script to undo all your evil!
$(document).ready(function(){
var fbWidth;
function attachFluidLikeBox(){
// the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();
// the containing element in which the Likebox resides
var container = $('#likebox');
// we should only redraw if the width of the container has changed
if(fbWidth != container.width()){
container.empty(); // we remove any previously generated markup
fbWidth = container.width(); // store the width for later comparison
fbml = fbml.split('WIDTH').join(fbWidth.toString()); // insert correct width in pixels
container.html(fbml); // insert the FBML inside the container
try{
FB.XFBML.parse(); // parses all FBML in the DOM.
}catch(err){
// should Facebook's API crap out - wouldn't be the first time
}
}
}
var resizeTimeout;
// Resize event handler
function onResize(){
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(attachFluidLikeBox, 200); // performance: we don't want to redraw/recalculate as the user is dragging the window
}
// Resize listener
$(window).resize(onResize);
// first time we trigger the event manually
onResize();
});
What is does is it adds a listener to the window's resize event. When it resizes, we check the width of the Likebox' containing element, generates new XFBML code with the correct width, replaces the containing element's children with said XFBML and then trigger the Facebook API to parse the XFBML again. I added some timeouts and checks to make sure it doesn't do anything stupid and only runs when it needs to.
Much has changed since the OP.
By simply choosing iFrame and setting your width to 100%, your FB Like Box should be responsive.
Basically FB adds this to the iFrame:
style="border:none; overflow:hidden; width:100%; height:300px;".
Been struggling with the exact same problem. A quick & simple solution is to use the iframe based Facebook Like box.
<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=500&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
Note the assigned 'fb-like-box' class and all the removed inline styles. The class for the iframe could look something like this:
.fb-like-box {
width: 100% !important;
height:500px;
border:none;
overflow:hidden;
}
Looks like it doesn't matter what the height and width are that are defined in the iframe's src tag. Just place the iframe into some fluid element like a cell in a CSS grid layout.
(includes ideas from: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)
I used the HTML5 version of Facebook Like Box and here is what worked for me:
.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
width:100% !important;
}
You cannot set the like-box to anything other than a pixel width. My suggestion is to place it in a DIV or SPAN that is fluid with overflow set to hidden. Sure, it's going to crop off part of the like-box, but by having the requirement of fluid, this is your best bet.
Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
The comment above from Ed and Matthias about using 100% for the iframe worked great for me. Here is my iframe code
ORIGINAL WITHOUT FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;"
allowTransparency="true"></iframe>
UPDATED WITH 100% FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;width:100%"
allowTransparency="true"></iframe>
The only change is adding "width:100%" to the style attribute of the iframe
note that the code above has "XXXXXXXXXX" in place of the unique references