I'm using reCAPTCHA, and the textarea for recaptcha_challenge_field is appearing in the middle of the recaptcha box overlapping other things. I found that it's because of this style:
.recaptchatable #recaptcha_response_field {
position: absolute!important;
when I set position to static in Chrome, it looks fine. However, I can't figure out how to overwrite that CSS option.
I tried:
adding this to my own CSS:
.recaptchatable #recaptcha_response_field {
position: static !important;
}
adding another entry in my CSS with the name .recaptcha_text
calling it via div class (wrapping around textarea)
calling it via p class (wrapping around textarea)
adding position: static!important; to the standard <textarea name="recaptcha_challenge_field" ...> tag
However, I can't get my css to overwrite that position: static!important; that comes over with the script:
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
Can someone please help with what I'm doing wrong? Thank you!
From testing here: http://jsbin.com/otihuk/edit#html,live (the test only seems to work in WebKit browsers)
This looks like a simple CSS specificity issue. The reCAPTCHA CSS is loaded after yours, and both your selector and theirs have equal specificity (and both have !important in the declaration), and so because theirs is specified last, it wins.
You can fix it by making your selector more specific than theirs:
#recaptcha_area #recaptcha_response_field {
position: static !important;
}
I've added that in my demo above, and I can see by inspecting the #recaptcha_response_field element that the computed value of the position property is now indeed static.
Related
I'm using selectOneMenu JSF 2 and trying to change the width of it is not working.
`<h:selectOneMenu style="width:280px" styleClass="selectpicker"`>
<f:selectItem itemValue="1" itemLabel="A" />
<f:selectItem itemValue="2" itemLabel="B" />
<f:selectItem itemValue="3" itemLabel="C " />
</h:selectOneMenu>`
Only works when I remove the styleClass = "selectpicker"
I've already tried adding the data-width, it also did not work. Any tips?
The selectpicker should be having its own css properties set which is stopping the width style from being applied. Can you paste the properties set inside the selectpicker.
Find a css class of h:selectOneMenu component in inspect element and override it in your custom css file.
Eg.
.selectOneMenuClassName{
width:280px !important;
}
Just find a right class name.
It's not clear what is inside selectpicker css class. To make it work, first selectpicker should be the css class and second there should be no css error inside it. But if you want to change the width for all the selectonemenu on your page, this may be helpful if anybody still needed !
.ui-selectonemenu{
width: 280px !important;
}
.ui-selectonemenu-label{
width: 280px !important;
}
.ui-selectonemenu-panel {
width:280px !important;
}
I don't know why, but for some or odd reason the specific style for a p tag inside does not style when using a custom style sheet css, but works perfectly fine when doing inline.
Obviously I'm trying to avoid using inline, because it's not the best practice.Using Bootstrap
<h1 class="page-header">Properties</h1>
<div class="col-lg-4 main_content">
<img class="img-responsive" src="images/home_image2.jpg" />
<p>CHATHAM<br />
London, Uk
</p>
</div>
The html.
The CSS:
.main_content p {
font-size:24px;
background:#262626;}
Both the font size as well as the background color doesn't seem to work
I have tried targeting it as a ID, but to no avail.
use this
.main_content p {
font-size:24px !important;
background:#262626 !important;}
Try using
.main_content p {
font-size:24px !important;
background:#262626 !important;
}
Working fiddle
http://jsfiddle.net/52VtD/9080/
But it works without !important, i dont think !important is not godd to use, please check you other css maybe you are overriding some more classes, if you can please make a working fiddle or send us a link
Or write with upper class.
.page-header .col-lg-4.main_content p {
font-size:24px;
background:#262626;
}
Okay.
The solution I came up with was to change the name of the class affecting the div.
Even though did a search to check if I might have been using it somewhere else, and nothing came up, this solution worked out perfectly fine.
This is the name change I used.
.main_content_home p {
font-size:20px;
background:#262626;
color:#FFF;
padding: 12px;
}
I'm trying to port code over from using inline css to using a stylesheet and as I'm pretty much a total css noob I'm having trouble.
Most of the things I've moved over to external have worked fine, but I can't seem to get TD elements to use styles defined in the stylesheet. Here's an example:
<td class="text_right">...</td>
.text_right {
text-align: right;
}
Why doesn't that work?
That should work, however bear in mind that your <td> element should have some dimensions, otherwise it will be as wide as the content.
Check this for a demo
<td class="text_right"><a>...</a></td>
.text_right {
text-align: right;
width: 300px;
}
that should work , put you text in <a> tags
Try using !important . Like this ;
.text_right {
text-align: right !important;
}
if you still see it not aligned please check css for that element overridden rules (with chrome or opera) by right click and investigate
I want to change the scrollbar color in Firefox. How can I do that?
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
Here's how it works:
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
This is where a vast majority of the magic happens:
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding:0;
}
#container {
height:100%;
width:100%;
margin: 0;
padding:0;
overflow: auto;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
The html is then very simple.
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
If you've done everything right, your page should look like my example.
Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #969696;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
background: #2B2B2B;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #1A1A1A;
}
The only thing missing is for firefox to support this feature.
Since version 64 Firefox allows limited styling of scrollbars:
.my-scrollable {
scrollbar-color: red blue;
scrollbar-width: thin;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
It is not possible directly via CSS.
But if you can use jQuery, jscrollpane may help you.
you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.
EDIT: with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.
Well, I have heard someone saying "It's Impossible"...
But I don't believe in the impossible.
In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:
<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>
The Css will be:
.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}
.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}
Here are the final results:
(Note: The first image is the default scrollbar color).
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars
are shown in the window. This attribute is "replaceable"
in JavaScript. Read only
Firefox also has the following vendor specific properties:
overflow: -moz-scrollbars-none
other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.
for Firefox or cross browser you can use :
jQuery custom content scroller
more simple and easy to use
here sample i implement in magento and tested on firefox, opera, chrome and safari : http://i.stack.imgur.com/wnRCL.png
In Firefox V103 coloring scrollbar works with:
html, body{scrollbar-color: #f33942 #000;}
I am trying to use dijit.InlineEditBox.
I have put the following code in my HTML, using the example in the dojo docs:
<script type="text/javascript">
dojo.require("dijit.InlineEditBox");
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
function editableHeaderOnChange(id, arg){
alert("details changed with id " + id + " and arguments "+arg);
}
</script>
...
<span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])"
autoSave="true" title="My Text">click to edit me</span>
I am using tundra theme.
It works, however it doesn't look so good. The widget has its own style, which doesn't fit my CSS.
I used firebug to locate the source of the problem. The widget creates many nested div/span elements, each has it's own style (element style in firebug):
<span
id="dijit__InlineEditor_0"
class="dijitReset dijitInline"
style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...>
<input type="text" autocomplete="off"
class="dijit dijitReset dijitLeft dijitTextBox"
id="dijit_form_TextBox_0"
style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;">
...>
</span></span>
(showing only the relevant parts...)
to get the visual that I want, which will not break to a newline,
I need to change the width of dijit_form_TextBox_0** to 50%, and the positioning of dijit__InlineEditor_0 to
display: inline**;
or to change the positioning of everything (most of my layout is floated, so position: absolute doesn't fit)
I cannot address those span elements in my css to change the properties, because the element.style has priority, of course.
I don't understand the logic in this system...
why is dijit generating the style directly inside the element?
how can I change these properties?
Thanks
Tom
This will give you everything you need to create your own theme, just like Tundra.
http://docs.dojocampus.org/dijit-themes
Added:
Dijit will try to use your inline styles like width and height to determine the proper settings for its own internal elements. So you can write
<span style="width:200px" id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span>
and see if it works. Not sure about stuff like fonts and line-heights, that sounds like it should be up to the theme. Maybe it copies those into inline styles, for whatever reason. Just try changing it and see what happens.
I'm not an expert on the logic of things either. I've dabbles a couple of times with it with some success. All I can tell you is it's not impossible. Sorry for the poor help.