If I try setting the height of the x-axis label, then the line chart( displayed using Flot) is getting hidden.
Why is this happening and what's the solution?
#placeholder .flot-text .xAxis .tickLabel{
color: #74878B;
display: inline-block;
font-size: 14px;
padding-right: 20px;
padding-top: 5px;
position: absolute !important;
text-align: center !important;
z-index: 0;
top:55px !important
}
Related
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I changed the check box style in gwt, but the text is not appearing in the middle (Vertically). It appears on the top.
I tried to add padding, but that didn't help. Adding padding to the left works fine, but padding to the top doesn't work.
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
padding-top: 5px;
margin-right: 5px;
font-size: 12px;
}
input[type=checkbox] {
display: none;
padding-top: 5px;
}
label:before {
background-image: url(images/csscheckbox.png);
content: "";
display: inline-block;
width: 22px;
height: 22px;
margin-right: 10px;
position: absolute;
left: 0;
/*border-radius:5px 5px 0px 0px;*/
}
.gwt-CheckBox {
padding-top: 5px;
}
.gwt-CheckBox label:before {
padding-top: 5px;
}
input[type=checkbox]:checked+label:before {
background-position: 0 -22px;
background-image color: aqua;
font-size: 12px;
text-align: center;
line-height: 13px;
}
.agreement {
margin-left: 5px;
}
What could be the problem?
Actually your CSS should target the CheckBox Label instead of the the Checkbox. So try something like this
input[type="checkbox"] + label{ padding-top : 5px ;
vertical-align: top; }
This is a known behavior. Add the vertical-align sub or middle to the label (this depends on the label font-size)
label
{
vertical-align : middle;
}
Another solution to not depend on the css and font size will be to seperate the checkBox and label in a table row (again some css to to keep it together :( but it will be one time and fool-proof) .
EDITS :
HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
CheckBox box = new CheckBox();
InlineLabel inlineLabel = new InlineLabel("Option1");
horizontalPanel.add(box);
horizontalPanel.add(inlineLabel);
RootPanel.get().add(horizontalPanel);
Output :
Normal Font Size
label {
position: static;
align-self: center;
}
I created an HTML 5 form where my legends all have background colors. My aim, which is accomplished in FireFox, Google Chrome, IE 9>, is to have text then background color extend the width of the page. The problem however is that in IE8 and lower versions it only extends to the end of the words. This is what I have so far CSS wise for my regular page:
.FormArea legend
{
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
display: block;
color: white;
background-color: #A70C1E;
width: 95%;
padding-left: 7px;
}
May I have some insight on how to make the necessary adjustments for IE8
I just used a padding:
.FormArea legend
{
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
color: white;
background-color: #A70C1E;
width: 80px !Important;
padding-right: 650px !important;
display: block;
}
.FormArea legend span
{
width:100%;
}
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.