My current code renders like Picture 1, how can I get the output to render like Picture 2?
I tried to search the web but most of the results I have found show how to do this in css
Pic one,
Pic two,
<ext:Container id="Container1" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 10 0" >
<Items>
<ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Region="East" Height="180" Width="700" Split="true">
<Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
<ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Region="East" Height="180" Width="428" Split="true">
<Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container8" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 0 0">
<Items>
<ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Region="East" Height="265" Width="700" Split="true">
<Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container1" runat="server" Height="700" marginSpec="0 0 0 0" Layout="VBoxLayout" >
<Items>
<ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Height="180" Width="700" Layout="VBoxLayout">
<Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" Height="200">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
<ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Height="248" Width="700" Layout="VBoxLayout">
<Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" Height="700">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container8" runat="server" marginSpec="0 0 0 700" Layout="VBoxLayout" Height="700" Width="430">
<Items>
<ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Height="425" Width="433" Layout="VBoxLayout">
<Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" Height="700" Width="430" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
Did some editing. Found out that need to add in the layout for the panel and the container.
whats the problem with CSS?
do something like this :
.right {
position: absolute;
right: 0px;
}
and then :
<div class="right">
// your html
</div>
instead of creating a .css I would recommend you to use preexisting css like twitter bootstrap css or even a frontend framework which they have function and features that works very well.
With Bootstrap it comes a Grid System where you can place your elements like you want.
Related
this is my html code
<div style="border-style: solid; border-width: thin; height: 809px; width : 50%; float: left; font-size: medium; text-align: center; font-weight: bold;">
Job member<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
PageSize="20" Width="50%">
<Columns>
<asp:CheckBoxField>
<ItemStyle Width="10px" />
</asp:CheckBoxField>
<asp:BoundField HeaderText="User" DataField="user_id" />
<asp:ButtonField HeaderText="View" Text="Button" />
</Columns>
<HeaderStyle Height="20px" />
<RowStyle Width="20px" />
</asp:GridView>
</div>
<div style="border-style: solid; border-width: thin; height: 809px; width : 50%">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
PageSize="20" Width="50%">
<Columns>
<asp:CheckBoxField>
<ItemStyle Width="10px" />
</asp:CheckBoxField>
<asp:BoundField HeaderText="User" DataField="user_id" />
<asp:ButtonField HeaderText="View" Text="Button" />
</Columns>
<HeaderStyle Height="20px" />
<RowStyle Width="20px" />
</asp:GridView>
</div>
</div>
i create 2 div tag within the div tag, and i set the width into 50% so the div tag can appear nicely in the browser, when i deploy to the browser, the appearance is totally loss... i have consider the border thickness issue, the second div tag might pull down because there is some width on the border, so i changed the width into 47% before, in the end the result is still same, may i ask if my way to create this kind of div tag is it correct?
this is how my visual developer looks like
this is how my browser looks like
please help
I have a asp.net grid view,and i want this gridview show center of the div,i write this css and html code:
<div style="color: #FFFFFF;" class='center' >
شرکت هایی که درمعاونت تجاری ثبت نشده اند<br />
<br />
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
</asp:GridView>
</div>
and center css is:
.center {
width:800px;
border-radius: 5px;
width: 60%;
height:200px;
margin: 0 auto;
}
but gridview show this:
how can i solve that?thanks.
Add align="center" in
Like this
<div align="center" style="color: #FFFFFF;" class='center' >
And remove extra style from .center class. You have assigned width 2 time. % and px.
I have a modal dialog that loads an apsx page within it. I've got a table in my aspx page that list some customers. It's working well in Internet Explorer, however when I open it up using Google Chrome, it gives me two scrolls bar and I'm unable to select the item, note that it only happen with the first item, if I have more than two customers a can select by the second one on!
I really have no idea what it can be.
Running in IE.
Running in Google Chrome
CODE:
1. Opening Dialog
var dialogwindow = new Mscrm.CrmDialog(Mscrm.CrmUri.create(webresourceurl), window, 598, 298);
dialogwindow.setCallbackReference(function (result) { alert(result) });
dialogwindow.show();
2. HTML Page to load aspx page
<form id="myForm" runat="server">
<iframe width="590" height="280" id="IFrameCheckList" frameborder="0" scrolling="yes"></iframe>
</form>
3. Aspx page
.record_table {
border-collapse: collapse;
}
.highlight {
background-color: rgb(177, 214, 240);
}
<form id="form1" runat="server">
<div>
<asp:Table ID="MainTable" class="record_table" runat="server">
<asp:TableRow BackColor="White">
<asp:TableCell CssClass="Titulo" Width="10px">
<label></label>
</asp:TableCell>
<asp:TableCell CssClass="Titulo" Width="250px">
<label>Proponente</label>
</asp:TableCell>
<asp:TableCell CssClass="Titulo" Width="130px">
<label>Tipo de Participação</label>
</asp:TableCell>
<asp:TableCell CssClass="Titulo" Width="90px">
<label> Participação</label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
<asp:Button CssClass="ConfirmButton" Style="padding: 0 0 0 0; border-radius:5px" ID="btnConfirmar" Text="Confirmar" runat="server" OnClientClick="btnConfirmarOnClick(); return false;" />
</form>
I have a gridview which headers I want to align to the left.
It works in chrome, but in IE 9 they are not aligned to the left.
(I paste the entire code, in case some surrounded div is responsible of this behavior.)
<div style="height: 300px; overflow: auto">
<asp:GridView ID="myGrid"
AutoGenerateColumns="true"
runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left"/>
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<So![enter image description here][1]rtedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</div>
<div style="margin-top: 20px; margin-left: 550px">
<asp:Button ID="btnClose" runat="server" Text="Close" />
</div>
<div>
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</div>
Update1: CSS
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child{
background-color:#eb8c00 !important;
color:#FFF !important;
}
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child td{
text-align:left;
}
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr{
color:#404041 !important;
}
This works. Add a 'CssClass' to your HeaderStyle:
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" CssClass="headerClass" />
And then declare the following style:
/*Give a text-align left only to the gridview header th's*/
.headerClass > th
{
text-align:left;
}
To explain a little further, what will happen is HeaderStyle.CssClass will give a class to the <tr> containing your header. The CSS selector .headerClass > th applies its style then to all children <th> of your header, therefore applying the left text align to each header cell.
Cant you just put
table th {text-align:left;}
In your CSS?
Or am I missing something?
You cannot align left on a tr.
td or th however, will work.
In any case I would suggest doing this with a css class or with the th in your css file.
.myLeftAlign {
text-align: left;
}
or
th {
text-align: left;
}
If you do not want to use css, put the Align attribute on your th in stead of your tr
I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK