EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.
Related
I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes.
A similar concept to colored links.
I couldn't find this topic on Bootstrap's website.
I found a few working solutions referring to Bootstrap v4.
In my case:
<div class="divider py-1 bg-success"></div>
It works, but I guess it's not the best practice...
Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:
<hr class="bg-danger border-2 border-top border-danger">
Have a look at the Utility classes in their docs.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>
This should work
Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:
<hr class="mt-1 mb-1"/>
I'm trying to override the colors on my material input elements to always be white. This includes the outline of the input/select field, the placeholder, and the text itself even when the field is out of focus.
I did read through the official material overriding styles guide, but I found it a bit broad and was hoping for some more direction to do this.
This is my code:
<mat-card class="coverage-card">
<mat-card-content>
<form>
<mat-form-field appearance="outline" class="address-zip white-text">
<mat-label>Square Footage</mat-label>
<input type="number" matInput>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
css styles:
.coverage-card{
min-width: 400px;
max-width: 620px;
background-color: #FF6A13;
height: 575px;
border-radius: 20px;
}
.address-zip{
max-width: 190px;
margin-right: 10px;
}
.white-text{
color: white;
}
The out-of-box material color only applies when the field is focused on. I haven't been able to find the style that is being applied to the outline or placeholder when the field isn't in focus.
I tried overriding classes like .mat-form-field-appearance-outline in styles.scss with an !important, just to see if I could find the right class and haven't had any luck yet.
Not in Focus
Focused
Filled In
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
I am trying to align a ui-icon from a jquery theme to the right of a textbox element with no luck.
I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.
Shouldn't a span just render the html inline anyway, right where I put it on the page?
<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>
You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?
<head>
<style type="text/css">
.tdd{
width: 50px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
</table>
I have a that contains two nested div's. One of the nested div's contains a javascript graph.
When the page renders, the javascript graph is at an incorrect location, outside of the 's area. Does anyone know what I am doing wrong?
Here are the css:
#graph_container{
width: 75%;
margin: 0 auto;
background-color: #FFF;
padding: 20px 40px;
border: solid 1px black;
margin-top: 20px;
}
#graph{
width: 75%;
margin-top: 20px;
}
#car_select{
width: 25%;
margin: 0;
background-color: #FFF;
}
And Rails.ERB file
<div id="graph_container">
<div id="car_select">
# this part is at the correct location...
</div>
<div id = "graph">
# this is showing up outside of graph_container
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart('/AnyChart.swf');
chart.width = 500;
chart.height = 500;
chart.setXMLFile('car_info.xml');
chart.write();
//]]>
</script>
</div>
</div>
You can get the <div>s in the right place with 2 fixes:
Float them left and right respectively.
Add a clearing element below them so they stay inside the #graph_container.
You can see it in action here.
If that doesn't work, your Javascript may be setting the position on the graph it creates to absolute. In this case, add position: relative; to your #graph container. This will cause any absolutely positioned children (i.e. the graph) to use it, rather than the document, as its coordinate system.
Have you tried making the positioning absolute?
http://cssdesk.com/EUYhZ
Pat and Danny's suggestions were valid and important for the output. But neither fixed my problem, what turned out to be the issue was actually the Javascript code. I didn't set where the code was suppose to be inserted.
Simply placing within the element I wanted DID NOT work. In my case, what I needed to do was fill in chart.write() with chart.write('graph'), so that the script would insert itself in the part of the html.