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>.
Related
I am using an ASP.NET Wizard control to display a multi steps process. I have to make the form accessible with NVDA screen reader and with all browsers. The form is accessible in Chrome as the NVDA is reading the screen from the top This is header to bottom in order. But when checking the same form in Firefox + NVDA, the focus is sometimes moving to middle and sometimes to the footer. My requirement is screen reader should always read from the This is header in all the wizard steps. Please, I need your help to solve the issue. My Code is as below:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WizardRadioButtonListDemo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Accessibile Form</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
<HeaderTemplate>
<h1>This is header</h1>
</HeaderTemplate>
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
<fieldset id="Fieldset1" runat="server">
<legend id="Legend1" runat="server">Type</legend>
<asp:RadioButtonList ID="rdoServiceType" RepeatLayout="Flow" runat="server">
<asp:ListItem Text="Gold" Value="0">Gold</asp:ListItem>
<asp:ListItem Text="Siver" Value="1">Silver</asp:ListItem>
<asp:ListItem Text="Premium" Value="2">Premium</asp:ListItem>
</asp:RadioButtonList>
</fieldset>
</asp:WizardStep>
<asp:WizardStep>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnFileUpload" runat="server" Text="Upload" />
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
<fieldset id="Fieldset2" runat="server">
<legend id="Legend2" runat="server">User</legend>
<asp:Label ID="lblFirstName" runat="server" Text="First Name" AssociatedControlID="txtFirstName"></asp:Label>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:Label ID="lblLastName" runat="server" Text="Last Name" AssociatedControlID="txtLastName"></asp:Label>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</fieldset>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</div>
</form>
<p>© 2017 Test LLC.. All rights reserved. Powered by Test</p>
</body>
</html>
Okay so heres the issue I think. So you want the user to read the h1 by tabbing. One solution would be to add a tab-index of 0 to the header.
Why?
Because by default html, the only tabbable elements are Links, buttons, & inputs. H1's and p-tags don't do that. But they can if you give them a tab-index of 0...
So add this:
<HeaderTemplate tabindex="0">
<h1>This is header</h1>
</HeaderTemplate>
I might've interpreted your question wrong. If that's not the case, you can always add tab-index of positive values to your form in the sections you want it to go to.
Such as:tab-index="1"
... etc, and keep going up.
I am trying to show my jquery button on the same line as my dropdown, currently it is beneath, I tried setting the inline width on Div but nothing happened , any advice ?
<asp:Label runat="server" id="lblError"></asp:Label>
<div id="divChangeLabApproval" runat="server">
<br />
<asp:Label ID="lblNewLabStatus" runat="server" Text="New Lab Status: " />
<asp:DropDownList ID="ddlSetLabStatus" runat="server">
</asp:DropDownList>
<asp:Button ID="btnSaveLabChange" runat="server" Text="Save" OnClientClick="if (!OnSaveLabChangeClick()) return false;" OnClick="OnSaveLabChange" UseSubmitBehavior="false" />
<br />
</div>
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>
Here is my code:
<asp:WebPartZone ID="Zone1" runat="server" Width="100%" PartChromeType="None" Padding="0" PartStyle-CssClass="NoPadding"
PartStyle-BackColor="Transparent" BackColor="Transparent" PartChromeStyle-BackColor="Transparent">
<PartStyle BackColor="Transparent"></PartStyle>
<CloseVerb Visible="false" />
<MinimizeVerb Visible="false" />
<ZoneTemplate>
<div class="demo">
<p>Procedure Queues</p>
</div>
<div class="demoBottom">
<div class="divPortletContent">
<br />
<asp:DataList ID="dlProcedureQueues" runat="server" >
<ItemTemplate>
<asp:HyperLink ID="lbProcedureQueues" runat="server" Text='<%# Eval("site_nm") %>' NavigateUrl='<%# Eval("site_url") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</ZoneTemplate>
</asp:WebPartZone>
The text from <div class="demo"><p>Procedure Queues</p></div> is miising and it works if I put it outside of webpart. Also, I am loosing all the css styles when placed inside webpart's ZoneTemplate.
Any ideas?? Thanks in advance.
Let me answer my own question. From what I found out, ZoneTemplate only considers the asp controls (including user controls) as web parts and ignores all the html.
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;
}