im using visual studio 2012 with bootstrap downloaded from nuget package.
i have the below code to display radio buttons
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
<asp:RadioButtonList ID="RadioButtonList3" runat="server" CssClass="radio">
<asp:ListItem Text="Yes" Value="yes"></asp:ListItem>
<asp:ListItem Text="No" Value="no"></asp:ListItem>
</asp:RadioButtonList>
now the alignment is not proper, its like
how can i get to to properly align using bootstrap and asp.net as below
I actually found another way, and works fine using row-fluid property of bootstrap
<div class="row-fluid">
<div class="span6 offset3">
fluid6
<div class="row-fluid">
<div class="span6">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</div>
<div class="span6 radio">
<asp:RadioButtonList ID="RadioButtonList3" runat="server">
<asp:ListItem Text="Yes" Value="yes"></asp:ListItem>
<asp:ListItem Text="No" Value="no"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</div>
</div>
You're going to need to use a little CSS.
Try setting the labels to:
#RadioButtonList3 label{
display: inline-block;
width: 200px; <---- wild shot in the dark on the exact width
text-align: center;
}
Related
I am using visual studio 2013 and use the radio button list in ASP.Net. Im having problem with the text which it's not in line with the button. This is what I got and This is what I want
here is my code
<div class="form-group">
<div class="row">
<div class="col-md-2">
<asp:Label ID="lbl6" Text="From Date" runat="server"></asp:Label>
</div>
<div class="col-md-2">
<dx:ASPxDateEdit ID="datepickerFrom" runat="server" AutoPostBack="true" DisplayFormatString="yyyy-MM-dd" EditFormat="Date" EditFormatString="yyyy-MM-dd" NullText="Please select the date">
</dx:ASPxDateEdit>
</div>
<div class="col-sm-2">
<dx:ASPxDateEdit ID="datepickerto" runat="server" AutoPostBack="true" DisplayFormatString="yyyy-MM-dd" EditFormat="Date" EditFormatString="yyyy-MM-dd" NullText="Please select the date">
<DateRangeSettings StartDateEditID="datepickerFrom" />
</dx:ASPxDateEdit>
</div>
<div class="col-md-2">
<asp:CheckBox ID="cbHalfDay" runat="server" Text="Half Day" AutoPostBack="true" />
<asp:RadioButtonList ID="rblHalfday" runat="server" Visible="false" RepeatDirection="Horizontal" CssClass="margin-5">
<asp:ListItem Text="First Half " Value="1" />
<asp:ListItem Text="Second Half" Value="2" />
</asp:RadioButtonList>
</div>
</div>
</div>
So,I try to use this in asp.net
<div class="col-sm-8">
<asp:RadioButtonList ID="rblHalfday" runat="server" Visible="false" RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="2" CssClass="mylist">
<asp:ListItem Text="First Half" Value="1" />
<asp:ListItem Text="Second Half" Value="2" />
</asp:RadioButtonList>
</div>
and this is the css
table.mylist label {
width: 100px;
display: block;
float: left;
margin-left: 20px;
margin-right: 5px;
}
And the text in line like image below. BUT I want the text inline with the radio button too.
This is what I got:
I could use some help with the styling of my DropDownList and set it to max-width: 100%. Have tried multiple things, but nothing seem to work. What i have tried so far are:
input {
max-width: 100%;
border-radius: 0 !important;
}
Input did not work on the Asp:DropDownList, but worked fine with the Asp:TextBox. I don't want to set the width in pixels like Width="100px", because it should resize itself, because it is responsive.
Have also tried with:
DropDownList {
max-width: 100%;
}
Code
<div class="contentbooking">
<div class="form-group">
<asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"></asp:Label>
<asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
<asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"></asp:Label>
<select class="form-control" id="rooms">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<asp:Label ID="Label2" runat="server" Text="#1:"></asp:Label>
<div class="form-inline">
<asp:DropDownList ID="adults" CssClass="form-control" max-width="100%" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="childrens" CssClass="form-control" max-width="100%" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<br />
<asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" />
</div>
</div>
As you can see in the code, i have two Asp:DropDownLists which should be inline with each-other. What options do i have?
<asp:DropDownList /> gets rendered as a <select> element. Try amending your CSS to the following:
select {
max-width: 100%;
}
I can see you're using Bootstrap's form-inline class to try and make the two lists inline. Consider using form-horizontal instead:
<div class="form-horizontal">
<div class="form-group">
<asp:Label ID="Label2" runat="server" Text="#1:" CssClass="col-sm-12 control-label" />
<div class="col-sm-6">
<asp:DropDownList ID="adults" CssClass="form-control" runat="server" />
</div>
<div class="col-sm-6">
<asp:DropDownList ID="childrens" CssClass="form-control" runat="server" />
</div>
</div>
</div>
You can use the Id's of your DropDownList to style it as required. Firstly I would recommend checking what the Id's are rendered to once on the client side and then style it accordingly. On my local dev the Id's of the DropDownList are rendered as follows
MainContent_adults
MainContent_childrens
So all you need in your CSS is
#MainContent_adults,
#MainContent_childrens{
max-width: 100%;
}
I guess
i have two Asp:DropDownLists which should be inline with each-other.
means that you want your two ddl be in the same line right? if so, it should work, just change the max-width for this style="width:49%"
<asp:DropDownList ID="adults" CssClass="form-control" style="width:49%" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="childrens" CssClass="form-control" style="width:49%" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
The width is 49% because of the padding/borders of the controls, you can set it to 50% but then you should get rid of the two properties
EDIT
In response to:
It don't looks right when the screen size goes in ipad / iphone mode
AFAIK it is the way it should work, from the Bootstrap Inline form documentation
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.
A workaround if you want to get the same behavior, use a table instead
<table style="width:100%">
<tr>
<td><asp:DropDownList ID="adults" CssClass="form-control" style="width:100%" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList></td>
<td><asp:DropDownList ID="childrens" CssClass="form-control" style="width:100%" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList></td>
</tr>
</table>
I am trying to center the radmediaplayer telerik control, but to no avail. Please help thank you.
<asp:Panel ID="pnlModal3" runat="server" role="dialog" CssClass="modal fade">
<asp:Panel ID="pnlInner3" runat="server" CssClass="modal-dialog" >
<asp:Panel ID="pnlContent4" CssClass="modal-content" runat="server">
<asp:Panel runat="server" class="modal-header">
<h4 class="modal-title" >Clip Player</h4>
</asp:Panel>
<asp:panel runat="server" class="modal-body">
<telerik:RadScriptManager runat="server" ID="RadScriptManager2" />
<div style="text-align:center;">
<telerik:RadMediaPlayer ID="ClipPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px" DestroyOnClose ="true">
</telerik:RadMediaPlayer>
</div>
</asp:panel>
<asp:panel runat="server" class="modal-footer">
<asp:Button ID="Button4" runat="server" Text="Close" OnClick="btnClose_Click" class="btn btn-default"/>
</asp:panel>
</asp:Panel>
</asp:Panel>
</asp:Panel>
First, two generic issues:
RadMediaPlayer does not have a DestroyOnClose property. RadWindow has.
The script manager should be your first control inside the .
Back to your question - what exactly is not working? have you tried setting margin: auto to the div element that is the media player control? This worked for me in a basic setup:
<div>
<telerik:RadMediaPlayer ID="ClipPlayer" CssClass="centeredPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px">
</telerik:RadMediaPlayer>
</div>
and
.centeredPlayer
{
margin: auto;
}
If it does not work for you, inspect the rendered HTML to see what CSS is in play. Substitute RadMediaPlayer with a simple div and center that first.
I have the following aspx code fragment. In the IE9 standard mode, even there is nothing to the left of the 1st listLabel, the 1st listLabel would still flush to the right and forces down one line for the remaining listLabels and their ListBoxes. In IE9 compatibility view mode, all listLabels and ListBoxes are on the same line. I tried many css settings without success. I prefer not to use float. Does anyone know why this is happening and how to fix the problem? Thanks.
label.listLable
{
/*vertical-align:top;*/
font-weight:bold;
}
<asp:Content ID="pageContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<div>
<label for="<%=listPcpPanel.ClientID%>" class="listLable">Panel: </label>
<asp:ListBox ID="listPcpPanel" runat="server" SelectionMode="Multiple" Rows="1">
<asp:ListItem Value="<----- All ----->" Selected="True"></asp:ListItem>
</asp:ListBox>
<label for="<%=listFacilityService.ClientID%>" class="listLable">Service: </label>
<asp:ListBox ID="listFacilityService" runat="server" SelectionMode="Single" Visible="true" Rows="1">
<asp:ListItem Value="<---Select one--->" Selected="True"></asp:ListItem>
</asp:ListBox>
<label for="<%=listRole.ClientID%>" class="listLable">Role: </label>
<asp:ListBox ID="listRole" runat="server" SelectionMode="Multiple" Visible="true" Rows="1">
<asp:ListItem Value="<----- All ----->" Selected="True"></asp:ListItem>
</asp:ListBox>
</div>
...
...
</div>
</asp:Content>
I got it resolved by removing the first <div> child of the <asp:content>.
I am trying to replicate this table structure by using div.
<asp:Table ID="tblAnnualReportServiceForm" runat="server" Width="100%" CellSpacing="1" CellPadding="5">
<asp:TableRow >
<asp:TableCell HorizontalAlign="Left">
<asp:Table ID="Table1" runat="server" CellSpacing="1" CellPadding="5">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow >
<asp:TableCell>
<asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
I have tried the following DIV and I haven't have much CSS experience.
<div>
<div style="float:left">
<asp:Label ID="Label1" runat="server" Text="Start Date"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox1" Width="130px" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="End Date"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
</div>
</div>
Any pointers would be of great help. I have too many table structure that needs to be converted to DIV. I appreciate the help
A general structure to replicate table is like.
<!--table-->
<div>
<!--tr-->
<div style="clear:both"></div>
<!--td-->
<div style="float:left">
</div>
<!--td-->
<div style="float:right">
</div>
<!--tr-->
<div style="clear:both"></div>
<!--td-->
<div style="float:left">
</div>
<!--td-->
<div style="float:right">
</div>
<!--tr-->
<div style="clear:both"></div>
</div>
You can do something like this:
<div>
<div style="clear:both;">
<div style="float:left;width:50%;">
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</div>
<div style="float:left;width:50%;">
<asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
</div>
</div>
<div style="clear:both;">
<div style="float:left;width:50%;">
<asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
</div>
<div style="float:left;width:50%;">
<asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
</div>
</div>
</div>
If you want to get some paddings/margins you can add another div into a cell div:
<div style="float:left;width:50%;">
<div style="border:solid 1px black;padding:5px;margin:1px;">
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</div>
</div>
JsFiddle DEMO or here is a demo with classes (using style is not a very good idea, so I created few classes and removed styles from div tags)
Check out:
1.) YUI Grids - for Tableless design
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
2.) 960 Grid System: The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.