I am trying to do some up and down arrows, which depend on stock price changes (https://jsfiddle.net/ec0x7pru/6/), they seem to be cut out due to the parent container css definition, what would be modified CSS for the triangle-up and triangle-down classes to prevent that.
.triangle-up {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid green;
bottom: 1em;
}
.triangle-down {
display: inline-block;
bottom: 1em;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid red;
}
On another note, using FF developer edition, these seem to be shaking slightly? any suggestion to fix that.
Remove padding-right:
https://jsfiddle.net/ec0x7pru/7/
And try to use this:
border-style: inset
This is a CSS-only alternative to my other answer:
.container span {
padding-right: 0.3125rem;
font-family: "NHaasGroteskDSPro-75Bd", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.125rem;
}
.triangle-up {
display: inline-block;
border-style: solid;
border-width: 0 7px 14px 7px;
border-color: transparent transparent green transparent;
bottom: 1em;
padding-right:0px !important;
}
.triangle-down {
display: inline-block;
bottom: 1em;
border-style: solid;
border-width: 14px 7px 0 7px;
border-color: red transparent transparent transparent;
padding-right: 0px !important;
}
Due to that padding, there was a plateau on the top. I've tweaked borders and overridden that.
https://jsfiddle.net/ec0x7pru/19/
Use a character instead:
<div class="container">
<span>DAX</span>
<span>3000</span>
<span id="up">▲</span><span>50.6</span>
<span>CAC 40</span>
<span>4536</span>
<span id="down">▼</span><span>-23.2</span>
</div>
https://jsfiddle.net/ec0x7pru/13/
Related
I'm trying to use CSS to stylize the options within the MultiSelect widget, for example to make a border around each of the individual options.
Is there any way to do this through Appmaker? Thank you
app-MultiSelect-Item is what you are looking for to customize the options.
For example:
.app-MultiSelect-Item {
font-size: 12px;
line-height: 12px;
padding-bottom: 8px;
padding-top: 8px;
border: 1px black solid ;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #FF9800;
}
The CSS is different for checked/unchecked options
The following example has rounded borders on the sides. Red for unselected and green for selected (with a green background)
.app-MultiSelect-Input {
font-size: 11px;
font-family: Verdana;
}
.app-MultiSelect-Item {
border-radius: 10px;
border-right: 2px red solid;
border-left: 2px red solid;
line-height: 8px;
margin-top: 3px;
}
.app-MultiSelect-Item.selected {
border-radius: 10px;
border-right: 2px green solid;
border-left: 2px green solid;
background-color: lightgreen;
line-height: 8px;
margin-top: 3px;
}
source: [https://developers-dot-devsite-v2-prod.appspot.com/appmaker/scripting/api/widgets#MultiSelect][1]
I have a selector created as a component:
<my-selector
...
</my-selector>
and this is its css file:
my-selector{
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px;
}
.select-container {
position:relative;
display: inline;
margin-right: 10px;
}
.select-container:after {
content:"";
position:absolute;
pointer-events: none;
}
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .5em;
right: .75em;
border-top: 5px solid black;
}
select::-ms-expand {
display: none;
}
}
The problem I've is the distance between the words and the left margin. I've tried margin-left, padding and others in order to remove it or make it smaller but without success.
Any suggestions?
You added the padding via the css for the selector:
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}
you need to remove the first incidence of padding, then set padding to something like:
padding: 3px 26px 3px 5px; /* top right bottom left */
I am trying to make the active list item look like this:
This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):
Here is my HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law<span class="activePointer"></span></li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is my CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 0px 5px 10px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 11px solid transparent;
border-bottom: 11px solid white;
}
jsFiddle
How do I fix this?
ETA I tried #jlbruno's idea (decreasing the size of the left border), but when I do that the lines of the triangle are not sharp:
ETA Using transform:rotate fixed the edges (thank you #jlbruno!)...but not for IE8. I tried using the microsoft matrix transform filter (related SO question) but it didn't help. How do I get this to work in IE8 also?
Here is the CSS I tried for IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9999996192282494, M12=-0.0008726645152362283, M21=0.0008726645152362283, M22=0.9999996192282494, SizingMethod='auto expand')";
Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 7px solid transparent;
border-bottom: 11px solid white;
-webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}
Since CSS is not giving you the desired result, you may have to do a right-aligned background image for this one.
HTML
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
CSS
.guideList .active{
background: url('images/right-arrow.png') #0390d1 center right no-repeat;
color: white;
}
you can use this html And Css for this :
Css:
.Rectangular{
width: 100px;
height: 30px;
text-align: left;
position: relative;
background-color: #0390D1;
color: #fff;
padding-left: 10px;
font: 12px/30px tahoma;
margin-right: 100px;}
.Rectangular>span{
display: inline-block;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0390D1;
border-left: 30px solid #0390D1;
border-right: 30px solid rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px;
position: absolute;
right: -29px;
top: 0;
}
HTML :
<div class="Rectangular">Law <span></span></div>
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.
I have this html:
<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>
With this CSS:
.segmentHeader {
font-size: 1.15em;
font-weight: bold;
border-bottom: #7792ad solid 1px;
margin-bottom: 5px;
}
.feedBarSegment {
width: 250px;
margin: 52px 20px 20px 25px;
}
#tagsCloud {
margin-top: 10px;
}
.tag {
display: inline-block;
background: #e9e3c4;
padding: 2px 4px;
border-top: 1px black solid;
border-right: 1px black solid;
}
.subject {
display: inline-block;
background: #f2b2a8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 2px 3px 2px 3px;
border: black solid 1px;
margin: 2px;
}
I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?
If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.
I believe what you're looking for is:
#tagsCloud {
text-align:justify;
}
http://www.w3schools.com/cssref/pr_text_text-align.asp
It seems like what you want is text-align: justify.