I created an autosuggest usting react-autosuggest, now I'm trying do design the layout. I took a css from an example which seems to work fine.
when I copied this css to my project the suggestion list completely detached from the input of the autosuggest as shown in the image below:
I also tried to move the div in the example but the list follows the input (as it should)
here is the css from codepen which I tried to use:
.react-autosuggest__container {
position: relative;
}
.react-autosuggest__input {
width: 240px;
height: 30px;
padding: 10px 20px;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 4px;
}
.react-autosuggest__input:focus {
outline: none;
}
.react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
width: 280px;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #aaa;
background-color: #fff;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
}
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}
I think this css only works for the sandbox as used in the example. Especially
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
This means that the suggestions container is always shown 51px from the top of your page. Due to other things on your page the input is probably in the way and pushed aside, since it doesn't has the position: absolute attribute.
I don't know if you're using something like a grid system or another way to manage positions of elements on your website? You might consider using that instead of defining position with pxs.
try to add this
.react-autosuggest__suggestions-container--open {
display: block;
position: absolute;
top: 51px;
width: 100%;
border: 1px solid #aaa;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
max-height: 300px;
overflow-y: auto;
}
Related
input#submit {
position: relative;
background: transparent;
bordeR: none;
font-family: raleway;
text-transform: uppercase;
border: 1px solid #1ba39c;
margin-left: auto;
font-size: 13px;
display: block;
color: #1ba39c;
letter-spacing: 1px;
top: -5px;
left: -1px;
padding: 7px;
padding-top: 8px;
}
As you can see on chrome mobile the text inside of input with the value post comment gets moved upwards whereas on chrome desktop it perfectly centered. What must be the issue?
I'm not 100% clear what you're asking, but see if the following CSS change achieves what you are looking for:
textarea#comment {
background: transparent;
height: 28px;
}
I think this is # line 1663 of http://tenfizz.com/wp-content/themes/tenfizz/style.css
Good luck!
I tried to change the layerswitcher color. But its not changed. Here is my code.
I tried in javascript also osMap.addControl(new OpenLayers.Control.LayerSwitcher({ 'activeColor': "white", 'fontColor': "black" })); but there is no effect.
.olControlLayerSwitcher
{
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: white;
background-color: transparent;
z-index: 10000;
}
.olControlLayerSwitcher .layersDiv
{
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: #CCCCCC;
}
The OL CSS is set within a style attribute and is stronger than your override.
You must use !important to override it:
background-color: #CCCCCC !important;
See CSS specificity.
This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 years ago.
I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #3E78B2;
}
Here is link to jsFiddle
You could see currently it has some white border. I would like to add another border on top of white border.
Please let me know if you have any ideas/suggestions.
Hi u can make this also :
.container {
background-color: grey;
height: 200px;
padding:10px; // ADD THIS ALSO
}
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #fff;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #3E78B2;
box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}
the advantage is that you can also put a blur effect, changing like this:
box-shadow: 0 0 3px 3px #002525;
If I understand you correctly, I think you're looking to do something along these lines: http://jsfiddle.net/QCVjr/1/
.circle {
width: 20px;
height: 20px;
border-radius: 12px;
border: 1.5px solid #000;
font-family: Cambria;
font-size: 11px;
color: white;
line-height: 20px;
text-align: center;
background: #fff;
position: relative;
z-index: 1;
}
.circle:before {
position: absolute;
right: 2px;
top: 2px;
left: 2px;
bottom: 2px;
content: '';
background: #3E78B2;
border-radius: 25px;
z-index: -1;
}
.circle:hover {
width: 27px;
height: 27px;
border-radius: 18px;
font-size: 12px;
color: white;
line-height: 27px;
text-align: center;
background: #fff;
}
You'll notice that I took your original background color and added it to the :before pseudo-element, moved the #fff to the background, and made your other border color (in this example, #000) the border color of the original element. Both z-indexes are required to get the right layering.
I am trying to customize a survey we created through Fluidsurvey. The CSS section has the ff code for all pages, which shows the progress bar at the top right portion of the page. However we would like to move it at the bottom of each page:
html, body {
background-color: #fff;
margin:10px 0 0 0;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
}
#survey .survey-progress-outer {
display: block;
border: 1px solid #999;
width: 150px;
height: 15px !important;
background-color: #fff;
font-size: 75%;
margin-top: 6px;
margin-right: 15px;
overflow: hidden;
line-height: 18px;
color: #000;
}
#survey .header-progress-container{
position: relative;
}
#survey .survey-progress-inner {
background-color: #ABDCED;
}
#survey, #890 {
width: 800px;
margin: 0 auto;
}
#footer {
text-align: right;
}
#survey {
border: 1px solid #333333;
}
#survey .header-progress-container {
background-color: #3B5998;
color: #fff;
padding: 5px;
}
#survey-form {
padding: 20px;
}
#survey .question-body {
padding: 5px;
background-color: #EDEFF4;
margin: 5px 0;
}
#survey .buttons input {
background-color: #5B74A8;
border: 1px solid #333;
color: #fff;
padding: 2px 5px;
font-weight: bold;
}
I tried inserting the following in the .survey-progress-outer section:
position: relative;
bottom: 0%;
right: 0%;
but did not produce the desired effect. Kindly help. Thanks.
To achieve re-locating the progress bar to another location in the survey, a custom javascript must be used (possible through a FluidSurveys JavaScript advanced question, or by pasting script html into a question description or something).
You'll want to remove the existing progress bar element and move it to the bottom of the #survey element, but retaining the same structure for CSS purposes means having to create a second .survey-header element to contain your relocated progress bar. This is to ensure existing CSS and JavaScript can still find the progress bar.
var p = $('.survey-progress-outer').detach();
$('<div class="survey-header"/>').append(p).appendTo('#survey');
This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working.
If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What?
<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
float: left;
position: relative;
border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border: none;
padding: 0 12px;
margin: 0 3px 3px 0;
outline: none;
cursor: pointer;
color: white;
font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-collapse: separate;
height: 26px;
line-height: 26px;
background: #5191cd;
}
.flat-button:hover {
background: #1c3f95;
}
.flat-button:after {
position: absolute;
content: ' ';
height: 0;
width: 0;
left: 100%;
border: 13px solid transparent;
border-left-color: #5191cd;
}
.flat-button:hover:after {
border-left-color: #1c3f95;
}
</style>
After playing around for a while, I found a simple fix for IE9.
http://jsfiddle.net/thirtydot/BWC9q/10/
All you have to is add overflow: visible to .flat-button.