Develop Reference

How do I dynamically determine in Blazor that one button has a different shape?

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>

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;
}

How to make a white popup text box appear after clicking a button?

so right now, I have many buttons on a webpage. Most of these buttons contain one url which when clicked directly sends you to the webpage with the url. Some buttons, however, consist of multiple urls. For these buttons, I would like a white text box with the list of urls to appear after the user clicks the button. Separating these multiple urls buttons into single url buttons is not an option.
I've looked into System.Windows.Forms.MessageBox. but that does not produce desirable results.
I appreciate any help I can get. Thanks in advance.

hidden checkbox css:
html {
width: 100%;
height: 100%;
background: indigo;
text-align: center;
font-family: arial, sans-serif;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
font-weight: bold;
color: indigo;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background-color: white;
outline: 6px double white;
}
.item {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>google.com</b></p>
<div id=target class="item"><div class=warning>
images.google.com<br>
maps.google.com<br>
drive.google.com</div></div>
</label>

C# Menu Control places an arrow that is beyond the menu item

I have created a menu control. There are main menu items and then static items. The menu control places a default arrow head pointing to the right. I wanted to change the direction, pointing downwards and also, it seems like the default menu control creates a separate td for the placement of the arrow. I didn't like this, because this actually places the arrow beyond the menu item.
So I disabled the default arrow and added my own.
// Create a new Menu control.
_MainNav = new Menu();
_MainNav.StaticEnableDefaultPopOutImage = false;
_MainNav.DynamicEnableDefaultPopOutImage = false;
_MainNav.StaticPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
_MainNav.DynamicPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
This fixed the direction of the arrow. From pointing to the right, now it points downwards.
However the arrow is still placed in a new td.... there is a gap between the menu item and the arrow indicating that there are child items. Visually it looks like that the arrow for one of the menu item is placed at the beginning of the next menu item.
Here is my css:-
div.nav
{
border: 1px solid #fff;
width: 960px;
border-bottom-width: 2px;
clear: both;
}
.menu
{
padding: 0;
margin: 0;
width: 960px;
background-color: #71cd7b;
display: inline-block;
border-bottom: 1px solid white;
font-size: 15px;
}
.menu tr
{
text-align: left;
padding: 0;
margin: 0;
list-style: none;
float: left;
}
.menu td
{
float: left;
padding: 0;
margin: 0;
white-space: nowrap;
}
.menu td a
{
float: left;
width: 134px;
height: 25px;
padding-top: 10px;
text-indent: 15px;
color: #fff;
font-weight: bold;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
background-image: url(Images/divider.jpg);
background-position: right;
background-repeat: repeat-y;
}
.menu td a:hover
{
background-color: #7156a4;
font-size: 15px;
}
.menu td a.active
{
background-color: #7156a4;
font-size: 15px;
}
.subMenu
{
border:1px double Black;
border-width: thin;
}
.subMenuItem
{
background-color : white;
width: 160px;
margin-left:5px;
margin-top:2px;
margin-bottom:5px;
font-family:#Arial Unicode MS;
color:Black;
}
.subMenuItem:hover
{
background-color :#7156a4;
margin-left:5px;
margin-top:3px;
margin-bottom:2px;
margin-right:5px;
font-weight:bold;
color:White;
}
My HTML:-
<div id="nav" class="nav">
<asp:PlaceHolder ID="MenuPlaceHolder" runat="server" />
</div>
<div class="body_block">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
How can I move the arrow back a little bit to the left so that it falls in the same section of the menu and not at the beginning of the next section.

How to design tabs like Google Chrome tabs?

How can I design a user interface with tabs like the one Google Chrome has, I mean each tab has to be able to:
Maximize
Close
Dragged and be stand alone.
I'm using .net 2.0 (C#)
Thanks,

You may find it useful to look at an open source project such SharpDevelop I'm sure that have tabbed windows.

You could look in the chromium source code. The chromium project also seem to have a lot of resources for developers and many communication channels (http://www.chromium.org/developers)

I did it yesterday, but using sass and my own reset file as this screenshoot show.
You may notice in _widget_tab.scss that it support up to 24 tabs after the active one...
Feel free to customize it.
Also to replace &-active with .active or &:hover or &:focus to match your needs.
The _reset.css is optional but the result will look-like this JsFiddlle
Any how, these are my files :
_reset.scss
/*
Created on : Jun 12, 2015, 8:29:10 AM
Author : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese#gmail.com>
*/
$tag-inline:span,a,rt,rp,dfn,abbr,q,cite,em,var,time,samp,i,b,sub,sup,small,strong,mark,ruby,ins,del,bdi,bdo,s,kbd,wbr,code;
$tag-form :form,fieldset,meter,select,legend,optgroup,label,option,datalist,input,output,keygen,textarea,button,progress;
$tag-xture :body,aside,section,header,footer,nav,article,hgroup,address,h1,h2,h3,h4,h5,h6;
$tag-media :img,area,map,embeb,object,param,source,iframe,canvas,track,audio,video,device;
$tag-divide:div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,li,dd;
$tag-table :table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td;
$tag-meta :head,title,meta,base,link,style,noscript,script;
$tag-menu :menu,command,summary,details;
html,#{$tag-inline},#{$tag-form},#{$tag-xture},#{$tag-media},#{$tag-divide},#{$tag-table},#{$tag-meta},#{$tag-menu}
{
margin: 0;
padding: 0;
display: none;
border-radius: 0;
outline-offset: 0;
border-spacing: 0;
border-collapse: collapse;
border: 0 transparent none;
outline: 0 transparent none;
text-indent: 0;
text-align: justify;
text-transform: none;
text-rendering: auto;
text-decoration: none;
text-shadow: 0 0 0 transparent none;
speak: none;
cursor: default;
vertical-align: top;
color: rgba(60,60,60,1);
background-image: none;
background-color: transparent;
font: normal normal normal 0/0 sans-serif;
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-margin-before: 0;
-webkit-padding-start: 0;
-webkit-margin-start: 0;
-webkit-margin-after: 0;
-webkit-margin-end: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
figure,legend,input,select,button,canvas,object,menu,img,area,map,embeb,audio,video
{
display: inline-block;
}
#{$tag-inline}
{
display: inline;
}
li
{
display: list-item;
}
html,form,fieldset,#{$tag-xture},iframe,div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,dd,command,summary,details,option
{
display: block;
}
table
{
display: table;
>colgroup
{
display: table-column-group;
>col
{
display: table-column;
}
}
>caption
{
display: table-caption;
}
>thead
{
display: table-header-group;
}
>tbody
{
display: table-row-group;
}
>tfoot
{
display: table-footer-group;
}
>thead,>tbody,>tfoot
{
>tr
{
display: table-row;
>th,td
{
display: table-cell;
}
}
}
}
#{$tag-inline},input,legend,label,button,li,dt,dd,command,summary
{
font: normal normal normal 12px/1 sans-serif;
}
header,h6,h5,h4,h3,h2,h1
{
font: normal normal normal 33px/1 serif;
}
#for $index from 1 through 6
{
h#{$index}
{
$index: 12 + 3 * $index;
font: normal normal normal #{$index}px/1 serif;
}
}
html>body
{
min-width: 100%;
min-height: 100%;
}
_widget_tab.scss
/*
Created on : Jun 12, 2015, 11:46:31 AM
Author : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese#gmail.com>
*/
#mixin widget-tab()
{
.tab-container
{
display: block;
>.tab-bar
{
display: block;
text-align: right;
}
#content;
}
}
#include widget-tab
{
.tab-bar-chrome-like
{
#extend .tab-bar;
position: relative;
padding: 5px 5px 0 5px;
border-bottom: 7.5px rgba(180,180,180,1) solid;
>.tab
{
margin: 0 5px;
min-width: 75px;
position: relative;
font-family: serif;
display: inline-block;
border-radius: 5px 5px 0px 0px;
padding: 7.5px 25px 7.5px 7.5px;
background-color: rgba(220,220,220,1);
&:before {
width: 0;
bottom: 0;
height: 0;
left: -24px;
content: "";
position: absolute;
border: 12px rgba(220,220,220,1) solid;
border-top-color: transparent;
border-left-color: transparent;
}
&:after {
width: 0;
bottom: 0;
height: 0;
content: "";
right: -23px;
position: absolute;
border: 12px rgba(220,220,220,1) solid;
border-top-color: transparent;
border-right-color: transparent;
}
&:nth-of-type(2n+1) {
background-color: rgba(210,210,210,1);
&:before {
border-right-color: rgba(210,210,210,1);
border-bottom-color: rgba(210,210,210,1);
}
&:after {
border-left-color: rgba(210,210,210,1);
border-bottom-color: rgba(210,210,210,1);
}
}
>[data-sr]
{
right: 5px;
opacity: 0;
z-index: 2;
padding: 2px 4px;
border-radius: 50%;
position: absolute;
top: calc(50% - 8px);
transition-duration: .7s;
background-color: rgba(0,0,0,.05);
&:before {
content: '×';
}
&:hover {
background-color: rgba(0,0,0,.1);
}
}
&:hover>[data-sr] {
opacity: 1;
}
&[data-sr]
{
min-width: 25px;
padding: 7.5px 0;
color: transparent;
}
&-active
{
#extend .tab;
&, &:nth-of-type(n)
{
background-color: rgba(180,180,180,1);
&:before {
border-right-color: rgba(180,180,180,1);
border-bottom-color: rgba(180,180,180,1);
}
&:after {
border-left-color: rgba(180,180,180,1);
border-bottom-color: rgba(180,180,180,1);
}
}
#for $index from 1 through 25
{
&:nth-last-of-type(#{$index}) {
z-index: $index - 1;
#for $sub-index from $index through 1
{
&~.tab:nth-last-of-type(#{$sub-index})
{
z-index: $sub-index - 1;
}
}
}
}
}
}
}
}
index.scss
#import "../libs/reset/scss/_reset.scss";
#import "_widget_tab.scss";
html>body
{
>section
{
margin: 0 15px;
overflow: hidden;
}
}
The main index.html
<!DOCTYPE html>
<html>
<head>
<title>
Choir...
</title>
<meta charset="UTF-8">
<link rel="icon" href="#">
<link rel="stylesheet" href="web/css/sillon.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<aside>
Text...
</aside>
<section class="tab-container">
<nav class="tab-bar-chrome-like">
<a class="tab">
HTML5
<i data-sr></i>
</a>
<a class="tab">
SASS
<i data-sr></i>
</a>
<a class="tab-active">
Angular
<i data-sr></i>
</a>
<a class="tab">
Symfony
<i data-sr></i>
</a>
<a class="tab">
Spring
<i data-sr></i>
</a>
<a href="#" class="tab" data-sr>
.
</a>
</nav>
</section>
</body>
</html>
But Since there is no way yet to self reference code snippet, this the result

Try implementing each tab as a HTMLGenericControl("div") and then apply the following jquery scripts on the client side.
jQuery draggable tabs
As far as the minimising of the tabs, you could simply add a small image to the right of the tab content which toggles the width of the tab based on the jquery click event handler.