This is a question about layout. I'm developing a .net page, whenever I add a radiobuttonlist right after a label, it comes down to next row. But in the code side, it still within the same row. The problem is if you browse it in IE, it comes down to the next row. I am sure the width of both label and radiobuttonlist is not oversized. What's the reason and how to resolve this issue? Thanks in advance.
RadioButtonList by default renders as table. You can change set the property RepeatLayout="Flow" and it will be rendered in span.
RepeatLayout Property
Different ways it can render
Add a property to your radiobuttonlist
RepeatDirection="Horizontal"
<asp:RadioButtonList RepeatDirection="Horizontal"
ID="RadioButtonList1" runat="server" style="display:inline">
<asp:ListItem>asdf</asp:ListItem>
<asp:ListItem>sdfg</asp:ListItem>
</asp:RadioButtonList>
this will solve your problem. CHEERS
You can set it's display style to be inline:
<asp:RadioButtonList
ID="RadioButtonList1" runat="server" style="display:inline">
<asp:ListItem>asdf</asp:ListItem>
<asp:ListItem>sdfg</asp:ListItem>
</asp:RadioButtonList>
Warning: Purists will scream that information should be in a CSS class somewhere else.
if you have apply css on page, then it is hard to maintain style of radiobuttonlist.
Mine was fix with below code
#radiobuttonlist label
{
vertical-align: super;
}
Related
I am trying to move the button to the right, and it's on a modal form if that somehow makes a difference, but it's not budging no matter what I do. I cannot create a separate CSS class for the code, just use the universal one.
Here's the code:
<asp:Panel ID="PnlUpdateSubjectPin" runat="server" CssClass="row" Visible="false">
<asp:Panel ID="Panel140" runat="server" CssClass="col-6">
<asp:Button ID="BtnGenNewPin" runat="server" Text="Generate Pin" CssClass="btn-success margin-left: 50px" />
You can't put the style elements in to the "class" you specify for that button.
Use a Style for things you want to add - the CssClass does NOT allow css, but ONLY allows you to specify existing css class(s) you want to use.
So, try this:
<asp:Button ID="BtnGenNewPin" runat="server"
Text="Generate Pin" CssClass="btn-success"
Style="margin-left:25px" />
the above should work just fine. So, don't try to put/shove css into the CssClass setting. You are free to use Style= in above, and it will be respected, and in fact should not mess nor bother with the existing class(s) you specified in the CssClass settings.
CssClass simple does not allow you to add or put css into that setting - only class(s) can be used by that setting.
Use Style -- you should be just fine.
When I add a tool tip attribute to asp drop-down list, its not showing any tool tip,When I include this drop-down in the div tag and give title attribute for the div tag, then i can see the tool-tip.
<div title="Professions">
<asp:Dropdownlist runat="server" ID="ddlProfession" DataValueField="ProfessionName" DataTextField="ProfessionName" Width="260px">
</asp:Dropdownlist>
</div>
But I don't want to add any extra div or any other container. directly i want the drop-down to show the tool tip.even it is fine, if you can guide me how to add title attribute for input tag of asp drop-down list which comes after rendering.
It should work:-
<asp:Dropdownlist runat="server" ID="ddlProfession" DataValueField="ProfessionName"
DataTextField="ProfessionName" Width="260px" ToolTip="Some Text">
</asp:Dropdownlist>
Please note it will render Html select with title attribute as Some Text. So you don't need any extra div.
I use clasic asp.net 4.0. I have big problem with set at DataListItem element css style. This item are render as td so I think that it will be easy, but is not :/
U use code like:
<%# (((DataListItem)Container).Styles["border-color"] = "Red")==""?"":"" %>
I find that it's easy solution:
use that code :
<ItemStyle BorderWidth="0px" />
I've just replaced Telerik controls in a small web project with DevExpress controls, but now, despite my adding an inline display div as container, these controls are no longer rendered inline. What could have caused this, and what can I do to get these errant controls back inline?
<div style="display: inline;">
<label>
Department:</label>
<dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
</dx:ASPxComboBox>
<label>
Production Date:</label>
<dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy"
ondatechanged="productionDatePicker_DateChanged">
</dx:ASPxDateEdit>
</div>
Sounds like the DevX controls have some CSS that you'll need to override.
For starters, I'd try adding the !important flag to the style:
<div style="display: inline !important;">
If that doesn't work, switch back to the RadControls. They are far superior :)
Almost all of DevExpress controls are rendered as tables. The main advantage of this approach is that this way provides good cross-browser capability, since when nested divs are used, it might be hard to synchronize their positions and sizes for all browsers. However, using tables allows end-users to get rid of this problem.
[CSS] add this line on your css
.DXControlsInline {display: inline-table;}
[ASPx] add CssClass="DXControlsInline" on controls you want to make inline
<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server" CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline" ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox>
Source : http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html
The task is not directly related to our controls and can be implemented without them in a similar way. In the case of ASPxTextBox, define a CssClass property to it with the following rule:
<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>
.txtStyle {
display: inline-block;
}
I've prepared a small sample to demonstrate how it works. See also CSS display Property.
UPDATED:
When a caption is specified for ASPxTextBox, it is rendered as a table. That is why the suggested approach does not work in this case. To resolve this issue, I suggest you place each text box in a div element and set the 'display' property for it. Let me know if this helps.
Source
<asp:DataList ID="ItemsList" RepeatDirection="Vertical" runat="server">
<ItemTemplate>
<asp:LinkButton
ID="SecondLevelItem" runat="server" CommandName="second"
OnCommand="SecondLevelItem_Onclick" CommandArgument="<%# Container.DataItem %>"
Text="<%# Container.DataItem %>" >
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
everything works fine. except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do tht? Thanks
In general, to control style, you can apply the <ItemStyle> tag inside the <asp:DataList>.
You can optionally inject CSS properties into the asp:LinkButton tag, either with the class attribute or directly with style, controlling the height or other CSS properties.
If it's applicable, you can still add a on the bottom of the template (but this will add a vertical space to the last item too, and I don't know if you want it).
Hope to have been of help.
In the code behind databound method for the list, you may be able to add a css class via the attributes collection.
In fact you may be able to that declartively too, just checking now...
eg asp:DataList id="blah" runat="server" ItemStyle-CssClass="someClass"