I have three buttons. It could be more or less (dynamic). Dependent on the rights you have.
When you have a big screen, the buttons are from left to right. When you use a tablet. You will see the buttons among each other.
default look:
tablet look:
I want to show the button at the top right with a curve at the top right. In this example, the last button would have a curve on a computer screen and the first button on a tablet.
How can I dynamically reshape the button? I was thinking of determining what position it is in.
<div class="container">
<ul class="nav col-12 col-md-auto justify-content-left mb-md-0">
<li class="ms-5 mb-5">
<TileButton Title="invoices"
Image="whiteSymbol.svg"
ImageHover="blueSymbol.svg"
Url="/myWebsite/invoices/"
OnClick=#DoAction />
</li>
<li class="ms-5 mb-5">
<TileButton Title="orders"
Image="whiteSymbol.svg"
ImageHover="blueSymbol.svg"
Url="/myWebsite/orders"
OnClick=#DoAction />
</li>
<li class="ms-5 mb-5">
<TileButton Title="purchase orders"
Image="whiteSymbol.svg"
ImageHover="blueSymbol.svg"
Url="/myWebsite/purchaseOrders"
OnClick=#DoAction />
</li>
</ul>
</div>
#code {
[Inject]
private NavigationManager _navigationManager { get; set; }
private void DoAction(string path) => _navigationManager.NavigateTo(path);
}
In the css:
.tilebutton {
color: var(--mycolor);
background-color: var(--mybackground);
display: block;
text-align: left;
border: none;
width: 225px;
height: 225px;
font-size: 1.8em;
padding: 0px !important;
margin: 0px !important;
}
.tilecontainer {
width: 805px;
margin: 0px;
padding: 0px;
border-radius: 0px 50px 0px 0px !important;
-webkit-border-radius: 0px 50px 0px 0px !important;
-moz-border-radius: 0px 50px 0px 0px !important;
}
In the css I added the z-index, which component is showing first.
.tilebutton {
color: var(--mycolor);
background-color: var(--mybackground);
display: block;
text-align: left;
border: none;
width: 225px;
height: 225px;
font-size: 1.8em;
z-index: auto !important;
padding: 0px !important;
margin: 0px !important;
}
.tilecontainer {
width: 805px;
margin: 0px;
padding: 0px;
z-index: 1 !important;
border-radius: 0px 50px 0px 0px !important;
-webkit-border-radius: 0px 50px 0px 0px !important;
-moz-border-radius: 0px 50px 0px 0px !important;
}
And in the container the "menu-items" (where the buttons are showing).
I added overflow-hidden. That was the answer where I was looking for.
<div class="container tilecontainer overflow-hidden">
/* the three buttons */
</div>
i don't know whats wrong but my page doesnt have a scrollbar, when the page exceeds, i cant scroll below it. what seems to be the probblem with my code?
i am new to ASP.NET so yeah, i do not know much yet. thanks in advance!
here is my full aspx page.
<form id="form1" runat="server">
<div style="width:100%;height:100%;overflow:scroll;overflow-y:auto;">
<div class="body">
<div class="pull-right">
<br />
<div class ="dropdown" runat="server">
<asp:Label ID="hideID" runat="server" Text="#" Visible="false"></asp:Label>
<asp:Label ID="lblLogged" runat="server" CssClass="dropbtn" Text="Name" />
<div class="dropdown-content">
<asp:LinkButton ID="btnMain" runat="server" OnClick="btnMain_Click">Main Menu</asp:LinkButton>
<asp:LinkButton ID="btnLogO" runat="server" OnClick="btnLogO_Click">Log Out</asp:LinkButton>
<%--<a id="btnLogOut" runat="server" href="LogIn.aspx">Log Out</a>--%>
</div>
</div>
<%-- Current User: --%>
and here is my CSS, i dont know if its correct
<style type="text/css">
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.body{
position:absolute;
left:24%;
width:800px;
height:400px;
z-index:0;
}
.home{
position:absolute;
top: 200px;
left: 38%;
z-index: 2;
}
.yusenlogo{
position:center;
left:40%;
}
.exist{
position:absolute;
height:10%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.added{
position:absolute;
height:8%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: forestgreen;
border-top:5px;
}
.well2 {
position:absolute;
width:40%;
top: 310px;
left: 30%;
z-index: 2;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
/*background-color: #f5f5f5;*/
/*border: 1px solid #e3e3e3;*/
border-radius: 4px;
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
}
.well3 {
position:absolute;
width:70%;
top: 80px;
left: 13%;
z-index: 2;
}
.buttons{
cursor:default;
}
.banner{
position:absolute;
top: 50%;
left: 50%;
z-index:2;
}
.character{
position:absolute;
height:60px;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.lowerleft {
position: fixed;
bottom:8px;
left:16px;
width:100%;
}
.lowerleftuser {
position: fixed;
bottom:8px;
left:16px;
width:100%;
z-index:1000;
}
.forGridView {
position:fixed;
top:30%;
left:30%;
z-index:1000;
}
.container {
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.dropbtn {
background-color: cornflowerblue;
color: white;
padding: 12px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: cornflowerblue;
}
#txtFrom
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
/*padding: 3.5px 10px;*/
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#txtTo
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
</style>
In your CSS:
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
remove "overflow-y: hidden;"
overflow-y is the vertical scrollbar, this CSS is suppressing it, see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp for more information.
I have created a small CSS, which I wanted to use to make my own styled DropDownList. I don't know if there is some sort of incompatibility and I'm still learning CSS and ASP.net, but when I tried my code in an online CSS tester, it worked perfectly.
.select {
padding: 3px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #212121, 0 -1px #191919 inset;
background: #333;
color: #fff;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
padding-right: 18px;
}
}
label {
position: relative;
}
label:after {
content: '<>';
font: 11px "Consolas", monospace;
color: #fff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 8px;
top: 2px;
padding: 0 0 2px;
border-bottom: 1px solid #ddd;
position: absolute;
pointer-events: none;
}
label:before {
content: '';
right: 6px;
top: 0px;
width: 20px;
height: 20px;
background: #333;
position: absolute;
pointer-events: none;
display: block;
}
This is my DropDownList:
<asp:DropDownList CssClass="select" id="DropPoke1" Width="80" runat="server" AutoPostBack="true" ViewStateMode="Enabled" EnableViewState="true" OnSelectedIndexChanged="DropPoke1_SelectedIndexChanged" />
Unfortunately, this does not work. Have I done something wrong or is it just not possible?
Edit: After adding the following line to my aspx, it worked:
<link href="CustomDropDown.css" rel="stylesheet" type="text/css" />
This is working fine. Please make sure you have properly included style sheet.
IF you are not calling your element by own created classes, you may need to inspect with chrome (or similar) your html.
calling the css by generic tags as "label" often won't work as a asp:Label use to be translated into an html span, not a html label
I have an autocompleteextender in my web application. When the user uses the Up and Down arrows of the keyboard to navigate through the list items, sometimes the item in focus would be outside of the scroll view range. How can I set the listbox to automatically scroll if "most" of the item is not visible in the current scrolling view ?
This is the CSS I apply on the control:
<style type="text/css">
/*AutoComplete flyout */
.completionList {
border:solid 1px #444444;
margin:0px;
padding:0px;
height: 143px;
overflow:auto;
background-color: #FFFFFF;
}
.listItem {
display: block;
padding: 5px 5px;
border-bottom: 1px solid #DDD;
font-size:small;
font-style:normal;
font-weight:400;
}
.itemHighlighted {
background-color: lightgray;
display: block;
padding: 5px 5px;
font-size:small;
border-bottom: 1px solid #DDD;
}
</style>
This is the control:
<ajaxToolkit:AutoCompleteExtender ID="ACSource" runat="server" TargetControlID="txtSource_Type" ServiceMethod="AutoCompleteSourceType" CompletionListCssClass="completionList"
CompletionListHighlightedItemCssClass="itemHighlighted" CompletionListItemCssClass="listItem" MinimumPrefixLength="1"
OnClientItemSelected="SourceTypeSelected" ></ajaxToolkit:AutoCompleteExtender>
I have a file upload control in asp.net like so:
<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />
For some reason the Browse... button does not apply the standard CSS that I have applied to any input[type="button"] controls.
How can I apply the same CSS to the Browse button of that control?
try this
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Browse</div>
some css
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
JS
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
Demo
Since the OP was about ASP.NET and the accepted answer was HTML / javascript, I thought I'd answer it in ASP.NET terms:
ASP.NET portion:
<asp:FileUpload ID="fileUpload" runat="server" style="display:none" />
<input type="button" value="Select your file" id="browse"></input>
JQuery, with jQuery UI for .button() portion:
$("input:button").button();
...
$("#browse").click(function () {
$("#<%= fileUpload.ClientID %>").click();
});
in aspx form:
<div class="fileupload-group">
<button type="button" runat="server" id="btnFileupload" class="btnFileupload btnRed">
Select File <i class="fa fa-folder-open"></i>
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />
</button>
<input type="text" runat="server" id="txtFileuploadName" class="fileupload-name txtRight" readonly="readonly" />
</div>
and in javascript
$('input[id="<%= FileUpload1.ClientID %>"]').change(function () {
var names = [];
var length = $(this).get(0).files.length;
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
if (length > 2) {
$("#<%=txtFileuploadName.ClientID%>").attr("value", length + " selected files");
}
else {
$("#<%=txtFileuploadName.ClientID%>").attr("value", names);
}
});
and in css:
/* txtRight ----------------------------*/
.txtRight {
display: inline-block;
margin-bottom: 3px;
border: 1px solid #CCC;
background-color: #FFF;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
position: relative;
font-weight: normal;
padding: 2px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px #000000;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px #000000;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-ms-box-shadow: inset 0 1px 1px #000000;
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px #000000;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.txtRight:focus {
border-color: #52a8ec;
border-color: rgba(82,168,236,0.8);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-moz-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-ms-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
.txtRight {
font-family: iransans !important;
font-weight: normal !important;
direction: rtl;
text-align: right;
margin-right: 0;
top: 0;
right: 0;
}
.txtRight:disabled {
background-color: #f7f7f7 !important;
}
select.txtRight {
padding: 1px 2px !important;
font-size: 13px !important;
}
/* --------------------------------------*/
/* btnRed ------------------------------ */
.btnRed, a.btnRed {
-ms-text-shadow: none;
text-shadow: none;
background: #ed1c24;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.btnRed:hover, .btnRed:focus, .btnRed, .btnRed:visited, .btnRed:disabled,
a.btnRed:hover, a.btnRed:focus, a.btnRed, a.btnRed:visited, a.btnRed:disabled, a.btnMoulinexRed:link {
border: none;
color: white;
text-decoration: none;
padding: 5px;
font-family: iransans;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.btnRed:hover, .btnRed:hover:enabled, .btnRed:focus, .btnRed:focus:enabled,
a.btnRed:hover, a.btnRed:hover:enabled, .btnRed:focus, a.btnRed:focus:enabled {
background: #830022;
background-color: #830022 !important;
color: white !important;
}
.btnRed:visited, .btnRed:link, /*a.btnRed, */
a.btnRed:visited, a.btnRed:link {
background: #ed1c24;
background-color: #ed1c24;
color: white;
}
.btnRed:active, .btnRed:active:enabled,
a.btnRed:active, a.btnRed:active:enabled
{
background: #e6e6e6 !important;
background-color: #e6e6e6 !important;
color: #333 !important;
}
.btnRed:disabled,
a.btnRed:disabled, a.aspNetDisabled {
color: #333 !important;
background-color: #D6D1D1 !important;
}
/* --------------------------------------*/
/* FileUpload ---------------------------*/
.fileupload-group {
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
margin-top: 3px;
margin-bottom: 8px;
}
.fileupload-group .fileupload-name {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btnFileupload {
display: inline-block;
position: relative;
white-space: nowrap;
width: 17%;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fileupload-group .btnUpload {
width: 15%;
vertical-align: middle;
}
.fileupload-name {
padding: 0;
width: 100%;
white-space: nowrap;
height: 29px;
padding: 4px 12px;
font-size: 14px;
}
.fileupload-name.txtRight {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 0 ;
border-top-right-radius: 0;
-ms-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
display: inline-block;
margin-right: -6px;
}
.fileupload-name.txtRight {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ffaaaa;
}
.fileupload-name.txtRight:disabled {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ccc;
}
.fileupload-group input[type=file] {
display:inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-ms-opacity: 0;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --------------------------------------*/
Make sure to use the latest browser version to run