I've got a complex form with rather a lot of css on the following page. Most things are lining up the way I would like, but if you scroll down to "Membership Type" you'll see that the label and radio button lists are not lined up nicely like everything else is. I thought at first that perhaps the required asterisk was pushing things down, but I removed it and that didn't seem to be the case. Ideas? THank you.
http://www.craftonhills.edu/Student_Resources/Student_Life/Clubs/Alpha_Gamma_Sigma/Membership_Application.aspx
change the css on line 829 on screen.css with below css
.scfForm ul {
list-style-image: none;
list-style-type: none;
margin-top: 0;
}
screen shot:
I think it is because the radio has default margins. I tried this in google chrome and it pushed the radio button up slightly
#form_767FC5570C444D6F977241A501F3C667_field_EB23079082B64C4F91BAD9F0444872DAscope_0 {
margin-bottom: 2px;
}
Related
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I am working on select-like control that is built with Bootstrap's dropdown component. You can look at it here. Selected options are marked with ok glyphicon.
I am facing rather strange problem. Steps to reproduce:
Open dropdown and select some options
Note that all text labels are aligned equally
Close and open dropdown again
Text in previously selected options is slightly shifted.
Tested in Chrome 54/55.
Any ideas? Thanks in advance.
This is due to inline-block property. Use display: flex property on li.selected. Like:
li.selected {
display: flex;
}
I've updated your Plunker code. Please have a look.
Hope this helps!
You can try this:
.open>.dropdown-menu {
padding: 5px;
}
li.selected {
padding-left: 0px;
}
Working fine for me.
Do you know how on facebook, when you get notifications, the globe goes white, then you click on it to see them because your so happy. The color stays white on the globe unless you click out OR click the globe. I have the exact same situation. But when I click on the globe. My icon stays white. UNLESS I click out anywhere then it loses that white color. I want to be able to click on the icon and then expect for the colour to go away.
scss:
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
margin-left: 20px;
& > li { height: 50px; }
.dropdown > a:focus { outline: 0px none; }
.dropdown-open {
background-color: $dropdown-bg;
& > a { color: $dropdown-link-color; }
.dropdown-menu { display: block; }
}
its pretty self explanitory, when icon is not clicked, then dropdown is in play, when it is clicked, dropdown dropdown-open is in play.
So for sure facebook use some JavaScript tricks with ReactJs it's pretty straight forward.
But, I think you can use a CSS3 trick with a hidden checkbox and a label. This trick looks to match perfectly your use case.
It's bad for accessibility, it's tricky and you should probably go for some JavaScript. But it's fun.
You can add a fixed overlay than also uncheck the hidden checkbox. Like this, when clicking outside the menu, the checkbox will be unchecked and your menu will go back to a normal state.
This is the only pure CSS implementation I can see.
But again, use JavaScript for this kind of behaviour.
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.