I have a Kendo Grid displaying fees, and above that I have an AutoComplete to allow the ability to search based on user. The problem with this is that the AutoComplete is covering part of the grid. Here is what it looks like:
This is the css:
#searchPanel {
margin-bottom: 10px;
display: inline-block;
float: right;
}
#searchPanel .editor-field {
float: right;
margin: 0 0.5em 0 0;
padding-bottom: 15px;
}
#searchPanel .editor-label {
float: left;
padding-right: 7px;
}
I have tried using position and z-index to get rid of the white box but it still is showing up over the grid. It seems to be an issue with just the autocomplete box and not the label. The autocomplete box has class .editor-field and the label has class .editor-label, and they are both wrapped in the searchPanel div.
Related
This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 1 year ago.
This is now the second project I have worked on where I am unable to get the image that is hidden on load to display: block on :active. I have also tried to used visibility with no luck. I prefer the display so the height is not left empty.
a {
text-decoration: none;
}
.button-container {
margin-left: auto;
margin-right: auto;
max-width: 200px;
}
.img {
display: none;
}
.buy-button {
background-color: #087900;
border-radius: 25px;
color: #ffffff;
text-align: center;
}
h2 {
padding: 12px 40px;
font-size: 18px;
font-family: Open Sans;
font-weight: normal;
}
.img:active {
display: block;
}
.buy-button:active {
height: 10px;
margin-top: 50px;
margin-left: 0;
margin-right: auto;
width: auto;
}
h2:active {
display: none;
}
<div class="img"><img src="https://sf-static.sixflags.com/wp-content/uploads/icon-coaster-car-person.png"></div>
<div class="button-container">
<div class="buy-button">
<h2>Buy Now</h2>
</div>
</div>
i don't think it is possible to do that.
because a element become active when you click on it, but in this case at first place you set the image's display to none
.img {
display: none;
}
so there is no image on the page that user can click on it and the image's display become block.
you can put the image inside a div and make the image hidden and put border around div so user can see the div and when click inside the div, image become visible.
or yo can put button and use JS for hide and show the image
I have a text area in my contact form, nothing too special:
<textarea class="txb_message" id="txb_message" name="txb_message" placeholder="What would you like to talk about?"></textarea>
But the text doesn't align in the text area as it does in the text boxes above it, and I'm not sure why.
Thanks!
Add padding-top
.txb_message {
padding-top: 10px;
}
you need to add 15px of padding to the textarea like so :
.txb_message {
height: 68px;
width: 300px;
float: left;
margin-top: 10px;
padding: 15px 0 0 0;
}
I would just add padding to the top of the textarea.
.txb_message {
padding: 10px 0 0 0; /* whatever you need */
}
Possibly to the sides also since you are using text-indent and then remove that for the textarea. Your final CSS might look like this:
.txb_message {
padding: 10px;
text-indent: 0;
}
Try filling out your textarea with a bunch of text.
I am not sure what i can do to fix it but I am unable to use css to align the images in 1 row and then another row like a gallery. Can anyone help. I have tried to float the div entry to left and still unable to get it correct.
here is the css for entry
.entry {
clear: both;
margin: 0;
padding-top: 1px;
}
Add
display:inline-block
to your div class .wp caption
See this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ as there may be some issues with Cross Browser but i think its only IE6, maybe 7
so in your case
.wp-caption {
border: 1px solid #a87c31;
text-align: center;
background-color: #10050B;
padding-top: 4px;
margin: 10px;
display: inline-block;
}
What seemed like an easy task has become hours of puzzling by now.
I have a dropdownlist (#html.dropdownlistfor(model)), which I style via css ( new { #class = "searchDropDownList" } )
The thing is, the standard dropdown list is too short (height-wise), but when I add height to make the box bigger, the selected item is not centered anymore. vertical-align: middle doesnt work on the selected item.
When I add padding to the top of the box, the text goes down as I want, but when you would then hover the textbox, you can see the Selection Arrow being croocked, since that ones also goes down.
See pictures:
Firefox:
Chrome:
Does anyone know how to lower only the text?
EDIT:
Current css:
.searchDropDownList {
display: inline;
width: 114px;
height: 26px;
float: left;
font-size: 14px;
margin: 4px auto auto 2px;
text-align: left;
vertical-align: middle;
padding-left: 2px;
padding-top: auto;
line-height: 10px;
}
Changing the padding-top: auto; to 3px results in the images posted above.
this is a CSS / design question. I have three textboxes that i want to be center aligned on a web page. Then i want a label description to the right of each one.
When i use attribute like text:align:centre because the labels are of different length it throws out the aligment of the textboxes [see image link below]
http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk
Is there an easy way of keeping the textboxes aligned and then have the labels off the to the right without changing the textboxes?
Thanks.
basically you have to define a width for your form and float: left input and float: right the label, so the label gets next to your input. The is a trick to center relative possitionet elements in CSS: margin: 0 auto but you have to define a width.
The problem you gonna have is that all your inputs are gonna be next to each other. In order to prevent that you nest your label and input in a element. And clear the floats. I would use a UL LI element and not Paragraphs (like in PW example), because most of the time, your form, is a list of questions.
I have made up an example for you:
http://jsfiddle.net/Qs4pk/2/
use the <fieldset> tag in combination with <label>. Step by step explanation.
Then align at will.
In your screenshot, you have text-align:centred each element inside a div. So you are seeing the correct behaviour for your current approach.
Instead you need to centre a div (the encompassing box of your textbox and label elements) and then left-align (which will be the browser default) the internal elements.
To centre a div use:
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
http://reisio.com/temp/form2.html
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
padding: 0;
}
form {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
font: 12px sans-serif;
display: block !important;
display: inline-block;
overflow: hidden;
}
li {
float: left;
clear: left;
}
label {
display: block;
width: 200px;
height: 19px;
line-height: 19px;
position: relative;
margin: 0 0 5px;
cursor: pointer;
text-align: right;
}
input {
width: 120px;
position: absolute;
left: 0;
top: 0;
border: 1px solid gray;
padding: 1px 0;
height: 15px;
font: 12px sans-serif;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>
<label><input> Beans</label>
</li>
<li>
<label><input> Cornbread</label>
</li>
</ul>
</form>
</body>
</html>
You question have also a design aspect. What is the best alignment of labels and input textboxes from the users point of view? I was very surprised some months ago as I found "Web Form Design" at MIX09 (see http://videos.visitmix.com/MIX09/C17F). You will see on examples how to improve user experience if one place labels and input textboxes in other places. This video just changed my mind in this area. You can also look at http://www.lukew.com/presos/ and "Best Practices for Hints and Validation in Web Forms" http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/ which some has close information.