Why won't these buttons center and side-by-side?
These stack side-by-side but all the way to the left.
And the red border is a 2px solid line. The button seems to be directly under the red border line. The buttons should be in the border.
I can get the buttons to center, but then they stack, one on top of the other.
I either get one stacked on top of the other and centered
-or-
side-by-side and all the way to the left.
Another note, if it matters. This is on a cshtml c#.net page that includes bootstrap inside the:
#using (Html.BeginForm("frmUpdate", "Mdl", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
. more of the page added below for clarity
<div style="float:left; width:100%;">
#using (Html.BeginForm("frmUpdate", "Mdl", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
<div style="float:left; width: 50%; border:1px solid black;">
.. left half ~ numerous controls ....
</div>
<div style="float:left; width: 50%; border:1px solid red;">
.. right half ~ numerous controls ...
</div>
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<div style="float:left; position:relative">
<input type="submit" value="Save" />
</div>
<div style="float:left;">
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>
}
You can use FlexBox to center elements inner other element.
Set at parent display: flex; flex-direction: row; justify-content: center, and sons centers automatically
<div style="display:flex; justify-content:center; width:100%; border:1px solid red; text-align:center;">
<div>
<input type="submit" value="Save" />
</div>
<div>
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>
Because you are using floats, the parent doesn't pay attention to the height of the buttons. So your 2px red line is just the border around a 0 height div.
Do you need to use floats? If you just make the divs display:inline-block you can solve the height and centering.
<div style="width:100%; border:1px solid red; text-align:center;">
<div style="display:inline-block">
<input type="submit" value="Save" />
</div>
<div style="display:inline-block">
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
https://jsfiddle.net/hy9nswyg/
You can simply remove them from their floating divs, as the floating block elements are messing up your centering, here.
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<input type="submit" value="Save" />
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
Dont know which one actually correct for you live fiddle
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<div style="display:inline-flex; ">
<input type="submit" value="Save" />
</div>
<div style="display:inline-flex; ">
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>
<div style=" margin:20px;"></div>
<!--only for space -->
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<div style="display:inline-flex; ">
<input type="submit" value="Save" />
</div>
<div>
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>
At the end of the day Alejandro's is the most succinct. All answers are appreciated and all are very nearly the same. Any down sides to Alejandro's? I made both the left & right of the top page portion statically height setting (didn't really want to but was compelling) and some padding. how looks just about as i wanted.
Related
I am a just starting out with Puppeteer.NET, and i can't get it to autofill a login page.
The HTML for the web site looks like this:
<div class="main-wrapper">
<div class="row">
<div class="column section col-md-8">
<div class="loginForm">
<img src="images/logo.svg" width="300">
<br /><br /><br />
<div style="color: #454550; font-family: 'Neuzeit Grotesk'; font-size: 16px; ">
Welcome back
</div>
<br />
<form action="/login?app=LM&var=au" method="POST" name="login-form" id="login-form">
<input type="hidden" name="_csrf" value="BQ2YoR3d-5P__6b5HfqlVOjv8YgTypKV92XA" />
<div class="form-group text-center">
<input type="text" name="username" id="login-form-username" placeholder="Username" class="form-control" required value="">
</div>
<div class="form-group text-center">
<input type="password" name="password" id="login-form-password" placeholder="Password" class="form-control" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
</div>
</form>
<div style="color: #808083; margin-top: 30px; font-family: 'Roboto2';">
Trouble logging in?
<img src="images/grey_line.svg" width="300">
Sign up
</div>
</div>
<div style="text-align: center; width:400px;">
<img src="images/logo.svg" width="300">
</div>
</div>
<div class="column section col-md-4">
<iframe width="100%" height="100%" frameBorder="0" src="https://"></iframe>
</div>
</div>
</div>
I am trying to get it to fill in the login and password fields, and press the login button.
I am doing it as:
var extra = new PuppeteerExtra();
var stealth = new StealthPlugin();
LaunchOptions options = new LaunchOptions
{
Headless = false,
ExecutablePath = "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
};
Browser browser = extra.Use(stealth).LaunchAsync(options).Result;
string content = null;
using (Page page = browser.NewPageAsync().Result)
{
// do login screen
page.GoToAsync(url);
page.WaitForNavigationAsync();
page.WaitForSelectorAsync("username");
page.FocusAsync("username");
page.Keyboard.TypeAsync(login);
page.WaitForSelectorAsync("password");
page.FocusAsync("password");
page.Keyboard.TypeAsync(password);
page.ClickAsync("submit");
page.WaitForNavigationAsync();
content = page.GetContentAsync().Result;
}
I have tried changing the "username" to "#username" and some other variations, but nothing gets filled in. Ultimately, all I want to to login and then go to a specific page, and have a dump of the resultant HTML.
Also is there a easy way to just a text dump of the resultant HTML?
You can use the selectors #login-form-username and #login-form-password, those are the IDs.
I want to make the div a standard size of 330px. But when I do it, the elements in the div will get screwed up.
<div class="col-md-3 m-wthree" style="height:330px;">
<div class="col-m">
<a href="#" data-toggle="modal" data-target="##item.id" class="offer-img">
<img src="#item.productImage" class="img-responsive" alt="" style="width:auto;height:124px;">
<div class="offer"><p><span>Offer</span></p></div>
</a>
<div class="mid-1">
<div class="women">
<h6>#item.productName</h6>
</div>
<div class="mid-2">
<p><label>$#item.productOriginalPrice</label><em class="item_price">$#item.productCurrentPrice</em></p>
<div class="clearfix"></div>
</div>
<div class="add">
<button class="btn btn-danger my-cart-btn my-cart-b " data-id="#item.id" data-name="#item.productName" data-summary="#item.productName" data-price="#item.productCurrentPrice" data-quantity="1" data-image="#item.productImage">Add to Cart</button>
</div>
</div>
</div>
</div>
Problem
With % as height
.m-wthree {
width: 50%;
float: left;
margin-bottom: 2em;
}
.add{
text-align:center;
}
.mid-2 p{
float:left;
font-size:0.9em;
color:#B4B4B4;
}
.mid-2 p em{
font-style:normal;
}
.mid-2 p label{
text-decoration: line-through;
font-weight:400;
margin-right:6px;
}
.mid-2 {
padding: 1em 0;
}
Above is the CSS code for the custom CSS. The CSS all seem ok and does not look like it is affecting anything....
I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.
Index View:
<div class="col-md-4 w3_agileits_features_grid">
<div class="agileits_w3layouts_features_grid">
<div class="col-xs-4 agileits_w3layouts_features_gridl">
<div class="agile_feature_grid">
#* <i class="fa fa-gift" aria-hidden="true"></i>
</div>*#
<i class="fa fa-gift" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-8 agileits_w3layouts_features_gridr">
<h4>Who uses GiftWorx</h4>
<p>See who uses GiftWorx and more.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
GiftWorxView
<div class="why-convertible-box" id="GiftWorxUsers">
<div class="container" id="GiftWorxUsers">
<h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
</div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
<div class="row">
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
</div>
</div>
This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:
#{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
Then on your Index View, put this on your a href link:
<div class="agile_feature_grid">
<a href='#strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.
Bootstrap has the following CSS:
.form-horizontal .control-label {
float: left;
width: 160px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 180px;
*margin-left: 0;
}
It makes my form look like this:
The labels are way off to the right.
Here is how I build the form:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="kez_header">
<table class="style1">
<tr>
<td>
<h4> Add Group
</h4>
</td>
<td align="right" valign="middle">
</td>
</tr>
</table>
<div id="new_group_view" class="form-horizontal">
<form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
<div class="control-group">
<label class="control-label control-label-me required" for="fos_user_registration_form_email" placeholder="Email">Email:</label>
<div class="controls">
<input id="fos_user_registration_form_email" class="text-style" type="email" placeholder="Email" required="required" name="fos_user_registration_form[email]">
<div placeholder="Password" id="fos_user_registration_form_plainPassword"></div>
</div>
</div>
<div class="control-group">
<label class="control-label required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label>
<div class="controls">
<input type="password" required="required" name="fos_user_registration_form[plainPassword][Enter Password: ]" id="fos_user_registration_form_plainPassword_Enter Password: " class="text-style">
</div>
</div>
<div class="control-group">
<label class="control-label required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label>
<div class="controls">
<input type="password" required="required" name="fos_user_registration_form[plainPassword][Verify Password: ]" id="fos_user_registration_form_plainPassword_Verify Password: " class="text-style">
</div>
</div>
</form>
</div>
</div>
</asp:Content>
How can I get this normal so that the labels start more like here:
http://bootstrap.stage42.net/doc/forms
Thanks
.form-horizontal .control-label width specifies the "how far would be last character of the label text from the left side of the parent container".
.form-horizontal .controls margin-left specifies the "how far would be left border of the field from the left side of the parent container".
This is simplified explanation but should give you enough understanding to take control over your styles.
So you should adjust .form-horizontal .control-label width and .form-horizontal .controls margin-left values proportionally, to move fields and labels inside the container. Proportionally because "space" between label and field should be preserved. Here is example:
.form-horizontal .control-label {
float: left;
width: 120px; /* changed from 160px to 120px */
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 140px; /* changed from 180px to 140px */
*margin-left: 0;
}
I have the buttons rendering and here is the output:
<form action="/Auth/LogOnPostAssertion" method="post" target="_top">
<input name="__RequestVerificationToken" type="hidden" value="M+ZFyksulpHW8asKultS/Y53gRs6eEli13rjL76+tc40ZB4WUbxAIpVMtsMnyGI2hXZ54DwyFypx/0UBlZqR+U7F/ALJRHiIGU9dCJpiohZHrlVEYZMgsF9HB14wruRia5A7jOidi4DlyfRriMjGrn63RMMJlLLHWIq5duSUiR4=" /><input
id="ReturnUrl" name="ReturnUrl" type="hidden" value="" /><input id="openid_openidAuthData"
name="openid_openidAuthData" type="hidden" value="" />
<div id="login-oauth-container">
<ul class="OpenIdProviders">
<li id="https://me.yahoo.com/" class="OPButton"><a href="#">
<div>
<div>
<img src="/Content/images/yahoo.gif" /><img src="http://www.google.com/" class="loginSuccess"
title="Authenticated as {0}" />
</div>
<div class="ui-widget-overlay">
</div>
</div>
</a></li>
<li id="https://www.google.com/accounts/o8/id" class="OPButton"><a href="#">
<div>
<div>
<img src="/Content/images/google.gif" /><img src="http://www.google.com/" class="loginSuccess"
title="Authenticated as {0}" />
</div>
<div class="ui-widget-overlay">
</div>
</div>
</a></li>
<li id="OpenIDButton" class="OpenIDButton"><a href="#">
<div>
<div>
<img src="/Content/images/openid.gif" /><img src="http://www.google.com/" class="loginSuccess"
title="Authenticated as {0}" />
</div>
<div class="ui-widget-overlay">
</div>
</div>
</a></li>
</ul>
<div style='display: none' id='OpenIDForm'>
<span class='OpenIdAjaxTextBox' style='display: inline-block; position: relative;
font-size: 16px'>
<input name='openid_identifier' id='openid_identifier' size='40' style='padding-left: 18px;
border-style: solid; border-width: 1px; border-color: lightgray' />
</span>
</div>
<div class="helpDoc">
<p>
If you have logged in previously, click the same button you did last time.
</p>
</div>
</div>
</form>
it has the webresource css too.
However, clicking on the buttons does nothing. on the nerddinner sample it obv pops up the login box for the provider you select.
what do i need to do to make this work? is there a checklist of things i need to be aware of?