Code Bug Fix: How can i give bigger height on one speicific child,bigger than his parent’s height

Original Source Link

I have this div.Picute here:
https://ibb.co/kSb3z7m
The div with the class description , on the right is text area which is the third child of the match-overview__input-section class.
I want this div to start with line from the beggining on the dropdown until the Enter your bet input.How can i achive this ? the problem is that here the text area div is sharing the height of the parent,but the height of the parent is good there and is maked with justify-content:space-evenly !important; on the root of the div.

//html


      <div class="col-md-6 col-lg-6">


        <div class="match-choosing-dropdown">
          <select id="dropdown-match-picker" [formControl]="control" (change)="navigateToSection('match-info-section')"
            (ngModelChange)="selectedMatchHandler($event)">
            <option *ngFor="let match of matches; let i = index" [ngValue]="match">{{match.home_team_name}} VS
              {{match.away_team_name}}</option>
          </select>
        </div>


        <div class="match-overview__input-section">
         <div class="match-overview__input-section-wrapper">
          <div class="match-overview__input-section-item-home">
            <input class="home-team-input" type="number"
              [(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points" name="homeTeamPrediction"
              id="home-team" min="0" max="1000" />
          </div>
          <div class="match-overview__input-section-item">
            <input class="away-team-input" type="number"
              [(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points" name="awayTeamPrediction"
              id="away-team" min="0" max="1000" />
          </div>
         </div>
          <div class="description">
            <textarea></textarea>
          </div>
        </div>


        <div class="staked-amount">
          <input placeholder="Enter your bet" class="staked-amount__input" type="number"
              [(ngModel)]="predictionService.predictionFormModel.staked_amount" name="staked_amount"
              id="staked_amount" min="1" />
        </div>


        <div class="create-prediction">
          <button class="create-prediction__button btn btn-primary"
          (click)="navigateToSection('info-and-error-section')">Create</button>
        </div>


      </div>
//css


.col-md-6 {
    display: flex !important;
    justify-content:space-evenly !important;
    align-items: space-between;
    flex-direction: column;
    height: 300px !important;
    background-color: #151720;
    border:1px solid blue;
}

.create-prediction , .staked-amount  {
    width: 163px !important;
    display: flex;

    &__button {
        color:white;
        flex-basis: 274px !important;
    }
}

.create-prediction {
    // margin-top:20px;
}

.match-choosing-dropdown {
    width: 161px !important;
    display: flex;

    & select {
        flex-basis: 274px !important;

        & option {
            color:black;
        }
    }
}

.staked-amount__input {
    display: flex;
    flex-basis: 170px !important;
}

.match-overview__input-section {
    display:flex;
    justify-content: space-between;

    #{&}-item {
        flex:1;
    }

    #{&}-item-home {
        margin-right: 28px;
    }

}

.match-overview__input-section-wrapper {
    display: flex;
    border:1px solid brown;
    align-items: center;
}

Tagged : / / /

Code Bug Fix: Unkown whitespace occurs above table (in asp.net datalist)

Original Source Link

There is an unkown whitespace above the table i created. When I inspect the code there are
‘s and ‘s but I never used those. Could it be that it comes because I dont use tbody and thead? When I delete all the breaks and spans in the inspect it is correct.

I think this is the problem but dont know where it comes from (I checked the master which I use for all other pages and dont see anything)

Under the breaks and spans

css

I zoomed out so you can see the table

<div class="container" style="overflow:auto">
            <table class="table table-striped">
            <tr>
                <th scope="col"></th>
                <th scope="col">Product</th>
                <th scope="col">Voorraad</th>
                <th scope="col" class="text-center">Aantal</th>
                <th scope="col" class="text-right">Prijs</th>
                <th scope="col"></th>
            </tr>
            <asp:sqldatasource id="SqlDataSource1" runat="server" connectionstring="<%$ ConnectionStrings:webshopConnectionString %>" providername="<%$ ConnectionStrings:webshopConnectionString.ProviderName %>" selectcommand="SELECT tblbestelling.Aantal, tblproducten.ProductID, tblproducten.ProductNaam, tblproducten.ProductAfbeelding, tblproducten.ProductPrijs, tblproducten.ProductVoorraad FROM tblbestelling INNER JOIN tblproducten ON tblbestelling.ProductID = tblproducten.ProductID"></asp:sqldatasource>
            <asp:Datalist runat="server" datakeyfield="ProductID" datasourceid="SqlDataSource1" repeatlayout="Flow">

        <ItemTemplate>
                <tr>
                    <td>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductAfbeelding", "~/imgs/{0}") %>' style="height:50px; width:50px" />
                    </td>
                    <td>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductNaam") %>'></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("ProductVoorraad") %>'></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label3" runat="server" Text='<%# Eval("Aantal") %>'></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label4" runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:LinkButton ID="Button1" runat="server" CssClass="text-danger" Text="Button"><i class='fa fa-trash'></i></asp:LinkButton>
                    </td>
                </tr>
        </ItemTemplate>
    </asp:Datalist>
        </table>
    </div>

One thing that is saw someone ask with a similar problem at the following page: https://forums.asp.net/t/1315224.aspx?extra+white+space+after+listview+ItemTemplate+ was if there was any extra spaces in the data anywhere. In the case at the link, I believe they just used text but it is worth a possible look.

The problem was weird but I just had to put the RepeatDirection="Horizontal" and it seemed to work.

Tagged : / /

Code Bug Fix: How remove css from body after popup modal closed?

Original Source Link

I am beginner in web development.

I have a modal show and close

To my close popup modal function, I need add remove this style:

body::-webkit-scrollbar { display: none;  }
html, body { -ms-overflow-style: none; overflow: auto; }

How can I make it?

$(document).ready(function() {
  // show 
  setTimeout(
    function() {
      // $('#modal__trigger2').trigger('click');
      $('#demoModal').modal('show');
    }, 2000);

  // and close
  $('.close-modal-box').click(function(event) {
    event.preventDefault();
    $('#demoModal').modal('hide');
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    $('body').scrollTop(0);
    event.preventDefault();
  });
});
body::-webkit-scrollbar {
  display: none;
}

html,
body {
  -ms-overflow-style: none;
  overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can have your styles in a class like this:

.modal-open {
    -ms-overflow-style: none;
    overflow: auto;
}
.modal-open::-webkit-scrollbar { display: none;  }

and then your js code would look like this:

$(document).ready(function() {
  // show 
  setTimeout(
    function() {
      document.body.classList.add('modal-open');
      $('#demoModal').modal('show');
    }, 2000);

  // and close
  $('.close-modal-box').click(function(event) {
    event.preventDefault();
    $('#demoModal').modal('hide');
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    $('body').scrollTop(0);
    document.body.classList.remove('modal-open');
  });
});

You can use the show.bs.modal and hide.bs.modal events, raised by the modal, to attach code before showing and before hiding the modal. (Or the shown.bs.modal and hidden.bs.mdoal events for when the modal is completly shown/hidden).

For Example:

$('#myModal').on('show.bs.modal', function() {
  // Here you can do stuff when the modal is getting opened
});

$('#myModal').on('hide.bs.modal', function() {
  // Here you can do stuff when the modal is getting closed
});

Tagged : / / /

Code Bug Fix: purple links in simple css dropdown menu

Original Source Link

I am styling a very simple CSS drop down menu I found online, the problem is that I cannot make the text links to get colors, they all are just purple text. Here is the CSS code:

/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none;}
.last {border-right:solid 3px #282828;}
ul.menu >li>a:hover{color:#777;
}

ul.menu li ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #fff;
    position: absolute;
    display: none;
}
ul.menu li:hover ul{
    display: block;
    color: #010101;
}

ul.menu li ul li a:link{
    padding: 15px 20px;
    display: block;
/*    height: 40px;*/
    line-height: 30px;
    text-decoration: none;
    color: #010101;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
ul.menu li ul li a:hover{
    background: #555;
    color: #ffffff;
}

And now here is the HTML code

<ul class="menu">


    <li>
        <a href="#"><div class="buttons">Stötar</div></a>
        <ul>
            <li><a href="#">försvar</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Illustrations</a></li>
        </ul>
    </li>
    <li><a href="#"><div class="buttons">Gäng</div></a></li>
    <li><a href="#"><div class="buttons">Staden</div></a></li>
    <li><a href="#"><div class="buttons">Fängelse</div></a></li>
    <li><a href="#"><div class="buttons">Shopping</div></a></li>

    <li><a href="#"><div class="active">Beskydd</div></a></li>
    <li class="last"><a href="#"><div class="buttons">Konto</div></a></li>
</ul>

If we put this code in a JSFiddle it looks ok and it seems like it can be fixed but when testing it in Google Chrome the link are just purple

JSFiddle
https://jsfiddle.net/k49edo16/

UPDATE:
It happens only on visited, any idea how to fix this ? ( I am new to CSS )

Replace

ul.menu li ul li a:hover{
    background: #555;
    color: #ffffff;
}

with

ul.menu li ul li a{
    background: #555;
    color: #ffffff;
}

Add color to for main links:

ul.menu >li>a

and add next line for sub-menu links.

ul.menu >li>ul>li>a{color:red;}

/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none; color:red;}
ul.menu >li>ul>li>a{color:red;}
.last {border-right:solid 3px #282828; }
ul.menu >li>a:hover{color:#777;
}

ul.menu li ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #fff;
    position: absolute;
    display: none;
    color:red;
}
ul.menu li:hover ul{
    display: block;
    color: #010101;
}

ul.menu li ul li a:link{
    padding: 15px 20px;
    display: block;
/*    height: 40px;*/
    line-height: 30px;
    text-decoration: none;
    color:red;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
ul.menu li ul li a:hover{
    background: #555;
    color: #ffffff;
}
<ul class="menu">


    <li>
        <a href="#"><div class="buttons">Stötar</div></a>
        <ul>
            <li><a href="#">försvar</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Illustrations</a></li>
        </ul>
    </li>
    <li><a href="#"><div class="buttons">Gäng</div></a></li>
    <li><a href="#"><div class="buttons">Staden</div></a></li>
    <li><a href="#"><div class="buttons">Fängelse</div></a></li>
    <li><a href="#"><div class="buttons">Shopping</div></a></li>

    <li><a href="#"><div class="active">Beskydd</div></a></li>
    <li class="last"><a href="#"><div class="buttons">Konto</div></a></li>
</ul>

could this be because the links are visited? You might need to set additional css classes for a:active, a:visited etc.

Tagged : / /

Code Bug Fix: How can I avoid using ‘at’ in radial-gradient?

Original Source Link

I want to get the result below but without using the at syntax because it’s not supported in Safari, I’m having a hard time with it. Does any one know any approach? Thank you in advance!

#content {
  background-color: black;
  height: 300px;
  width: 500px;
}

#inverted-circle {
  background: radial-gradient(110% 200% at 50% 0, white 49.9%, rgba(255,255,255,0) 50.05%);
  position: relative;
  content: '';
  height: 220px;
  width: 100%;
}
<div id="content">
  <div id="inverted-circle"></div>
</div>

It’s still not working on Safari on iOS

not working on safari

Consider background-size/background-position. You make the background twice bigger in height, you divide the vertical radius by 2 and you place your background at the bottom.

#content {
  background-color: black;
  height: 300px;
  width: 500px;
}

#inverted-circle {
  background: 
    radial-gradient(110% 100%, white 49.9%, transparent 50.05%) 
    bottom/
    100% 200%;
  height: 220px;
  width: 100%;
}
<div id="content">
  <div id="inverted-circle"></div>
</div>

Related to get more details: How to animate a radial-gradient using CSS?


You can also optimize your code with only one element:

#content {
  height: 300px;
  width: 500px;
  background: 
    radial-gradient(55% 36.5%, white 99.5%, black 100%) 
     bottom /
     100% 200%;
}
<div id="content">
</div>
Tagged : /

Server Bug Fix: Tooltips in LWC for template iterator are hidden by z-index

Original Source Link

enter image description here

I have a tooltip slds div which is displayed when hovered over Task bar (task three in this case)
Its just that the even after setting z index (100000) on the popover component (from slds), it hides under the component either above or below it.(Task Three, Four, Five are in a component, theres another div below them housing other task bars)

Similar stackexchange

When you use Scrollable which implements scrollbar, this is bound to happen.

Problem

The part of the DOM which is inside scroll is limited to its own context. The standard helptext will add DOM element which is fixed (position fixed) w.r.t the i or any other element you choose – in effect its just another DOM element.

Solution

The only solution I found so far to this is using title attribute. This adds the popup over the top of DOM by browser. Also if you need to style the title, you can do so by CSS.

Tagged : / / / /

Code Bug Fix: React js dropdown not scrollable

Original Source Link

I have a drop-down that shows different games, on desktop you can see the entire list but on a laptop, the list gets clipped, Tried to fix this by adding overflow: auto to make it scrollable but that makes the dropdown disappear. Any idea how make it scrollable?

Images

enter image description here

enter image description here

enter image description here

overflow property works only with absolute height. height: 100% is relative to its parent.

.navbar-container .game-dropdown {
  position: relative;
  text-decoration: none;
  color: #878799;
  font-size: 1em;
  height: 400px;
  overflow: auto;
}

Tagged : / /

Code Bug Fix: margin 0 auto not working with horizontal flexbox

Original Source Link

I want to do somethig like nav with flexbox. If the screen is big i want the nav be center, but when the screen is small, there is ability to scroll horizontal. Why margin 0 auto in .set-type ul not working?

.set-type {
  width: 100%;
  overflow-x: auto;
}
.set-type ul {
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}
.set-type ul li {
  list-style: none;
  flex-shrink: 0;
  padding: 21px;
}
<div class="set-type">
  <ul>
    <li>Text</li>
    <li>URL</li>
    <li>SMS</li>
    <li>E-MAIL</li>
    <li>PHONE</li>
  </ul>
</div>

You should remove the default padding and margin from all elements for a start, as it is offsetting the layout. This is always a good thing to do at the start of a project.

For keeping everything centered while retaining scroll behaviour, you can set the width of the ul to min-content, which will shrink the width of the ul to the minimum amount of space needed to keep it’s children from breaking out. Since you have no-wrap selected this will preserve the horizontal layout.

* {
  padding: 0;
  margin: 0;
}

.set-type {
  width: 100%;
  overflow-x: auto;
}
.set-type ul {
  margin: 0 auto;
  width: min-content;
  display: flex;
  flex-wrap: nowrap;
}

.set-type ul li {
  list-style: none;
  flex-shrink: 0;
  padding: 21px;
}
<div class="set-type">
  <ul>
    <li>Text</li>
    <li>URL</li>
    <li>SMS</li>
    <li>E-MAIL</li>
    <li>PHONE</li>
  </ul>
</div>

Alternatively, if compatibility is an issue, you can move the flex container up a level and convert the ul into a regular block containing inline-blocks. Center the ul with margin: auto instead of using justify-content on the flex parent to stop the sides being cut off when the scrolling starts.

* {
  padding: 0;
  margin: 0;
}

.set-type {
  display: flex;
  width: 100%;
  overflow-x: auto;
}

.set-type ul {
  margin: auto;
  white-space: nowrap;
}

.set-type ul li {
  display: inline-block;
  list-style: none;
  flex-shrink: 0;
  padding: 21px;
}
<div class="set-type">
  <ul>
    <li>Text</li>
    <li>URL</li>
    <li>SMS</li>
    <li>E-MAIL</li>
    <li>PHONE</li>
  </ul>
</div>

What you need to do is Add margin property to li, not the ul check this snippet hope this resolves your problem.

.set-type {
  width: 100%;
  overflow-x: auto;
}
.set-type ul {
margin: 0 auto;
display: flex;
  flex-wrap: nowrap;
justify-content: center;
 padding: 0px;
  
  
}
.set-type ul li {
  list-style: none;
  flex-shrink: 0;
  margin-right: 10px;
  
}
<div class="set-type">
  <ul>
    <li>Text</li>
    <li>URL</li>
    <li>SMS</li>
    <li>E-MAIL</li>
    <li>PHONE</li>
  </ul>
</div>

if you want to use margin: 0 auto; you need width.
in your case you can use

justify-content: center;

to your .set-type ul selector

Tagged : / /

Code Bug Fix: Tailwind grid dynamic sidebar/navbar width with main 100% width

Original Source Link

I need a simple main div column 100% full.

Sometimes a sidebar can appear, with dynamic width.

REPL: https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku

In this example you can see I’m not able to change sidebar width (which has every time a new width value) and I’m not able to “stretch” main div to 100% width.

How to do?

<div class="min-h-screen grid grid-cols-12">

  <div class="bg-green-500">
    <div style={`width: ${randomWidth}px !important;`}>
      Sidebar. This has dynamic width.
    </div>
  </div>

  <div class="bg-red-500">
    Main. This has full width.
  </div>

</div>

I would recommend a simple use of relative and absolute. Here’s the codesandbox

<div class="min-h-screen w-full relative">

  {#if sidebarVisible}
    <div class="bg-green-500 h-full absolute left-0">
      <div style={`width: ${randomWidth}px !important;`}>
        Sidebar. This has dynamic width.
      </div>
    </div>
  {/if}

  <div class="bg-red-500 h-screen">
    Main. This has full width.
  </div>

</div>

For 100% width, you can use w-full and for full screen height h-screen

Tagged : / /

Code Bug Fix: my website just show selector in Bootstrap 3 althoughts my Bootstrap version is 4.5

Original Source Link

My project has been updated bootstrap 3 to bootstrap 4. But it’s just showed selector bootstrap 3.
I want the header of table background is black and text is white but the background’s still white and the text’s still black.

This is my HTML code:

<table class="table-hover table">
  <tr class="bg-dark text-white">
    <th>
      <p>Mô tả sự cố</p>
    </th>
    <th>
      <p>Tên thiết bị</p>
    </th>
    <th>
      <p>Người thêm</p>
    </th>
    <th>
      <p>Người xác nhận</p>
    </th>
    <th>
      <p>Trạng thái</p>
    </th>
    <th></th>
  </tr>
</table>

This is result:

Text

I changed class of <tr class="bg-danger text-info"> and the result:

Text

Tagged : / / /