I am using AjaxControlToolkit's ComboBox control. The DropDown arrow appears quite far from the actual position where it should be. See this image:
How to fix this to make it appear like an ideal DropDownList?
If the image doesn't appear, click this link: http://postimage.org/image/99yqullkb/
**** Edited (CSS Code) ****
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
padding: 0px 0px 1px 0px;
border: solid 1px #7F9DB9;
border-right: 0px none;
font-size: 13px;
height: 18px;
width:200px;
}
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
padding: 0px 0px 10px 0px;
height: 21px;
width: 21px;
}
.WindowsStyle .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
Looks like a CSS styles side-effect. Check calculated styles for arrow button and it's container with some tool like FireBug or Developer Tools.
IAE try to apply the style rule below, maybe it fix the issue:
table.ajax__combobox_inputcontainer td
{
padding: 0 !important;
text-align: left !important;
}
table.ajax__combobox_inputcontainer td.ajax__combobox_buttoncontainer button
{
margin-left: 0 !important;
}
If you are using width property like width="20%" then this problem occurs. Avoid "%" in width property and try with exact width in pixels like width="200px".
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
My first background image for the form fields works, but the second one for the submit button is doing nothing, & the button is using the style of the fields.
My CSS is this:
form input {
background: url("images/text-field1.png") no-repeat scroll -5px 0 transparent;
font-size: 1em;
height: 17px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
width: 311px;
margin-bottom: 5px;
margin-left: 40px;
}
form input .button1 {
background: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent;
}
button1 is a class that only styles the button, but for some reason it is not styling it.
Try below code.
I have given button class name mybtn and applied background-image style.
HTML
<input type="submit" name="submit" class="mybtn"/>
CSS
input.mybtn {
background-image: url("http://subtlepatterns.com/patterns/symphony.png");
font-size: 12px;
padding: 10px;
}
JSFIDDLE DEMO
You need to add !important
otherwise, the base class, which uses !important on it's default EMPTY background-image property will override you.
you will need something like
background-image: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent !important;
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}
I want to make ajax Calander control in bigger size by overriding the style of default ajax Calender.
It should be work in larger view. I tried but its not working well when I tried to select month/year view..
Here I attached screenshot what exactly I want to do with ajax calender control.
Will it possible to make it larger view for iPad website?
OR Suggest me good calender control for Ipad website, I want to use asp.net website.
Thanks
abhishek
i have just been through this myself. there are a 3 things you need to do.
First - add a css class to your control. But beware if you do this it wipes the existing class of ajax__calendar and so most of its existing styling so add to the CalendarExtender
CssClass="ajax__calendar bigcal"
where bigcal is your new class.
Second - add your css for the styling using the bigcal class - e.g.
.bigcal .ajax__calendar_container { width: 220px; font-size:14px;}
.bigcal .ajax__calendar .ajax__calendar_container {border: 3px solid #646464;}
.bigcal .ajax__calendar_days, .bigcal .ajax__calendar_months, .bigcal .ajax__calendar_years, .bigcal .ajax__calendar_body
{width:220px;height:200px}
.bigcal .ajax__calendar_month, .bigcal .ajax__calendar_year{height:55px;padding-top:4px}
.bigcal .ajax__calendar_container table, .bigcal .ajax__calendar_container TD {font-size:14px}
.bigcal .ajax__calendar_days td div{padding:4px 5px 4px 4px}
Notice i have reset the size of it to 220 wide and 200 high - adjust accordingly
Third - you need to change the size of it in the javascript, cos it defaults to a set size for the scrolling etc to work. so
Add the following to the CalendarExtender
OnClientShown="setBigCal"
and then the following js function
function setBigCal(sender, e) {
sender._height = 200;
sender._width = 220;
}
HTH :)
EDIT - Sorry - just seen the date on this question so i assume you are already sorted. But I will leave the answer up incase anyone else gets the same issue.
i know my answer is late. i know you are asking about ajax calender. but it may help others. several programmers ask how to format asp.net calender. You can format asp.net calendar using following styles:
.calander {
background-color: whitesmoke;
border: 1px solid;
height: 305px;
width: 280px;
}
.calander table tr td {
padding: 10px;
}
.calander table tr td:hover {
background-color:rgb(200, 255, 0);
}
.ajax__calendar_today {
background-color: rgb(209, 233, 255) !important;
border-radius: 3px;
}
.ajax__calendar_footer {
background-color: rgb(209, 233, 255) !important;
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
position: relative !important;
height: auto !important;
}
.ajax__calendar_active {
background-color: rgb(200, 255, 0) !important;
border-radius: 3px;
}
.ajax__calendar_day {
height: 20px !important;
width: 20px !important;
padding: 0px;
text-align: center;
margin-top: -8px;
margin-left: -5px;
}
.ajax__calendar_body {
width: 270px !important;
height: 245px !important;
}
.ajax__calendar_container {
width: auto !important;
}
these styles can be customized any way you want.
I'm using the combobox control:
http://demos.telerik.com/aspnet-mvc/razor/ComboBox?theme=vista
And I want it to be not white, like it is now. Which css property can do this? Is it possible?
I want it to look like this:
You should be able to achieve that with a custom background color on the select element and some rounded corners on its container. Try placing the combobox in a containing DIV and give it these CSS styles:
.rounded {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px;
background: #333;
}
.rounded select {
width: 100%;
background: #333;
color: #fff;
border: 0;
outline: 0;
}
http://jsfiddle.net/mpHgR/1/
It might be a little off, but it's close to what you want.