Bootstrap alignment with rows and margins - asp.net

I am trying to align my buttons in the center. And the text that is currently pulled right I want next to my buttons, and centered. Ive been trying placing rows in every possible combination and Ive tried centering stuff in all sort of ways but just cant get it right.
At the moment I'm forced to use a <br> to get all of it to stay on the same row. But there must be a way to fix this that I'm missing. If I try to remove pull-right it just changes row instead of placing itself next to the button.
Code:
<ItemTemplate>
<td>
<div class="list-group-item">
<%# Eval("URL") %>
<asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton>
<div class="pull-right">
<asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
<asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>
</div>
<br />
<asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton>
</div>
</td>
</ItemTemplate>
Current look:

I have fixed your issue this way, try this one and see if it works.
<style>
a.lnk-content, .lbl-score {
display:block;
margin-left: 30px; /* adjust this based on your requirement*/
margin-top: 10px; /* adjust this based on your requirement*/
}
</style>
<td style="border: 1px solid black; height: 50px;">
<div class="row">
<div class="col-xs-7"> <!-- adjust the columns based on your needs -->
this is my link
</div>
<div class="col-xs-5"> <!-- adjust the columns based on your needs -->
<div class="pull-left">
<div><asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton></div>
<div><asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton></div>
</div>
<div class="lbl-score">
<asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
<asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>
</div>
</div>
</div>
</td>
and this is the result, you could adjust this in anyway you want easily now:
the buttons on the result below don't appear properly because I don't have the styles.
I hope it helps you.

Related

Aligning buttons and datetimepicker in one row/line

I want to have two datetime pickers and some buttons align in one row. I want the date time pickers on the row to be on the left and the buttons aligned on the right.
All of this I want in one row.
I have been messing around with this for some days now and cannot get them to be in one single row, they are all over the place.
The code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="height: 75px;">
<div class="col-md-5">
<div class="form-control">
<div class='input-group date' id='datetimepickerFrom' style="cursor: pointer; width: 200px;">
<input type="text" id="DateFrom" runat="server" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepickerTo' style="cursor: pointer; width: 200px;">
<input type="text" id="DateTo" runat="server" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<asp:Button ID="btnYesterday" runat="server" Text="Yesterday" class="btn btn-primary"
OnClick="btnYesterday_Click" Style="margin-top: 50px; width: 100px;" />
<asp:Button ID="btnWeek" runat="server" Text="Week" class="btn btn-primary"
OnClick="btnWeek_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
<asp:Button ID="btnMonth" runat="server" Text="Month" class="btn btn-primary"
OnClick="btnMonth_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
</div>
</div>
</div>
</div>
</div>
As usual, thanks in advance.
Normally in bootstrap you would just put the class form-inline on your form element (or whatever container that contains your form elements). Your other inline styles may be hosing some of that up. See this example:
See the fiddle here https://jsbin.com/juqereyazu/edit?html,output

Left align one button and right align two buttons in Bootstrap panel [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a panel with three buttons in the panel body. I want one button to be where it currently is (left) and I want the other two buttons to be on the far right.
The buttons currently are all aligned to the left. Below is the code I have written. I have tried numerous things including pull-right and adding button groups and clearfix, but they remain left most.
I have also tried this post: Left align and right align within div in Bootstrap
I am using bootstrapmin for both CSS and JS.
Here is the code:
<div class="row">
<div class="form-inline">
<div class="col-sm-5" style="width: 100%;">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Click 'Run' to complete the report.</div>
<div class="panel-body" style="background-color: lightgray;">
<div class="form-group">
<asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click"
class="btn btn-primary btn-sm"/>
<div class="btn-group">
<span class="pull-right">
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body" style="background-color: lightgray;">
<div>
<asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" class="btn btn-primary btn-sm" />
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm myFloat_Right" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm myFloat_Right" />
</div>
</div>
and in your cs file add the following:
.myFloat_Right {
float: right;
}
worked for me.
You were on the right track. The only thing you had to do was to use the bootstrap classes accordingly. If you pay attention, you'll see they work as a map. 1. build a container, 2. build a row, 3. build a column size, 4. build the element, 5. locate it. In this case, you had to wrap the left button in a left column, and the right btn-group in a right container with pull-left and pull-right. Mind you, in your #media responsive code you have to nullify the pull-right so that they don't look funny in a smartphone. I am assuming you are building a responsive design otherwise you wouldn't use Bootstrap. ;)
Here is a codepen for your solution
enter link description here
p.s. Avoid inline styles like the plague. Specially where you have a col-sm-5 but you are forcing a width to 100%. Doesn't make any sense to do that. Use col-xs-12 if you want a 100% width
Try this
<div class="row">
<div class="form-inline">
<div class="col-sm-5" style="width: 100%;">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Click 'Run' to complete the report.</div>
<div class="panel-body" style="background-color: lightgray;">
<div class="pull-left">
<asp:Button ID="btnRun" runat="server" Text="Run"
class="btn btn-primary btn-sm" />
</div>
<div class="pull-right">
<asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
<asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Style the element in <HeaderTemplate> of Datalist

I am designing an ASP.NET page with using some data from SQL Server Database. I used <DataList> to call data and fill any place I want to in the page. My problem is, CSS seems not working for the element in <HeaderTemplate>. I searched some posts but I couldn't find an answer.
I tried to style <p> like you see in the code, and I tried to style the data I called with <span> too. Then I tried to use both of them at the same time as you see. None of them works.
Here is my code:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Last News</h2>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><p style="text-align:center;"></HeaderTemplate>
<ItemTemplate><span style="text-align:center;"><%#Eval("news_header") %></span></ItemTemplate>
<FooterTemplate></p></FooterTemplate>
</asp:DataList>
<p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
UPDATE and SOLUTION:
When I looked at the codes in browser while localhos was working, I saw the problem was table that Datalist creates. So I framed that table with div just out of Datalistcode and write the CSS class to make it work with all screen sizes. Here is the codes:
Asp.Net Side:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Son Haberler</h2>
<div class="col-lg-12"><asp:DataList ID="DataList1" runat="server">
<HeaderStyle CssClass="deneme2"/>
<ItemTemplate>
<span><%#Eval("haber_baslik_tr") %></span>
</ItemTemplate>
</asp:DataList></div>
<br /><p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
CSS Side:
.col-lg-12 table{
width:100%;
}
.col-lg-12 table tbody tr td{
text-align:center;
}
Use DataList.HeaderStyle
<HeaderStyle CssClass="MyHeaderClass">
</HeaderStyle>

Twitter Bootstrap layout width hidden element

I'm working on an aspnet application and twitter bootstrap.
I have a situation where i need to hide a span based on a variable witch I can do correctly. The problem is that the hidden span keeps the width and breaks the next div.
<div class="row-fluid">
<div class='<%= (showTitle ? "span4" : "hide") %>'>
<label>Title</label>
<ASP:DropDownList ID="DpdLstTitle" runat="server" CssClass="span12"></ASP:DropDownList>
</div>
<div class='<%= (showTitle ? "span8" : "span12") %>'>
<label>Name</label>
<ASP:TextBox ID="TboxName" runat="server" MaxLength="80" CssClass="span12" />
</div>
</div>
Any suggestions ?
You will have to add in some css as bootstrap has added a margin to the second row
Probably:
margin-left: 2.127659574468085%;
So you'll have to override it. Insert
margin-left: 0;
Example HTML:
<div class="row-fluid">
<div class='<%= (showTitle ? "span4" : "hide") %>'>
<label>Title</label>
<ASP:DropDownList ID="DpdLstTitle" runat="server" CssClass="span12"></ASP:DropDownList>
</div>
<div class='<%= (showTitle ? "span8" : "span12 hiddenColBefore") %>'>
<label>Name</label>
<ASP:TextBox ID="TboxName" runat="server" MaxLength="80" CssClass="span12" />
</div>
</div>
Example CSS:
.hiddenColBefore {
margin-left: 0 !important;
}

Html Divs going underneath another DIv Automatically

I have a couple divs and they are set up to be sepereate. but when I load the page they all go underneath the first div that is created. So the example below SiteFullControl is the first div, everything just falls underneath here when the page load. any ideas?
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
</div>
<div id="SitePartialControl" >
<partialalbum:partialalbum ID="partialcontrolalbums" runat="server" />
</div>
<div id="SiteViewOnlyAlbums" class="">
<viewonly:viewonly ID="viewonlyalbums" runat="server" />
</div>
<div id="SitePublicAlbums" class="">
<publicalbum:publicalbum ID="publicalbum" runat="server" />
</div>
<div id="SiteFavoriteAlbums" class="">
<favoritealbum:favoritealbum ID="favoritealbum" runat="server" />
</div>
<div id="SiteFriends" class="">
<friends:friends ID="friend" runat="server" />
</div>
<div id="SiteCreateAlbum" class="">
<createalbum:createalbum ID="createalbums" runat="server" />
</div>
Example of whats happen when the page load
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
I checked the css with firebug and it does not have any position for the css.
use this CSS rule, it may work:
display:block;
no more help can be given without accessing CSS properties.

Resources