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;
}
Related
Within a page I implemented a repeater, like this:
<asp:Repeater ID = "rptDetails" runat = "server" OnItemDataBound = "rptDetails_ItemDataBound" >
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="row" style="margin-top: 10px; margin-left: 5px;">
<div class="col-5"><strong>Name:</strong> <asp:Literal ID="litName" runat="server" /></div>
</div>
<div class="row">
<div class="col-1" style='margin-top: 10px; margin-left: 5px;'><strong>Address:</strong></div>
<div class="col-4" style='margin-top: 10px; margin-left: 5px;'><asp:Literal ID="litStreet" runat="server" /></div>
</div>
<hr />
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:Repeater>
The idea being the to avoid the usage of a table structure. But when I run the code I get a slightly different output:
Name: Some dude
Address:
Some street 902 ABC DEF
The data is shown, but instead of putting it in a somewhat tabular format, it gets printed on separate lines.
In other words I'm expecting the following output:
Name: Some dude
Address: Some street 902 ABC DEF
How do I fix this?
I have a webform in ASP.NET with VB.NET, it's made with Bootstrap, but when i put 3 elements (a dropdownlist with selectpicker class, a textbox and a button)in class="form-inline" on PC looks good but in phone no:
Form-inline on PC
But in phone it's look like this:
Form-inline on Phone
Here is my .aspx:
<div class="panel panel-default">
<div class="panel-heading">Directorio Telefónico</div>
<div class="panel-body">
<div class="form-group">
<div class="form-inline col-lg-offset-3 col-sm-offset-3">
<asp:DropDownList ID="ddlBuscar" CssClass="selectpicker" runat="server">
<asp:ListItem Value="">Seleccione elemento</asp:ListItem>
<asp:ListItem Value="departamento">Departamento</asp:ListItem>
<asp:ListItem Value="ubicacion">Ubicación</asp:ListItem>
<asp:ListItem Value="extension">Num. extensión</asp:ListItem>
<asp:ListItem Value="usuario">Nombre usuario</asp:ListItem>
<asp:ListItem Value="apellidop">Apellido p. usuario</asp:ListItem>
<asp:ListItem Value="apellidom">Apellido m. usuario</asp:ListItem>
<asp:ListItem Value="linea">Tipo de línea</asp:ListItem>
</asp:DropDownList>
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<asp:TextBox ID="txtBuscar" placeholder="Ingrese búsqueda" CssClass="form-control " runat="server" ClientIDMode="Static" onkeypress="return EnterEvent(event)"></asp:TextBox>
</div>
<asp:LinkButton ID="loading" CssClass="btn btn-default" runat="server" OnClientClick="waitingDialog.show('Procesando búsqueda, espere...', {onHide: function Carga(){ var objO = document.getElementByid('<%=loading.ClientID %>'); objO.click();}})" Text="<i aria-hidden='true' class='glyphicon glyphicon-search'></i> Buscar"></asp:LinkButton>
</div>
</div>
Thank you for your help
Please read the documentation on Bootstrap's inline form:
Add .form-inline to your form (which doesn't have to be a ) for
left-aligned and inline-block controls. This only applies to forms
within viewports that are at least 768px wide.
You can add some margin to the form-controls to make them stack nicer on mobile.
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.
I want to add a Css-Class to a <asp:ListItem> within a <asp:CheckBoxList>.
This is my code:
<fieldset class="group">
<asp:CheckBoxList ID="checkboxID" runat="server" CellPadding="5" CellSpacing="5" RepeatColumns="1" CssClass="choose" RepeatDirection="Vertical" RepeatLayout="UnorderedList" TextAlign="Right" EnableViewState="true">
<asp:ListItem Text="Checkbox 1" Value="checkbox_10" />
</asp:CheckBoxList>
</fieldset>
This is what I get:
<fieldset class="group">
<ul id="checkboxID2" class="choose">
<li>
<input id="checkboxID_0" type="checkbox" name="checkboxID$0" value="checkbox_10" />
<label for="checkboxID_0">Checkbox 1</label>
</li>
</ul>
</fieldset>
But I need a css-class for the input field:
<fieldset class="group">
<ul id="checkboxID2" class="choose">
<li>
<input id="checkboxID_0" type="checkbox" name="checkboxID$0" value="checkbox_10" class="replace" />
<label for="checkboxID_0">Checkbox 1</label>
</li>
</ul>
</fieldset>
I found these two questions:
Is there a possibility to assign CssClass to CheckBox within CheckBoxList
Applying Styles To ListItems in CheckBoxList
But my question is:
Is there a way to add a css class without the programmatically way?
I tried <asp:ListItem class="replace">, but this generates a <span class="replace"> around the input field and doesn't work. Additionally I can't change the css classes.
You can do that by 2 ways:
JQuery >
$("#selectboxid option:eq(0)").css("color","red");// you can set any color
Or Javascript >
checkbox {
color:red
}
With the suggestion of TechGirl I've come up with this:
<script>
$("input[type='checkbox']").addClass("replace");
</script>
Add this in to the
<style>
input[type=checkbox] {
width: 100px;
}
</style>
Hope it will work
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.