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;
}
Related
This question already has answers here:
Bootstrap Nav Disappears on Resize
(2 answers)
Closed 3 years ago.
I've created a default (thus I took what visual studio 2017 created when I created the project) master and sub pages website.
In the masterpage I put in a menu using a combination of divs and tables.
It all works well EXCEPT if I reduce the window size so that the width of the window is about 1280 px. Then suddenly the menu items are no longer shown and also nothing clickable on the menu bar.
One thing that stands out to me is: The menu still would have had plenty of space, but the menu items are still not shown. Only the black bar of the menu (background color is set to black for the table).
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse ">
<asp:Table ID="MenuTable" runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:HyperLink runat="server" ID="Contacts" NavigateUrl="~/Forms/Contacts?#DynamicLinkReplace">Kontakte</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" ID="PingLink" NavigateUrl='javascript:void(window.open("~/forms/ping.aspx", "Ping to XXXXX", "width=640, height=480"));' >Ping</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" ID="RemoteLink" Target="_blank">Remote</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:HyperLink runat="server" NavigateUrl='~/Forms/JournalT.aspx?#DynamicLinkReplace' id="JournalT">Journal T</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" NavigateUrl='~/Forms/JournalH.aspx?#DynamicLinkReplace' id="JournalH">Journal H</asp:HyperLink>
</asp:TableCell>
<asp:TableCell ID="MenuCellEnvelopeClearance">
<asp:HyperLink runat="server" NavigateUrl='~/Forms/Clearance.aspx?#DynamicLinkReplace' id="MenuEnvelopeClearance">Freigabe</asp:HyperLink>
</asp:TableCell>
<asp:TableCell>
<asp:HyperLink runat="server" ID="DetailsLink" NavigateUrl='~/Forms/Details.aspx?#DynamicLinkReplace'>Details</asp:HyperLink>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</div>
</div>
.CSS is not shown as it only is used for colouring and text size (font-size 14 px, line height 1.4285).
Now my question is twofold. 1.) What is the exact cause of such a phenomenon (so that I don't stumble upon it again) and 2.) What can I do to correct this behaviour?
In your Default Style sheet Consider this code
#media only screen and (min-width: 1000px) {
#Container{
style:block;
}
}
May be your any css or bootstrap contain the Code of min-width or max-width properties
In future check the style sheet
I am using a custom pager for some data on a website that I am building. The pager works perfectly but the page numbers overlap each other. I am wondering how could I style them to make them look better.
Source Code
<ItemTemplate>
<asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
style="padding:8px; margin:2px; background:#ac9e94; border:solid 1px #666; font:8pt; color:#594334;"
CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'>
</asp:LinkButton>
</ItemTemplate>
I tried giving it a margin but that didn't work.
Add display: inline-block; to the style attribute. This will automatically increase the line height to accommodate the extra vertical padding.
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>
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.