I have nested divs, I have to show it in same row please help me.
Also tell me how to show the progress bar in the place of label id = "remainingcount" while processing.
Here is my code:
<div class="listbox">
<asp:Label ID="headertext" runat="server" CssClass="labelresul" Font-Bold="true" Height="50" Text="Available Filter"></asp:Label>
<span style="padding-left:10px;font-weight:700;">
<asp:HiddenField runat="server" ID="hdCount" />
<asp:Label ID="Total" runat="server" Height="50"></asp:Label>
</span>
<span style="padding-left:5px;font-weight:700;">
<asp:Label runat="server" ID="match" Visible="false" Text="Matches"></asp:Label>
<asp:Label ID="remainingcount" ForeColor="Red" Visible="false" runat="server"></asp:Label>
<asp:Label ID="remaining" runat="server" ForeColor="Red" Text="Results" Visible="true"></asp:Label>
</span>
<div id="divv">
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="updFilters" runat="server" >
<ProgressTemplate>
<center>
<asp:Panel ID="resultspanel" runat="server">
<img alt="Processing" src="Images/waiting_process.gif" />
</asp:Panel>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
Set both Div style as
.DivStyle{
Display: Inline-block;
}
add this property to both
HTML content :
<div class='container'>
<div class="align-left">left</div>
<div class="align-right">right</div>
</div>
Style as shown below
.container {
width:100%; }
.align-left {
float: left;
width:50%;
}
.align-right{
float: right;
width:50%
}
Set float for the div.
float:left
1st Way
You can use display: inline to put the two div elements inline.
Explanation: div elements are block elements, so their display style is usually display: block.
#box1 {
width: 1005px;
height: 1000px;
padding: 50px;
border: 1px solid red;
margin-left: 162px;
background-color: white;
}
#box2{
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
#box1, #box2
{
display:inline;
}
<div id="box1">
</div>
<div id="box2">
</div>
2nd way
You can wrap both the div elements in a span tag.
Explanation: span works the same way as the div, to organize and group elements. The only difference is that span is an inline element, so styling the span will not be needed. The display style of the span element is usually display: inline.
.box2 {
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
<span>
<div class="box2">
</div>
<div class="box2">
</div></span>
Note: If the span doesn't work, it means that the content of your div tags cannot fit on one line. You are going to need to resize your div tags if that happens.
Sorry, I used my own example, but if you find the snippets confusing, please ignore them. Thank you for reading my answer! It took quite some time to write this and I hope you find this helpful!
also you can do it with
----CSS----
.main-div{
display: grid;
grid-template-columns: repeat(2, 1fr)
}
----HTML----
<div class="main-div">
<div/>
<div/>
</div>
Related
I'm having a bit of trouble with an xpath select.
I'm currently using C# and Selenium
I'm trying to overcome a problem whereby I need to select a checkbox within a generated table while only knowing a line of text in a preceding-sibling Div. All ID's can change as they are randomly generated.
I want to select class="jqx-checkbox-check-checked" while only knowing the text "testdata"
<div role="row" style="position: relative; height:28px;" id="row1jqxgrid">
<div role="gridcell" style="left: 0px; z-index: 790; width:30px;" class="jqx-grid-cell jqx-item jqx-grid-cell-alt jqx-grid-cell-selected jqx-fill-state-pressed">
<div style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; overflow: visible; cursor: auto;" id="jqxWidget3af6ac8d" tabindex="0" class="jqx-widget jqx-checkbox">
<div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
<div style="width: 13px; height: 13px;"><span style="width: 13px; height: 13px;" class="jqx-checkbox-check-checked"></span></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div role="gridcell" style="left: 30px; z-index: 789; width:25px;display: none;" class="jqx-grid-cell"></div>
<div role="gridcell" style="left: 30px; z-index: 789; width:200px;" class="jqx-grid-cell jqx-item jqx-grid-cell-alt jqx-grid-cell-selected jqx-fill-state-pressed">
<div class="jqx-grid-cell-left-align" style="margin-top: 6px;"><a id="id_01" href="/test/testing?id_01=199">testdata</a></div>
</div>
</div>
You can try to select the row that contains anywhere the string testdata and in that row select the div with the needed class.
A first try would be:
//div[#class='row'][.//div[text()='testdata']]//span[#class='jqx-checkbox-check-checked']
This would be the simplest way.
You can select element with testdata, go to ancestor div and then go to span that you need:
//*[text()='testdata']/ancestor::div[#role='row']//span
You can also specify calss or part of the class of the span you need:
//*[text()='testdata']/ancestor::div[#role='row']//span[contains(#class,'checked')]
//*[text()='testdata']/ancestor::div[#role='row']//span[#class = 'jqx-checkbox-check-checked']
The HTML code for this form (left hand side) is like below.
<div class="lp-element lp-pom-form" id="lp-pom-form-410">
<form action="#" method="POST">
<div class="lp-pom-form-field clearfix" id="container_name">
<input type="text" id="name" name="name" class="text form_elem_name" placeholder="Name">
</div>
<div class="lp-pom-form-field clearfix" id="container_email">
<input type="text" id="email" name="email" class="text form_elem_email" placeholder="Email">
</div>
</form>
<a class="lp-element lp-pom-button" id="lp-pom-button-411" href="#"><span class="label">GET MY DEMO</span></a>
</div>
I am trying to convert it to aspx and the back-end code for it into vb.net shown below.
<form id="form1" runat="server">
<asp:Panel runat="server" ID="uxForm">
<div class="lp-pom-form-field clearfix" id="container_name">
<asp:TextBox ID="uxName" runat="server" CssClass="text form_elem_name" placeholder="Name" />
</div>
<div class="lp-pom-form-field clearfix" id="container_email">
<asp:TextBox ID="uxEmail" runat="server" CssClass="text form_elem_email" placeholder="Email" />
</div>
</asp:Panel>
</form>
The problem is that I cannot convert the get my demo button in to asp button.
I have tried the following:
<asp:LinkButton runat="server" ID="btnSave" CssClass="lp-element lp-pom-button" Text="Get My Demo" />
but it just become invisible like the picture (right hand side form)
I have also tried
<a class="lp-element lp-pom-button" id="save" runat="server"><span class="label">GET MY DEMO</span></a>
But then also the button goes invisible and the text get my demo is in the name field as shown in the 2nd picture.
What has gone wrong and how can I correct it? the button goes invisible..even without css class
For your information I have not created the vb.net codes yet. Could that be the issue?
CSS
#lp-pom-button-411 {
display:block;
border-style:none;
behavior:url(/PIE.htc);
border-radius:9px;
left:0px;
top:251px;
z-index:16;
width:348px;
height:50px;
position:absolute;
background-color:#f7941d;
background:-webkit-linear-gradient(#fd494b,#fb2c2f);
background:-moz-linear-gradient(#fd494b,#fb2c2f);
background:-ms-linear-gradient(#fd494b,#fb2c2f);
background:-o-linear-gradient(#fd494b,#fb2c2f);
background:linear-gradient(#fd494b,#fb2c2f);
box-shadow:inset 0px 1px 0px #ff9697,inset 0 -1px 2px #c72325;
text-shadow:1px 1px #7a0404;
-pie-background:linear-gradient(#fd494b,#fb2c2f);
color:#fff;
border-width:undefinedpx;
border-color:#undefined;
font-size:25px;
line-height:30px;
font-weight:bold;
font-family:Raleway;
text-align:center;
background-repeat:no-repeat;
}
.button{
display: inline-block;
padding: 17px 34px;
border: 3px solid #fff;
color: #fff;
font-size: 22px;
font-weight: bold;
text-decoration: none;
height: 52px;
width: 123px;
font-family: 'Lato', sans-serif;
background: red;
background: -webkit-linear-gradient(#fe4d4f, #fb2d2e);
background: -o-linear-gradient(#fe4d4f, #fb2d2e);
background: -moz-linear-gradient(#fe4d4f, #fb2d2e);
background: linear-gradient(#fe4d4f, #fb2d2e);
margin-left: 49px;
text-shadow: #000000 1px 0px 1px;
}
.button:hover{
background: red;
background: -webkit-linear-gradient(#f13839, #ee2526);
background: -o-linear-gradient(#f13839, #ee2526);
background: -moz-linear-gradient(#f13839, #ee2526);
background: linear-gradient(#f13839, #ee2526);
}
picture 3
Try this:
<asp:LinkButton runat="server" ID="btnGetDemo" CssClass="lp-element lp-pom-button lp-pom-button-411"><span class="label">GET MY DEMO</span></asp:LinkButton>
My guess is that the "label" class on the span has something to do with it.
EDIT:
I changed the LinkButton markup a bit AND do change the CSS aswell to:
.lp-pom-button-411 {
display:block;
border-style:none;
behavior:url(/PIE.htc);
border-radius:9px;
left:0px;
top:251px;
z-index:16;
width:348px;
height:50px;
position:absolute;
background-color:#f7941d;
background:-webkit-linear-gradient(#fd494b,#fb2c2f);
background:-moz-linear-gradient(#fd494b,#fb2c2f);
background:-ms-linear-gradient(#fd494b,#fb2c2f);
background:-o-linear-gradient(#fd494b,#fb2c2f);
background:linear-gradient(#fd494b,#fb2c2f);
box-shadow:inset 0px 1px 0px #ff9697,inset 0 -1px 2px #c72325;
text-shadow:1px 1px #7a0404;
-pie-background:linear-gradient(#fd494b,#fb2c2f);
color:#fff;
border-width:undefinedpx;
border-color:#undefined;
font-size:25px;
line-height:30px;
font-weight:bold;
font-family:Raleway;
text-align:center;
background-repeat:no-repeat;
}
You are not create button event, create button evetn like this and try:
<asp:button id="btnSave" runat="server" Text="Get My Demo" CssClass="lp-element lp-pom-button" onclick="btnSave_Click">
Use this:
<form id="form1" runat="server">
<asp:Panel runat="server" ID="uxForm">
<div class="lp-pom-form-field clearfix" id="container_name">
<asp:TextBox ID="uxName" runat="server" CssClass="text form_elem_name" placeholder="Name" />
</div>
<div class="lp-pom-form-field clearfix" id="container_email">
<asp:TextBox ID="uxEmail" runat="server" CssClass="text form_elem_email" placeholder="Email" />
</div>
<asp:Button ID="btnSave" runat="server" Text="Get My Demo" CssClass="lp-element lp-pom-button" />
</asp:Panel>
</form>
I'm trying to figure out something here but not sure whether it's good code practice or if it's possible or not.
I want to change a position of a table cell dynamically.
This is the current code.
<td style="padding-top: 12px; vertical-align: top;" runat="server" id="HomeScreen">
<div class="uc-home-head" style="width: 254px; height: 30px; background: transparent url('/images/home_totalHeader_twitter.png');
margin-bottom: 15px; font-weight: bolder;">
<div style="padding-left: 5px; float: left; margin-top: 10px;"><div style="line-height:10px;">INKWRX Updates</div>
</div>
</div>
<div style="clear: both;">
</div>
<a data-widget-id="345496112829980672" width="254px" data-chrome="noheader nofooter transparent"
class="twitter-timeline" href="https://twitter.com/destinywireless" data-show-replies="false"></a>
</td>
if (CurrentUser.HomeScreenReport)
{
ucErrors.Parent.Controls.Remove(ucErrors);
ActivityBar1.Parent.Controls.Remove(ActivityBar1);
tblTable1.Controls.Remove(tblTable1.Rows[0]);
HomeScreen.Style.Add("bottom", "80px");
}
After removing the controls, I want to re-position the table cell.
When I add style="position: absolute;" in the HTML style and HomeScreen.Style.Add("bottom", "80px"); in c#, the whole row messed up.
Thank you.
Ive been trying to auto login to a javascript based site using a c# webBrowser form,
after a bit of searching I came up with how to auto fill the username and password:
webBrowser1.Document.GetElementById("email Id").InnerText = "email";
webBrowser1.Document.GetElementById("password Id").InnerText = "password";
but I just couldnt find how to auto click the "enter" button.
ive tried using the same method as the auto fill with the invoke option:
webBrowser1.Document.GetElementById("btn").InvokeMember("click");
but it didnt work, so here's some of the site's source code
(a small prtion, showing the login form section)
</a>
<form id="login" name="login" action="index.php?sendPass=true" method="post" style="margin: 0; padding: 0; position: relative">
<div style="text-align: right; margin-right: 10px; margin-top: 0; padding-top: 0;">
<div style="font: 12px arial; margin: 0; text-align: center"></div>
<img src="new1/login_title_ido.jpg" alt="" />
<div style="margin:0px; margin-bottom:10px">
<div style="font: 12px arial; margin: 0px">דוא"ל :
<input type="text" name="email" class="loginInput" value="" dir="ltr" /></div>
<div style="font: 12px arial; margin-top: 1px">סיסמה:
<input type="password" name="pass" class="loginInput" style="margin-right:1px;margin-top:1px" value="" dir="ltr" /></div>
<a onmouseover="this.style.cursor='pointer';" onclick="alert('הכנס דואר אלקטרוני \n ולחץ על כפתור הכנס ');"><u>שכחתי סיסמה</u></a>
<input type="image" src="new/login.jpg" align="middle" style="margin-right: 25px;" />
</div>
<div style="color: #000000; padding-top:3px; direction:rtl">
</div>
</div>
</form>
I just cant seem to pinpoint the "enter" button id, any ideas?! or perhaps theres other ways to invoke the "enter" button?
You are simulating click event correctly, but I don't see any input on the form with id="btn".
Simply try to add it in your markup like this:
<input id="btn" type="image" src="new/login.jpg" align="middle" style="margin-right: 25px;" />
EDIT:
If you don't have access to source you could try something like this:
var forms = webBrowser.Document.All.GetElementsByName("login");
var form = forms[forms.Count - 1];
if(form.TagName.Equals("FORM"))
{
form.InvokeMember("Submit");
}
I have looked at:
The resizable control,
and this forum link,
all without finding the proper resolution.
I have a page (without a master page) that has 2 columns. Once column houses a menu structure, and the other a PDF viewer.
I want to be able to hide the menu, and expand the PDFviewer to the full page.
Unfortunately, I currently only have the Hide() option working.
Here is some code:
Style Sheet.css
body {
}
.wrapper {
margin: 0 auto;
}
.left {
width: 25%;
float: left;
background: #f4f4f4;
overflow: hidden;
}
.right {
width: 75%;
float: right;
margin-top: -20px;
padding-top: -20px;
}
Default.aspx
<div class="wrapper">
<div runat="server" id="left" class="left">
<div style="padding-top: 10px">
<asp:Label runat="server" Text="File List" Font-Size="20px" Font-Bold="True"></asp:Label>
- <a id="uploadLink" href="Upload.aspx">Upload</a>
<br />
<br />
<!-- Menu structure -->
</div>
</div>
<div class="right" id="right">
<a id="showh1">+</a>
<a id="hideh1">-</a>
<div style="border: 1px solid grey;">
<iframe runat="server" id="pdfHolder" width="100%" seamless="seamless" title="Doc"></iframe>
</div>
</div>
<asp:Label runat="server" ID="lbltest" Text=" ---- " Visible="False"></asp:Label>
</div>
Javascript snippet on Default.aspx
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
});
});
</script>
How can I correctly do this?
Try this:
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
$('div.right').css("width", "100%");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
$('div.right').css("width", "75%");
});
});
</script>