Develop Reference

How to limit the items to a two items per row using flexbox in asp?

I have an MVC project, where I have two columns. On the left column, I have a buttons grid, and I want to have it maximum to be two buttons per row. Currently, it is 4 buttons per row and I tried flex: 0 1 50% but that didn't work. Currently, it looks like this:
Here is the code for the buttons view inside the left column and the styles:
Grid.cshtml
<div class="linkContainer">
<div class="linkContainer-grid">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<a class="linkContainer-gridItem-link" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div><i class="icon #link.Icon"></i></div>
}
#link.Label
</a>
</div>
}
</div>
Grid.scss
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
text-align: center;
flex-wrap: wrap;
.linkContainer-gridItem {
flex: 0 1 50%;
padding: 20px 10px;
background-color: $colorBrandBlue;
border-radius: 25px;
align-items: center;
justify-content: center;
width: calc(50% - 20px);
margin: 10px 0;
min-width: 100px;
max-width: 130px;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media (min-width: 1024px) {
.linkContainer-grid {
justify-content: center;
.linkContainer-gridItem {
margin: 10px;
}
}
}
}
How can I make it two items per row whilst keeping the buttons the same size and alignments?

First of all, if you set a max-width on your .linkContainer-gridItem, it will display all 4 items in a row, because flex box is trying to put as many items as possible in a row, before it has to wrap.
In order to put 2 items per row, the first step is to remove min-width and max-width. In fact, you can remove width as well because you can control it via flex:.
demo: https://jsfiddle.net/davidliang2008/zv5tsrd1/22/
Now in order to display 2 items per row, you need to set the total item width to be 50%. But the property flex-basis: as well as width: is just meant content width. This might be a good time to review the box model: https://www.w3schools.com/css/css_boxmodel.asp
We need to figure out the correct content width so that the total item width, including borders, paddings and margins, would be 50%:
content width = 50% - borders - paddings - margins
On break point less than 1024px, you have 10px padding left and right, so the content width of the item should be
.linkContainer-gridItem {
flex: 0 1 calc(50% - 2*10px);
}
At break point 1024px and up, you have extra 10px margin left and right, so the content width of the item should be
#media (min-width: 1024px) {
.linkContainer-grid {
justify-content: center;
.linkContainer-gridItem {
flex-basis: calc(50% - 2*10px - 2*10px);
margin: 10px;
}
}
}
demo: https://jsfiddle.net/davidliang2008/zv5tsrd1/27/

Drop-down menu between ul and li tags doesn't appear

Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}

in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}

White space under footer page on website

I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.

Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.

you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.

The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}

Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}

Xpath in IE11 not working

I am using Selenium in IE 11 with C# to automate some task. I am able to open URL in IE and click on some button but i stuck in one problem like other xpath i click on one image link but it always show xpath not found.
Here is the HTML code of the link
I tried it with both ID name src etc but no success.
<li>
<INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close
due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
-
You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: ; BORDER-TOP- WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose>
<li>
Selenium Code
driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).Click();
Please help how could I write xpath for this as this application only open in IE.
here is the extended code with style
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
LI {
margin: 0;
padding: 0;
}
LI {
list-style: none;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
UL {
margin: 0;
padding: 0;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
DIV {
margin: 0;
padding: 0;
}
.TicketDetailHeaderRight {
float: right;
}
.TicketDetailHeader {
margin: 0px;
padding: 0 5px 5px;
min-height: 15px;
}
.SectionBody {
margin: 5px;
}
.Section {
border: 1px solid #000;
}
FORM {
margin: 0;
padding: 0;
}
BODY {
color: #000;
}
BODY {
margin: 0;
padding: 0;
}
BODY {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
font-size: ;
font: x-small;
}
BODY {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
HTML {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
INPUT {
margin: 0;
padding: 0;
}
INPUT {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
</style>
</head>
<BODY><FORM id=formTicketDetail method=post name=formTicketDetail action=wfTicketDetail.aspx?TicketId=C110041540 _events="[object Object]">
<DIV class=Section>
<DIV class=SectionBody>
<DIV class=TicketDetailHeader>
<DIV id=ucTicketDetail1_divBtnBar class=TicketDetailHeaderRight>
<DIV id=ucTicketDetail1_updatePanelPostSaveActions>
<DIV id=ucTicketDetail1_divPostSaveActions class=PostSaveActions>
<UL>
<LI><INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
- You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose> </LI></UL></DIV></DIV></DIV></DIV></DIV></DIV></FORM></BODY>
</html>

i solve this question , actually image button is located under 2 iframe. I switch to Iframe then it start working.
Here is the code
driver.SwitchTo().Frame("wfMainIFrame");
driver.SwitchTo().Frame("wfCaseIFrame");
string atb = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("disabled");
string title = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("title");
Thanks for the help.

Applying css on asp.net FileUpload Control's Browse Button only

I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?

Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle

This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
It's done.

apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html