Textbox and button not aligned properly
Hi everyone, I'm facing problem here that my textbox and the button couldn't align properly. I tried to adjust the margin including margin top and margin bottom, they still stay exactly the same location. I am clueless on what's wrong here. Can you please help me?
Asp.Net:
<asp:Panel HorizontalAlign="center" runat="server">
<asp:TextBox ID="SearchTextBox" runat="server" placeholder=" Search your item here." CssClass="textbox"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" OnClick="SearchOnClick" CssClass="button-add" />
</asp:Panel>
Css:
.textbox {
border: 1px solid #848484;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 25px;
outline: none;
margin-bottom:10px;
height: 25px;
width: 350px;
background-color: #ede6e6;
}
.button-add {
background-image: url(../Images/button_searchSmall.gif);
background-size: auto;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
margin-top:20px;
color: transparent;
background-color: transparent;
outline: 1px;
border: none;
}
Add display: inline-block; vertical-align: middle; in .button-add and .textbox see here
Instead of using margin-bottom in the textbox class, you can use margin-bottom in the button-add class. That way x amount of margin will be left under button-add and then your textbox can come. Dont put any margin command in the textbox class.
Hope this helps!
Related
I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.
Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.
you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.
The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}
Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}
I have a asp:Button, I used css styles with cssClass property in asp:Button, but those styles are not working.
This is my asp button:
<tr>
<td>
<div class="form_row">
<asp:Button ID="ButtonSend" CssClass="BtnSend" runat="server" Text="Send" OnClick="ButtonSend_Click" />
</div>
</td>
</tr>
This is my CSS:
.BtnSend {
width: 53px;
height: 24px;
display: block;
float: right;
margin: 0 0 0 10px;
background: url(../../Images/contact_bt.gif) no-repeat center;
text-decoration: none;
text-align: center;
line-height: 24px;
color: #fff;
}
If I'm not wrong, I should use something like this:
input[type="submit"]
{
//css coding
}
but I don't know where to put it and how to affect only this button.
Based on your comment, add/change this in your css:
.BtnSend {
border: none;
background: transparent url(../../Images/contact_bt.gif) no-repeat center;
}
All of the objects on the screen are centered with the exception of the CrystalReportViewer.
Does the CrystalReportViewer not work with CSS?
Here's my CSS class that I'm using for this part of the page:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
The report is all the way to the left of the screen, I just want to center it.
Again, all other controls are centered on the screen.
The report is also embedded on a paragraph tag.
Here's the actual control:
<form runat="server" class="reportForm">
<p>
<CR:CrystalReportViewer ID="crvSchedules" runat="server" AutoDataBind="True" DisplayStatusbar="False" EnableDatabaseLogonPrompt="False" EnableDrillDown="False" EnableParameterPrompt="False" EnableTheming="False" EnableToolTips="False" HasCrystalLogo="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasGotoPageButton="False" HasPageNavigationButtons="False" HasSearchButton="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasZoomFactorList="False" Height="1153px" ToolPanelView="None" Width="868px" GroupTreeImagesFolderUrl="" ToolbarImagesFolderUrl="" ToolPanelWidth="200px" HasExportButton="False" HasPrintButton="False" />
</p>
</form>
This is the ENTIRE CSS file:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 0.8em;
font-weight: 600;
padding: 6px;
margin-right: 8px;
width: auto;
}
I couldn't figure out what the issue was with this so I just put the report in a table and centered it.
In my Windows application I would like to put an X at the right edge of a text box to clear it. Similar to what Google is using right now. Check out Google and do a search for anything. You'll see the X in the text box as soon as you've started typing something.
I know I can get away with just putting a button next to the text box. But I would like to do something a bit nicer.
Who says that google put an X in right end of text box....??
Thats not inside the google search text box. its outside of that textbox. and thats the onlyway you can do it. google use a table in which one td contains textbox while other contains 'X'. They've put some css which makes you feel like the X is inside textbox. Whixh is really not.
here is the html of google's search textbox:
<table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="gsib_a"><div style="position: relative; width: 100%; height: 25px;"><input type="text" maxlength="2048" name="q" id="lst-ib" class="gsfi" autocomplete="off" size="41" title="Search" value="mysql_num_rows" style="border: medium none; padding: 0pt 0pt 0pt 2px; margin: 0pt; width: 100%; outline: medium none; top: 1px; background: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D") repeat scroll 0% 0% transparent; overflow: hidden; position: absolute; z-index: 5; color: transparent;" spellcheck="false" dir="ltr"><div class="gsfi" style="top: 1px; padding: 0pt; white-space: nowrap; position: absolute; width: 100%; color: silver; z-index: 0; text-align: left; left: 3px;" id="gs_tad0" dir="ltr"></div><div class="gsfi" style="position: absolute; top: 1px; background: none repeat scroll 0% 0% transparent; color: rgb(0, 0, 0); padding: 0pt; white-space: nowrap; z-index: 2; left: 3px;" dir="ltr">aol</div><div style="position: absolute; top: 1px; width: 1px; height: 20px; background-color: rgb(0, 0, 0); padding: 0pt; z-index: 4; left: 14px; visibility: hidden;"></div><div class="gsfi" style="position: absolute; top: 1px; background: none repeat scroll 0% 0% rgb(255, 255, 255); color: rgb(255, 255, 255); padding: 0pt; white-space: nowrap; z-index: 1;"></div></div></td><td><table cellspacing="0" cellpadding="0" style="width: 100%;" dir="ltr"><tbody><tr><td class="gsib_e"><div></div></td><td class="gsib_b" style="color: rgb(161, 185, 237);">×</td><td class="gsib_f"><div></div></td><td class="gsib_d"><div></div></td></tr></tbody></table></td></tr></tbody></table>
You could use custom painting to paint a little red icon on the rights side of you're control. Add some mouse click code to detect mouse clicks inside the little red icon to activate 'any' custom code.
um sorry dude but in my opinion u can only do this by adding a button ( even inside the textbox) and set it as when it is clicked it clears the textbox
textbox.Clear();
Good Luck to You , Wish u the best
I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?
Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle
This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
It's done.
apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html