How to remove rounded corners of select box in Bootstrap?

I have written this code for creating a select box in bootstrap but the corners are coming rounded which i want to remove. How to do so? I tried a lot but could not find any solution for this. Please help me.

Here is the link of jsfiddle.net also

https://jsfiddle.net/ankitshri774/2redLfnc/7/

body {
  background-color: #E8E8E8;
}

label {
  float: left;
}

#main_container {
  background-color: white;
  margin-left: 10px;
  padding-left: 13px;
  margin-right: 10px;
  padding-right: 13px;
  padding-top: 13px;
  margin-top: 10px;
  box-sizing: border-box;
}

#container {
  background-color: aqua;
}

.select-wrapper {
  border: 1px solid black;
  border-radius: 0px;
}
<!doctype html>

<html lang="en">

<head>
  <title>Master Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="masterpage1.css">


  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body>



  <div id="main_container">

    <form>


      <div id="partymaster">
        <h3>Party Master</h3>
        <hr/>
      </div>

      <div class="row">

        <div class="col-md-4">
          <div class="form-group">
            <label>Category
                        <span style="color:red">*</span>
                    </label>
            <span class="select-wrapper"><select name="category" class="form-control no-radius">
                <option>A</option>      
                </select>
</span>
          </div>


        </div>


      </div>


    </form>


  </div>
</body>




</html>

5 answers

  • answered 2018-07-12 06:46 Khyati Agola Chandak

    Add the below line to your CSS file:

    .no-radius{
        border-radius:0px !important;
    }
    

  • answered 2018-07-12 06:46 לבני מלכה

    Use code below(set !important to prevent override)

    The border-radius is 4px because you set to select form-control class and it is bootstrap definition by default

    .no-radius{
      border-radius: unset!important;
    }
    

    See fiddle:https://jsfiddle.net/2redLfnc/29/

    body{
        background-color:#E8E8E8;
           
        }
        
        
            label{
                float: left;
            }
            
            #main_container{
                background-color: white;
                margin-left: 10px;
                padding-left:13px;
                margin-right: 10px;
                padding-right:13px;
                padding-top: 13px;
                margin-top: 10px;
                box-sizing: border-box;
            }
        
            #container
            {
                background-color: aqua;
            }
        
           
    
    
           .select-wrapper{
            border: 1px solid black;
            border-radius: 0px;
        }
    
    .no-radius{
      border-radius: unset!important;
    }
    <!doctype html>
    
    <html lang="en">
        
    <head>
    <title>Master Page</title>                  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">        
    <link rel="stylesheet" href="masterpage1.css">
    
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        
    
        <body >
    
                
    
                <div id="main_container">
    
        <form>
        
       
       <div id="partymaster">
           <h3>Party Master</h3>
           <hr/>
       </div>
    
       <div class="row">
          
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Category
                            <span style="color:red">*</span>
                        </label>
                        <span class="select-wrapper"><select name="category" class="form-control no-radius">
                    <option>A</option>      
                    </select>
    </span>
                    </div>
               
                
    </div>
    
    
    </div>
    
    
    </form>
    
    
    </div>
    </body>
    
    
    
    
        </html>

  • answered 2018-07-12 06:48 zubair khanzada

    Use select tag in styling select{border-radius: 0 !important;}

    body{
        background-color:#E8E8E8;
    
    }
    
    
    label{
        float: left;
    }
    
    #main_container{
        background-color: white;
        margin-left: 10px;
        padding-left:13px;
        margin-right: 10px;
        padding-right:13px;
        padding-top: 13px;
        margin-top: 10px;
        box-sizing: border-box;
    }
    
    #container
    {
        background-color: aqua;
    }
    
    
    
    
    .select-wrapper{
        border: 1px solid black;
        border-radius: 0px;
    }
    select{
        border-radius: 0 !important;
    }
    <html lang="en">
    
    <head>
        <title>Master Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="masterpage1.css">
    
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    
    
    <body >
    
    
    
    <div id="main_container">
    
        <form>
    
    
            <div id="partymaster">
                <h3>Party Master</h3>
                <hr/>
            </div>
    
            <div class="row">
    
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Category
                            <span style="color:red">*</span>
                        </label>
                        <span class="select-wrapper"><select name="category" class="form-control no-radius">
                            <option>A</option>
                        </select>
    </span>
                    </div>
    
    
                </div>
    
    
            </div>
    
    
        </form>
    
    
    </div>
    </body>
    
    
    
    
    </html>

  • answered 2018-07-12 06:56 MBaas

    The problem is that the form-control-class sets a radius of 4px. So you can't overwrite it with a different class on the same element (at least I would not know how to that). So as a quick fix, I have defined a different class form-control-without-radiusand am using that in my updated fiddle.

    .form-control-without-radius {
      display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    } 
    

    However, this is a fundamental change of the entire layout, and I guess it would collide with many other UI-Components. So you may have to build your own custom Bootstrap. Some people find it easy to do with sass, I had more fun using the Bootstrap Theme Builder. And there are others as well. If you're not familiar enough with BT, this may sound like a scary idea - but my experience doing so has been only positive, so I'd go for it ;-)

    Update: I saw the unset !important-idea in other posts, neat idea! That make the whole thing simpler, of course. Have updated my fiddle accordingly.

  • answered 2018-07-12 07:37 mahan

    Use rounded-0 but in Bootstrap-4 only.

    body {
      background-color: #E8E8E8;
    }
    
    label {
      float: left;
    }
    
    #main_container {
      background-color: white;
      margin-left: 10px;
      padding-left: 13px;
      margin-right: 10px;
      padding-right: 13px;
      padding-top: 13px;
      margin-top: 10px;
      box-sizing: border-box;
    }
    
    #container {
      background-color: aqua;
    }
    
    .select-wrapper {
      border: 1px solid black;
      border-radius: 0px;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <div id="main_container">
      <form>
        <div id="partymaster">
          <h3>Party Master</h3>
          <hr/>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label>Category
                <span style="color:red">*</span>
              </label>
              <span class="select-wrapper">
                <select name="category" class="form-control rounded-0">
                  <option>A</option>      
                </select>
              </span>
            </div>
          </div>
        </div>
      </form>
    </div>

  • Removing Extra blank printed page because of script conflict

    I have a text-editor that works very well even when i embed it to my blogger website it still works well but when i added a watermark to the text-editor ,the text-editor on its own still works good like here text-editor

    but when i embed the same script in blogger when i print the first and only page i get an extra second blank page even if the text-editor is empty i have two printed pages by default see blogger

    and the problem is only with first page if i have two ot three pages i don't have any extra blank page at all . So is there any css or javascript to remove that extra blank page because the majority of the text in my text-editor in blogger will be just one page only ? and this is the whole script

    this the watermark script i have to put style inside div because it's the only way it works when the script was with seperate style it did not work

    <div id="textBox" contenteditable="true" >
    <style>
    #printo { display: none }
    @media print {
      #printo {
        display: block;
        width: 150px;
        position: fixed;
        bottom: 5px;
        right: 5px;
        opacity: .5;
      }
    
    </style>
    <img id="printo"  src="https://unripened-amperes.000webhostapp.com/logo%20(2).png" alt="A watermark you can only see when you print" />
    </div>

    and this is whole script

    var oDoc, sDefTxt;
    
    function initDoc() {
      oDoc = document.getElementById("textBox");
      sDefTxt = oDoc.innerHTML;
      if (document.compForm.switchMode.checked) { setDocMode(true); }
    }
    
    function formatDoc(sCmd, sValue) {
      if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
    }
    
    function validateMode() {
      if (!document.compForm.switchMode.checked) { return true ; }
      alert("Uncheck \"Show HTML\".");
      oDoc.focus();
      return false;
    }
    
    function setDocMode(bToSource) {
      var oContent;
      if (bToSource) {
        oContent = document.createTextNode(oDoc.innerHTML);
        oDoc.innerHTML = "";
        var oPre = document.createElement("pre");
        oDoc.contentEditable = false;
        oPre.id = "sourceText";
        oPre.contentEditable = true;
        oPre.appendChild(oContent);
        oDoc.appendChild(oPre);
        document.execCommand("defaultParagraphSeparator", false, "div");
      } else {
        if (document.all) {
          oDoc.innerHTML = oDoc.innerText;
        } else {
          oContent = document.createRange();
          oContent.selectNodeContents(oDoc.firstChild);
          oDoc.innerHTML = oContent.toString();
        }
        oDoc.contentEditable = true;
      }
      oDoc.focus();
    }
    
    
    
    
    function printDoc() {
     if (!validateMode()) { return; }
    var printContents = document.getElementById('textBox').innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
    }
    
    
    
    
    /*page margin*/
    var cssPagedMedia = (function () {
        var style = document.createElement('style');
        document.head.appendChild(style);
        return function (rule) {
            style.innerHTML = rule;
        };
    }());
    
    cssPagedMedia.margin = function (margin) {
        cssPagedMedia('@page {margin: ' + margin + '}');
    };
    
    cssPagedMedia.margin('0');
    /*page size*/
    cssPagedMedia.size = function (size) {
        cssPagedMedia('@page {size: ' + size + '}');
    };
    
    var cssPagedMedia = (function () {
        var style = document.createElement('style');
        document.head.appendChild(style);
        return function (rule) {
            style.innerHTML = rule;
        };
    }());
    
    cssPagedMedia.size = function (size) {
        cssPagedMedia('@page {size: ' + size + '}');
    };
    
    cssPagedMedia.size('portrait');
    #printo { display: none }
    @media print {
      #printo {
        display: block;
        width: 150px;
        position: fixed;
        bottom: 5px;
        right: 5px;
        opacity: .5;
      }
    }
    .intLink {
      cursor: pointer;
    }
    
    img.intLink {
      border: 0;
    }
    
    #toolBar1 select {
      font-size: 10px;
    }
    
    #textBox {
      width: 540px;
      height: 500px;
      border: 1px #000000 solid;
      padding: 12px;
      overflow: scroll;
    }
    
    #textBox #sourceText {
      padding: 0;
      margin: 0;
      min-width: 498px;
      min-height: 200px;
    }
    
    .unselectable {
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -o-user-select: none;
      user-select: none;
      cursor: not-allowed;
    }
    
    #editMode label {
      cursor: pointer;
    }
    <div id="printa">
    <body onload="initDoc();">
    <form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
    <input type="hidden" name="myDoc">
    <div id="toolBar1">
    <select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
    <option selected>- التنسيق -</option>
    <option value="h1">عنوان 1 &lt;h1&gt;</option>
    <option value="h2">عنوان 2 &lt;h2&gt;</option>
    <option value="h3">عنوان 3 &lt;h3&gt;</option>
    <option value="h4">عنوان 4 &lt;h4&gt;</option>
    <option value="h5">عنوان 5 &lt;h5&gt;</option>
    <option value="h6">عنوان فرعي &lt;h6&gt;</option>
    <option value="p">فقرة &lt;p&gt;</option>
    <option value="pre">مهيأ مسبقا &lt;pre&gt;</option>
    </select>
    <select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
    <option class="heading" selected>- الخطوط -</option>
    <option>Arial</option>
    <option>Arial Black</option>
    <option>Courier New</option>
    <option>Times New Roman</option>
    </select>
    <select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
    <option class="heading" selected>- الحجم -</option>
    <option value="1">صغير جدا</option>
    <option value="2">صغير بعض الشيء</option>
    <option value="3">عادي</option>
    <option value="4">متوسط - كبير</option>
    <option value="5">كبير</option>
    <option value="6">كبير جدا</option>
    <option value="7">أقصى</option>
    </select>
    <select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
    <option class="heading" selected>- اللون -</option>
    <option value="red">أحمر</option>
    <option value="blue">أزرق</option>
    <option value="green">أخضر</option>
    <option value="black">أسود</option>
    </select>
    <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
    <option class="heading" selected>- الخلفية -</option>
    <option value="red">أحمر</option>
    <option value="green">أخضر</option>
    <option value="black">أسود</option>
    </select>
    </div>
    <div id="toolBar2">
    <img class="intLink" title="طباعة" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
    <img class="intLink" title="خط عريض " onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
    <img class="intLink" title="خط مائل" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
    <img class="intLink" title="تسطير" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
    <img class="intLink" title="محاذاة إلى اليسار" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
    <img class="intLink" title="محاذاة إلى الوسط" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
    <img class="intLink" title="محاذاة إلى اليمين" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
    <img class="intLink" title="الرجوع إلى الخلف" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
    <img class="intLink" title="التقدم إلى الأمام" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
    <img class="intLink" title="قائمة ذات تعداد رقمي" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
    <img class="intLink" title="قائمة ذات تعداد نقطي" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
    <img class="intLink" title="إضافة رابط" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
    <img class="intLink" title="القص" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
    <img class="intLink" title="النسخ" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
    <img class="intLink" title="اللصق" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
    <img class="intLink" title="المسح التام" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
    
    </div>
    <iframe id="inlineFrameExample" name="inlineFrameExample" title="Inline Frame Example" width="0" height="0" dir="rtl" hidden="hidden">
      </iframe>
    <div id="textBox" contenteditable="true" >
    <img id="printo"  src="https://unripened-amperes.000webhostapp.com/logo%20(2).png" alt="A watermark you can only see when you print" />
    
    <div style="text-align: center;"><img src="https://i.imgur.com/KDXSnOv.jpg" width="160"></div><strong style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify; background-color: rgb(255, 255, 255);">Lorem Ipsum</strong><span style="color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify; background-color: rgb(255, 255, 255);">&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
    </div> 
    
    <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" hidden="hidden"/> </p>
    <p><input type="submit" value="Send" hidden="hidden" /></p>

  • How to do this "scroll & cover" effect

    How to do this effect, on scroll, reveal the next image.

    It's not parallax, it's an fixed img and when we scroll the image below comes and cover the one above.

    I saw this effect on this site : https://templated.co/roadtrip

    Is this CSS, is this JavaScript? I've searched many Jquery Pluggins but I can't find what i'm looking for. Maybe it's possible with just vanilla JS.

    I hope someone can give me some hints. Thank you and have a nice day!

  • React Bootstrap Editable Table with CRUD utility

    I am stuck at the last step of building my app in react , I need to complete the update and delete part of my app , I referred this example here:

    https://www.npmjs.com/package/react-crud-table

    which is a react-crud table, I was able to modify it accordingly to fit my needs in the application, but the UI is all messed up. I have imported the base css and yet it is not reflecting in the UI, I have tried other bootstrap tables but I was able to use this and modify it in terms of functionality.

    Could you please suggest how to resolve this?

  • هل يمكن رفع اكثر من موقع على ايميل واحد في استضافة مجانية

    هل يمكن رفع اكثر من موقع على ايميل واحد في استضافة مجانية

  • How to add text to modal on button click

    I have this modal

     <div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                               <div class="credit-scoring">
                                    <label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
                                    <input type="text" class="form-control" id="credit-scoring">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
    

    and I would like to add text in <span id="bankAssessBondId"></span> when the following button is clicked

    <button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
    Bank Assess
    </button>
    

    as I have multiple buttons for this, I'm using an EventListener as follows

    var buttons = document.getElementsByClassName('btn btn-success bank');
        for(var i=0; i<buttons.length; i++){
            buttons[i].on("click", function(){
                 $('#bankAssessBondId').append($(this).value)
            })
    }
    

    but the 'click' button event is not detected. How can I fix this?

  • How can I integrate this code into my Bootstrap website (with a theme already in place)?

    I am having some issues integrating this slider into my website that is already using a theme and Bootstrap 4. When I copy the code into the HTML, CSS and Javascript files that I am already using, I only get a list of static images as seen here.

    How can I properly add this code, since it seems like the HTML code is disconnected from the CSS and Javascript code?

    <div class="container">
      <h2>Our  Partners</h2>
       <section class="customer-logos slider">
          <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
       </section>
    </div>   
    
    h2{
      text-align:center;
      padding: 20px;
    }
    /* Slider */
    
    .slick-slide {
        margin: 0px 20px;
    }
    
    .slick-slide img {
        width: 100%;
    }
    
    .slick-slider
    {
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
                user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
            touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }
    
    .slick-list
    {
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .slick-list:focus
    {
        outline: none;
    }
    .slick-list.dragging
    {
        cursor: pointer;
        cursor: hand;
    }
    
    .slick-slider .slick-track,
    .slick-slider .slick-list
    {
        -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
             -o-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    
    .slick-track
    {
        position: relative;
        top: 0;
        left: 0;
        display: block;
    }
    .slick-track:before,
    .slick-track:after
    {
        display: table;
        content: '';
    }
    .slick-track:after
    {
        clear: both;
    }
    .slick-loading .slick-track
    {
        visibility: hidden;
    }
    
    .slick-slide
    {
        display: none;
        float: left;
        height: 100%;
        min-height: 1px;
    }
    [dir='rtl'] .slick-slide
    {
        float: right;
    }
    .slick-slide img
    {
        display: block;
    }
    .slick-slide.slick-loading img
    {
        display: none;
    }
    .slick-slide.dragging img
    {
        pointer-events: none;
    }
    .slick-initialized .slick-slide
    {
        display: block;
    }
    .slick-loading .slick-slide
    {
        visibility: hidden;
    }
    .slick-vertical .slick-slide
    {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    } 
    
    $(document).ready(function(){
        $('.customer-logos').slick({
            slidesToShow: 6,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 1500,
            arrows: false,
            dots: false,
            pauseOnHover: false,
            responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToShow: 4
                }
            }, {
                breakpoint: 520,
                settings: {
                    slidesToShow: 3
                }
            }]
        });
    });
    
  • How do I use svg icons from Font Awesome in Bootstrap 4?

    How do I use svg from Font Awesome 5.5 as icons in Bootstrap 4?

    I want do use Font Awesome icons in Bootstrap 4. How do I do that in the best way? I have downloaded the svg-files and can use them as a normal image but it is how it should be done?

    <div class="form-group">
    <label for="name">Namn</label>
    <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text"><img src="img/svgs/regular/address-book.svg" width="20px" height="20px" alt="Name"></div>
    </div>
        <input type="text" class="form-control" id="name" name="Name" placeholder="" value="" autofocus>
    </div>
    </div>
    
  • How to Add Logo/Client Slider in Bootstrap Website

    I am trying to add a logo/client slider to a website I am working on (the one linked here).

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    

    For some reason, it is not working. The only thing that I am getting after adding the HTML, CSS and Javascript code is a list of images with no animation. How can I integrate this code properly? Thanks!