I have asp.net buttons rendered on the browser which are in different lines. I assume this Text- Empty text node is because of that. Since buttons are displayed in different lines, on the all the browsers I noticed a small space. How can I clear this? I dont have any css that adds this space.
If I remove the line spacing in the editor. I dont see any space, but i can't do it because of the formatting the code.
<asp:Button runat="server" ID="btnButton1" text = "Button1"/> <asp:Button runat="server" ID="btnButton1" text = "Button1"/>
If you want the buttons to be positioned next to each other, with no space in between them, you can consider using the CSS float rule:
<div style="overflow: auto">
<asp:Button runat="server" style="float: left" ... />
<asp:Button runat="server" style="float: left" ... />
</div>
The <div> element will contain both buttons, and any elements after it will be on a new line. The buttons inside the <div> will move as far left as possible, and no space will exist between them.
Demo (not ASP.NET, but works just as well): http://jsfiddle.net/vDWCn/1/
Related
I'm trying to achieve this layout with a report viewer.
The panel on the left contains various options for the report. On the right is the report itself. The report component scrolls if needed but the webpage itself doesn't. Pretty standard asp.net report page. Or so I though.
The layout itself I can do it easily, there's plenty of documentation on how to get this result and they work without the report viewer. However the report viewer isn't cooperating at all and doesn't seem to follow any logic when I add it.
I can make 2 divs be side by side. I can make the report's parent div take all the available height. I cannot get the report viewer to do both and keep working properly. What kind of ungodly CSS do I need to get the layout I want? I don't mind using a table instead of divs but I didn't get any better result with a table.
Most of my attempts end up looking like either of these:
The report shows up where it should be and the width is fine, but I can't get it to take all the available height. If I set an height in pixels it can get taller just fine but I want it to take all the remaining vertical space, no matter the window size and resolution. It always disregard any kind of relative height values.
Or
It takes all the available height, but refuses to stay next to the options.
And so here's the base structure I have. As mentionned before it could use a table instead, I don't mind.
<style type="text/css">
.reportContainer {
}
.reportOptions {
}
.reportView {
}
</style>
<div class="reportContainer">
<div class="optionSidebar">
<table id="reportOptions">
<!--the options -->
</table>
</div>
<div class="reportView">
<rsweb:ReportViewer ID="theReportViewer" runat="server"
ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
KeepSessionAlive="False" ZoomMode="PageWidth"
Width="100%" Height="100%" />
</div>
</div>
How do I get a Microsoft.ReportViewer.WebForms report viewer to both take all the available vertical space and stay next to the options panel without making the page scroll?
Set surrounding div to height 100vh
<div class="reportView" style="height: 100vh;">
<rsweb:ReportViewer ID="theReportViewer" runat="server"
ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
KeepSessionAlive="False" ZoomMode="PageWidth"
Width="100%" Height="100%" />
</div>
Image button tooltip is showing as text in chrome
<asp:ImageButton ID="btnHelp" runat="server" AlternateText="" ToolTip="Help" />
Here Help is showing as a text.
The closest I can get to the correct behavior is by setting AlternateText to a space:
<asp:ImageButton ID="btnHelp" runat="server" AlternateText=" " ToolTip="Help" />
By the way, the behavior in Firefox is even more interesting: when AlternateText is empty, some text is displayed but I have no idea where it comes from. As is the case for Chrome, setting AlternateText to a space solves the problem.
I have a div area like the following in my .aspx program.
<div id="valueIntroduction" type="text" class="labelarea" runat="server">
</div>
<div class="line"></div>
<asp:Button ID="editButton" runat="server" Text="Edit" />
Currently the div valueIntroduction is getting data from database. I have a Edit button in my program. When i press Edit button I am trying to change the div to text box.
Try this..
1.Add a textbox and make visible="false"
2.when clicking edit button copy the div's contents to the textbox and make div invisible by using visibility:"hidden".
3.Set the textbox visibility to true.
Try putting an invisible textbox below your div, then when you click the edit button, transfer the contents of the div into the textbox, make the textbox visible and the div invisible.
On my jQuery - Dialog I have a form with multiple form fields. There I have a link to add "Attributes". Now I want to have this on the left side of the dialog and on the same line like the submit button. The div "somediv" must be an inline-element.
How can I achieve that?
jsFiddle - http://jsfiddle.net/Auzx6/
(Please expand the "Result" frame a lot.)
Thank you very much!
Adding a <br clear="all" /> before the div actions (<div class="actions">) should make the trick.
The clear="all" will clean all the previous floats.
Then if you want it on the left side just add this css rule "text-align: left" on that div.
I've got a tree view that can be anywhere from 1 level deep to nearly 6. Each node can be just a few letters or a couple of words totalling up to 20-30 characters.
How do I find the largest width of one of the node's text and add its depth offset to set the width of the treeview so it doesn't go through my borders?
If I need to add more info, let me know.
Edit:
Here's what I've currently got. I need to set the width of the panelLocations on page load so the tree view can load correctly inside of it.
<asp:Panel ID="panelLocations" runat="server" style="position:absolute;border:solid 1px #E0E0E0;padding:10px 5px 5px 10px;background-color:#F7F7F7;width:350px;display:none;" >
Search: <asp:TextBox ID="textboxLocationSearch" runat="server" AutoCompleteType="disabled" ToolTip="To find a store, type the 4 digit store number (e.g. 0001)" />
<asp:Button ID="buttonFindLocation" runat="server" Text="Find" OnClick="buttonFindLocation_Click" OnClientClick="LocationSelected();" style="width:60px;"/>
<input type="button" value="Cancel" onclick="HideLocations();" style="width:60px;"/>
<hr />
<asp:TreeView ID="TreeViewLocations" runat="server" OnSelectedNodeChanged="TreeViewLocations_SelectedNodeChanged" NodeIndent="10"></asp:TreeView>
</asp:Panel>
Since web browsers will render the content differently, your only option to find out the real width of the content is to use javascript to traverse the DOM elements and measure the width.
The cleanest and simplest solution is to specify a suitably large width for the container element, then specify a value of overflow:scroll to allow extra-wide content to be scrolled. It's pretty ugly to see scroll bars around elements in the page, but when you're using a tree-view structure, ugly is something you live with.
You can take advantage of the MeasureText method, in Graphics namespace. Basically it gives you back the size of a string supposed to be rendered in a certain font and size. Given a constant width for every intentation level (you know, tree lines, buttons/icons: you can measure it statically), you can assume needed width will be the largest of:
measuredText + (level * indentationWidth)
HTH!