I need a way to layout controls in a page.
Let me ask you by example.
I have four different action buttons (Edit, Delete, etc..) that do the same actions on any page, but sometimes I want them laid out horizontally and some other times vertically, depending on which page is displaying them.
So I thought of placing all four buttons in a user control and manage their layout using some sort of template control.
Does such a control exist that is as flexible as ListView's template management?
Of course a lazy solution is to place four buttons horizontally in a panel, and another four buttons vertically in another panel, and show/hide the panel that's requested, but I don't want to have two instances of the buttons; I just want one instance of each button, but in different layouts.
Feel free to add more tags to this.
Such thing can be achieved with CSS. I'm bad in CSS but I believe this works:
HTML
<div class="horizontal">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
</div>
Two CSS classes you simply set which you need in the div element (you can wrap your buttons with UserControl and map div's class to UserControl's property)
<head>
<style type="text/css">
.horizontal input
{
margin:0px 2px 0px 2px;
}
.vertical input
{
display:block;
margin:2px 0px 2px 0px;
}
</style>
</head>
Templated control is to strong for such easy task especially when you do not need to change template content.
Related
buttons on IEI have created radio buttons in ASP.NET using bootstrap. These buttons are supposed to be disabled which works fine in chrome but in Internet explorer, it creates a gray square around the buttons. I've been able to get it removed on IE by wrapping the input tag with a div disabled tag. However, this does not work in chrome. So I can't get one to work without messing up the other. The code I have included is the one that works with chrome.
input[disabled] {
cursor: not-allowed;
background-color: #cfcfcf;
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
<div class="form-check">
<input disabled="disabled" checked="checked" class="form-check-input" id="Male" name="GenderSelection" type="radio" value="Y">
</div>
<label for="Male">Male</label>
]2
the issue is with the css.
input[disabled] {background-color:#cfcfcf;}
remove that and it works.
Thanks!
I have a web page that has basic registration field like Name, DOB, Address etc. The page has some controls (text box, DOB etc) that will be shown or hidden based on a radio button selection. Currently, when the end user fills up the page using tab key the hidden controls are getting focus and tab out is not working as expected (Current implementation does not have tab indexes set).
I tried manually setting the tab indexes in a incremental order for all the controls. But moving back and forth or after switching between those radio button selections, tab out scenario is not working properly.
Is there any work around to handle this scenario? Any help would be appreciated.
You need to set display: none instead of opacity: 0 so controls are removed completely from the flow. opacity: 0 means that the controls are still there, just invisible, they can still receive focus and input, on the code snippet below, you can still click in the invisible control between the two visible controls.
display: none means the controls are not there anymore so they can't receive focus and input.
You can refer to code snippet below to see the comparison.
.opacity .hidden {
opacity: 0;
}
.display .hidden {
display: none;
}
<h3>Opacity: 0 style</h3>
<form class="opacity">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
<h3>Display: none style</h3>
<form class="display">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
I am writing my first web application using Twitter Bootstrap and ASP.NET with C# on the back-end. I have buttons and labels inside of a Bootstrap panel. I would like to align the labels to the left and the buttons to the right. Here is my code so far:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel body">
<p>
<asp:Label ID="BandsProducedLabel" runat="server" Text="Bands Produced:"></asp:Label>
<asp:Button class="btn btn-default" ID="BandsProducedBtn" runat="server" Text="Hello" style="text-align:right" />
</p>
<\div>
<\div>
How can I accomplish this task? This is only a small snippet of code. I have about 15 other panels that I would like to apply the same styling to.
If you want to use standard Bootstrap styles, you can give the label the CSS class "pull-left" and the button "pull-right".
For the correct result, you might have to reverse the source order, that is, have the button come first and then the label, in the markup.
Another option would be to use the Bootstrap grid system to place these two elements side by side.
How do we make a drop down list with checkboxes? C# lang is preferred for this.
You can't. Not a real one anyway, but you can fake one by making a scrolling div which appears when you click a button (using JQuery):
<div id="cbListDiv" style="height: 172px; width:300px; overflow-y:scroll; border:1px solid silver; margin-top:8px;">
<asp:CheckBoxList id="cbList" runat="server" RepeatLayout="Flow" />
</div>
Then you'd need to add some code to display or expand that region when you click a link on the page. That's about as close as you can get I think.
i have a tagtextbox on my page
when a user selects a category that category name goes to tagtextbox
now i want that this category name user cant change but he can append some more tags
means first tag becomes readonly and further he can add too in same text box
This is not possible.
Instead, you can put the first category name in a <span>, and put the textbox after the span.
You can then apply border: none to the textbox and make your own border around the entire thing to make it look like a single textbox.
CSS :
<style type="text/css">
.div {
margin:20px;
padding:10px;
background:#ccc;
float:left;
}
.textarea {
border:0;
display:block;
font-size:12px;
padding:5px 5px 0;
outline:none;
}
.span {
display:block;
background:#fff;
font-size:14px;
padding:5px 5px 5px;
color:green;
outline:none;
}
</style>
HTML :
<div class="div">
<div class="span">
<asp:TextBox runat="server" ID="txtNumber" BorderStyle="None" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" ValidationExpression="\d+" ControlToValidate="txtNumber" ErrorMessage="Only Numbers are allowed" Display="Dynamic" />
</div>
</div>
You can't make part of a textbox editable and another not.
My suggestion would be to change the type of element from a TextBox to a div or span via Javascript as soon as the user begins to enter the next tag.
If you want to allow append has in "paste" action, then you can't do that. Else and you just want to append via your code, why not use just a div to show what he has selected and add the selections to your post on a hidden textbox?
Adding to what SLaks said - Here is an example of a CSS & HTML hack where someone has added a span under the textbox. To make it look like it is part of the same textbox there is a border round the enclosing div. It looks quite effective.
textbox with uneditable name at the bottom