Textarea style is auto covered by element.style - c#

In my aspx page, I have a textarea:
<div style=" position: absolute; top: 45px; bottom: 5px;
left: 5px; right: 5px">
<textarea id="code" name="code" runat="server" wrap="off" style="clear: both; width:99%; height:99%" >
</textarea>
</div>
All I want is the Textarea auto display full the browser. But when I built the page, the text area just display small in the left browser screen.
Try to press F12, the Textarea tag is changed:
<textarea id="code" name="code" runat="server" wrap="off" style="display:block" > </textarea>
Really tired, I met this situation for many times. Sometimes, I add style= "clear:both" but in this situation, it cannot help.
The Textarea 's style is just contain: display:block
I copy my code to http://jsfiddle.net/REgjn/ ---> it display as the way I expected: the textarea is fill full the chrome browser. But it is not when I built it on the real browser.
Help!!!
Why is the TextArea tag changed???

I have modified your code. I hope it will work
<div style=" position: absolute; top: 45px; bottom: 5px;
left: 5px; right: 5px;width:99%; height:99%">
<textarea id="code" name="code" runat="server" wrap="off" style="clear: both; width:99%; height:99%" >
</textarea>
</div>

Related

Cannot identify image using browser.Images.Filter(Find.By("ext:qtip", "Delete")).Click()

I want to Click image : following is the html code
I am using following code in watin to click :
browser.Image(Find.By("ext:qtip", "Delete").Click();
It is not working. Please let me know other way.
<div class="x-panel x-column" id="delete-button-2-7qo0yziAwqKk02Gud0Ik" style="width: 12px; padding-top: 2px; padding-left: 8px;">
<div class="x-panel-bwrap" id="ext-gen580">
<div class="x-panel-body x-panel-body-noheader" id="ext-gen581" style="width: 12px;">
<span style="cursor: pointer;">
<img style="width: 16px;" src="/image/poll-grey-close.png" ext:qtip="Delete"/>
This not working because ":" is reserved css selector char try to search using css selector like this:
browser.Image(Find.BySelector("img[ext\\:qtip=\"Delete\"]")).Click();
I didn't checked this code so maybe fine tuning needed...

popup control linkbutton prevent postback

I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>
You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"
I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.

DropShadowExtender and RoundedCornersExtender not playing nicely with ModalPopupExtender

I have the following panel
<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
<div style="position:absolute; top:0; right: 0;">
<asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
</div>
<div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
<asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
<asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
<span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="padding-left: 20px; padding-top: 15px;">
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
</div>
<div style="float: left;">
<asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png" OnClick="btnMessage_click"/>
</div>
</div>
</asp:Panel>
Because this information is going to be bound server side depending on which control in a datalist is selected I have:
<cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController"
CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>
I then call mpeActiveSession.Show() in the code-behind after I bind the data.
OK, I had a drop shadow specified in the control but that is where the story begins. I finish this guy up and it is working beautifully, and the damn customer complains that the pop-ups don't look suave enough. What they really meant was that the pop-ups don't look enough like Mac Windows. Anyways, they requested rounded corners and for the drop shadow to be less opaque and rounded. So, I say ok, hopefully I can just add the following.
<cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
<cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>
Now it doesn't render correctly. One of the divs gets the rounded corner, the position on the page is wrong, and all of the controls and text are missing. Any ideas? I am also open to a better approach to styling the popup.
Ok the RoundedCornersExtender and the DropShadowExtender are obsolesced by CSS3. All you need is border-radius and box-shadow.
Anyhow, the problem with the extenders was that my parent div used relative positioning. It doesn't matter now however, because the CSS3 stuff looks much better and is easier to implement anyways.

Simple Gridview and button problems. I am learning Asp.Net. Please help me out!

I would not say I wasted my time, but spent around few hours changing this. But in vain. Could some one please help me out.
In the following code:
I need to use break in between Disable Location(Title) and the gridview
I want the border color of grid to none. I do not want any color.
I want both the buttons Disable or deactivate and Cancel to be displayed just below the gridview. and in the middle of the page.
<div style="display: block; background: url(images/reusable_blue_bg.jpg) repeat-x 0 -15px;
border-left: #88b9c7 1px solid; border-bottom: #88b9c7 1px solid; border-top: #88b9c7 1px solid;
border-right: #88b9c7 1px solid; padding: 0px 2px; height: 236px; min-height: 236px;
height: auto; margin-left: auto; margin-right: auto;">
<table align="center" style="width: 554px; border-top-style: none; border-right-style: none;
border-left-style: none; border-bottom-style: none" id="TABLE1">
<tr>
<td align="center" colspan="5" style="font-weight: normal; font-size: 20px; margin: 0px;
font-family: Arial; color: #1e7c9b;">
Disable Location</td>
</tr>
I need number 1 over here..
<asp:GridView ID="disableloc" runat="server" AutoGenerateColumns="False" DataKeyNames="LocationName"
DataSourceID="" AllowPaging="True" EnableViewState="true" BorderStyle="None">
i want 2 over here, i guess
</asp:GridView>
I want 3 in here..
<tr align ="center" style="position:fixed">
<asp:ImageButton ID="btnDisable" runat="server" ImageAlign="Middle" ImageUrl="~/images/green-deactivate.gif" OnClick="btnDisable_Click"
ValidationGroup="group1" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/images/cancel.gif" OnClick="btnCancel_Click" />
</tr>
</table>
</div>
Use padding-bottom in the header td style to get the proper spacing.
Use gridlines="None" on the GridView.
Put the Gridview and the buttons in td:s to place them properly.
This is rather basic HTML/CSS knowledge (nothing wrong with that), but investigating basic information sources may help you help yourself.
As to your specific items:
A 'break' can be as simple as a <br /> statement between the controls
if you don't want colors: #88b9c7 and similar-looking statements are colors.
As you're using a table, positioning the buttons below your grid can be done by placing them in the correct <tr> / <td>
For #1, try using margin or padding on the td, or wrap "Disable Location" in a span (or something) and style its margin/padding to give some space.
For #2, try setting Gridlines="None" on the GridView.
For #3, make sure you have a <td> inside the <tr>, and try using text-align:center on either the td or a div wrapping the buttons. Alternatively, don't put it in the table, just wrap them in a div with text-align:center, right under the table (do you need the table at all?)

How can I apply this to a contentPlaceHolder in ASP.net?

#control {
position: absolute;
right: 0px;
top: 0px;
}
You cannot. That's because ContentPlaceHolder does not render to anything on a page.
You can however wrap a div around it and then apply the styles to it:
<div class="control">
<asp:ContentPlaceHolder runat="server" ID="Content" />
</div>
If your intension is to render out a div-element I would suggest that you used the Panel-control instead. You can still add/remove child Controls if you'd like (as with the ContentPlaceHolder).
// In your CSS
.control { position: absolute 0px 0px; }
// In your form
<asp:Panel ID="pnl" Runat="server" CssClass="control" />

Categories

Resources