I've recently installed Devise, and I've got the sign-in form working as it should, displaying errors etc...
However, the sign-up form is acting very strange i.e when displaying errors they appear on the left side out of proportion with the rest of the app. Here is a screen shot to illustrate: http://i.imgur.com/1r4hQMM.png note: this only happens when there are errors, it is centered otherwise.
Now i've tried editing the field_with_errors CSS with the following:
.field_with_errors {
display: block;
clear: both;
text-align: center; }
And still, it remains on the left hand side. I have noticed that float: right; seems to move it to the right, but how can I get it in the center with the rest of the form?
field_with_errors seems pretty darn stubborn in CSS.
If you want to center text then text-align: center will work, but in this case you wish to center an entire element and should therefore use margin: auto auto instead.
Enjoy!
you can also use flexbox
.my class {
display: flex;
align-items: center;
justify-content: center;
Related
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.
Well this is a very strange issue, for whatever reason slider handle is outside it's parent element by half it's height or width, why did they made it that way?...
Anyways, you can see in this fiddle: http://jsfiddle.net/PGLkW/2/ that handle goes way outside it's container, and if i would try to remove margin like so:
.ui-slider .ui-slider-handle{
width:100%;
margin-left:0px;
left:0px;
margin-bottom:0px;
}
Things get's even worse, and from what i can see i would actually need to edit widget itself for such a stupid thing, or am i not seeing something?
So just to clarify my question, i want handle to stay within it's container, and when i click on any place to start dragging as you can see mouse doesn't go exactly to the middle of handle, so it looks really bad.
It looks it doesn't read the css properly, or because there are a lot of solutions they left it for the developers to play with it, and you have to do it until you get the result you want, here there is a solution using margin-bottom in negative:
//CSS
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0; }
.ui-slider .ui-slider-handle{
width: 58px;
height: 50px;
margin-bottom: -25px;
}
//HTML
<div class="slider" style="margin:50px; height:400px; width:50px;"></div>
The fiddle http://jsfiddle.net/RFVZ2/ . I hope this works for you.
The solution is described in this bug report ("this is as designed"): http://bugs.jqueryui.com/ticket/4308
For horizontal slider I used:
.ui-slider-handle
{
height: 24px !important;
margin-bottom: -6px !important;
}
I would like to move position a bit to the left of my jQuery UI suggestion list. Here function and everything work very fine
Unfortunately I have no idea how to move that list a bit to left align left about 10px the page is responsive that is why scared that how to move left.
I think this is the documentation: http://docs.jquery.com/Plugins/Autocomplete/autocomplete.
You can set the style in this class
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active
{
margin-left: -10px !important;
}
Try adding this in your CSS and not in the jQuery-ui CSS file
you can add margin-left: -11px; in to the list DIV
Is there anyway to get pointed back button like we have in iphone. Currently I am getting round button.
Also, any one has idea abt navigation bar in jQuery mobile. Whenever we are changing screen using navigation bar css is not getting applied.
Back Button:
You can try this:
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
But it will use a background picture instead of pure CSS backgrounds.
If you want to do it pure CSS, this will be tricky.
Start from here. I assign this to an empty div, which gives me a CSS only triangle, which I'm using for popup windows. You would have to find a way to turn this by 90 degrees, match border color to button background gradient and fiddle it into any of the JQM button styles.
Nice challenge :-)
.popover_triangle {
background: none repeat scroll 0 0 red;
border-color: transparent transparent black;
border-style: solid;
border-width: 16px;
font-size: 0;
line-height: 0;
width: 0;
}
If you manage to get it done, please post. There are a lot of people looking for it.
On my site hiphopcanvass.com I added the blogroll in the footer. I want the height to be a certain size, right now its on auto. If the content of the blogroll gets to that height then it will display on the other side until its fully across. What i want can be seen in the image below.
I do something like this in the footer of my site to display my categories (although I'm only displaying them in two short columns).
To do this, I'm using the following CSS to manipulate the list elements:
#footer ul li.footercolumn{float: left; display: block; width: 210px; margin-right: 20px;}
#footer ul li.footercolumn ul li { float: left; width: 50%; margin-bottom:10px; }
(This will have to be customized to fit your application of course).
There are several ways to create multiple columns using CSS, I'd recommend checking out CSS Wizardry's and A List Apart's articles on this subject.
You need to float the <li> left and change the height of the footerwidget from auto to 50px