I am trying to have an icon display right after the textbox, left edge of image abutting right edge of textbox. I cant get it to happen. The image is always low and offset to the right. Im certain bootstrap is having something to do with this but Ive tried turning off almost all the css in dev tools but it still wont display right after the texbox.
Here is the code, I even wrapped it in a span hoping to force it in one line. The bootstrap classes start the textbox where I want it, I just simply want the icon directly next to the textbox.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
<div class="col-md-10">
<span class="imageinline">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control" Width="300" MaxLength="20" ClientIDMode="Static" /><asp:Image ID="ccImage" runat="server" ClientIDMode="Static" ImageUrl="~/Images/CC Icons/amex_small.png"/></span>
</div>
</div>
Here is the css
span.imageinline img {
display: inline !important;
margin-left: 2px;
}
In order for the controls to display horizontally in bootstrap, the form-inline class from bootstrap must be used, without any additional css of your own, as shown below
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
**<div class="form-inline">**
<div class="col-md-10">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control"
Width="300" MaxLength="20" ClientIDMode="Static" TabIndex="8"/>
<asp:Image ID="ccImage" runat="server" ClientIDMode="Static"
ImageUrl="~/Images/CC Icons/amex_small.png"/>
</div>
</div>
</div>
Related
The image of the problem:
The code:
<div class="text-xs-center" id="DIVCATCHA" runat="server">
<asp:HiddenField runat="server" ID="hdnImageSelected" />
<div class="g-recaptcha" data-sitekey="" style="transform:scale(0.81);-webkit-transform:scale(0.81);transform-origin:0 0;-webkit-transform-origin:0 0;" >
</div>
</div>
By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.
By adding in just two inline styles, you can make the reCAPTCHA fit nicely:
<div class="g-recaptcha"
data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);transform-origin:0 0">
</div>
More details can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
I have this code:
<asp:Panel ID="Panel4" runat="server">
<div style="position:absolute; bottom:578px; left:4%; width: 6%;" >
<asp:linkButton id="cmdBackHour" runat="server" CssClass="configurebuttons" Text="< 1 hr" ToolTip="Go back one hour"/>
<asp:linkButton id="cmdBackDay" runat="server" CssClass="configurebuttons" Text="< Day" ToolTip="Go back one day" />
<asp:linkButton id="cmdForwardDay" runat="server" CssClass="configurebuttons" Text="Day >" ToolTip="Go forward one day" />
<asp:linkButton id="cmdForwardHour" runat="server" CssClass="configurebuttons" Text="1 hr >" ToolTip="Go forward one hour" />
</div>
</asp:Panel>
This displays my buttons one below the other. I want these buttons to be displayed side by side.
Add below css property to your buttons.
float:left;
display:inline-block;
This will help.
Use one common class to all buttons to apply this.
Eg.
.btn {
float:left;
display:inline-block;
}
<li><span>Test:</span>
<asp:Label style="float:right;padding-right:5px"
runat="server"
ID="lblTest">
</asp:Label></li>
I have a span and a label(I am aware its also rendered as span), somehow the static span's text is fine but the label's text falls down in the Li element....down to the bottom.
I have tried vertical align and text align, top:0, but no luck to have them in a straight line
Try this it works for me
<li>
<span>Test:</span>
<asp:Label style="padding-right:5px;display:inline;" runat="server" ID="lblTest"></asp:Label>
</li>
<li>
<span>Test:</span>
<asp:Label style="display:inline-block;" runat="server" ID="lblTest">hi</asp:Label>
</li>
Change your style to this:
style="display:inline-block;"
It displays the block as below
Working Fiddle
I cant figure it out. How do i align the textbox? I thought using float: left on the labels on the left (then doing it on the input when i notice the input was now on the left without that) but that was completely wrong.
How do i get the textbox align along with the labels on the left of them next to the textbox instead of the far left?
The picture is an example of what i'd like it to look like.
You have two boxes, left and right, for each label/input pair. Both boxes are in one row and have fixed width. Now, you just have to make label text float to the right with text-align: right;
Here's a simple example:
http://jsfiddle.net/qP46X/
Using a table would be one (and easy) option.
Other options are all about setting fixed width on the and making it text-aligned to the right:
label {
width: 200px;
display: inline-block;
text-align: right;
}
or, as was pointed out, make them all float instead of inline.
you can do a multi div layout like this
<div class="fieldcontainer">
<div class="label"></div>
<div class="field"></div>
</div>
where
.fieldcontainer { clear: both; }
.label { float: left; width: ___ }
.field { float: left; }
Or, I actually prefer tables for forms like this. This is very much tabular data and it comes out very clean. Both will work though.
I like to set the 'line-height' in the css for the divs to get them to line up properly. Here is an example of how I do it using asp and css:
ASP:
<div id="profileRow1">
<div id="profileRow1Col1" class="righty">
<asp:Label ID="lblCreatedDateLabel" runat="server" Text="Date Created:"></asp:Label><br />
<asp:Label ID="lblLastLoginDateLabel" runat="server" Text="Last Login Date:"></asp:Label><br />
<asp:Label ID="lblUserIdLabel" runat="server" Text="User ID:"></asp:Label><br />
<asp:Label ID="lblUserNameLabel" runat="server" Text="Username:"></asp:Label><br />
<asp:Label ID="lblFirstNameLabel" runat="server" Text="First Name:"></asp:Label><br />
<asp:Label ID="lblLastNameLabel" runat="server" Text="Last Name:"></asp:Label><br />
</div>
<div id="profileRow1Col2">
<asp:Label ID="lblCreatedDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblLastLoginDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblUserId" runat="server" Text="UserId"></asp:Label><br />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />
</div>
</div>
And here is the code in the CSS file to make all of the above fields look nice and neat:
#profileRow1{width:100%;line-height:40px;}
#profileRow1Col1{float:left; width:25%; margin-right:20px;}
#profileRow1Col2{float:left; width:25%;}
.righty{text-align:right;}
you can basically pull everything but the DIV tags and replace with your own content.
Trust me when I say it looks aligned the way the image in the original post does!
I would post a screenshot but Stack wont let me:
Oops! Your edit couldn't be submitted because:
We're sorry, but as a spam prevention mechanism, new users aren't allowed to post images. Earn more than 10 reputation to post images.
:)
I have found better option,
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
I don't know the rendered width of DIV or any of the buttons. How do I change the markup such that the buttons are rendered with a uniform (or as close as can be) distance between each of them?
EDIT: Also, the buttons should consume the full width of the DIV.
<div>
<asp:Button ID="Button1" runat="server" Text="Action1" />
<!-- space between rendered buttons -->
<asp:Button ID="Button2" runat="server" Text="Action2" />
<!-- space between rendered buttons -->
<asp:Button ID="Button3" runat="server" Text="Action3" />
<!-- space between rendered buttons -->
<asp:Button ID="Button4" runat="server" Text="Action4" />
</div>
I am thinking this can't be done without a table, JavaScript or the use of at least some (relative) widths (if you can set percentages, it's easy.).
Or maybe putting each button into a div with display: table-cell, but I find that sick. Then rather be honest and use a table.
Feel free to prove me wrong, I'd be interested in alternative approaches myself.