Posts

Showing posts with the label twitter-bootstrap

Set Bootstrap 3 buttons to have same position in cards

Image
Clash Royale CLAN TAG #URR8PPP Set Bootstrap 3 buttons to have same position in cards I am trying to align the Bootstrap 3 buttons on a horiziontal line like the below picture. Here is my demosite until now. I can align the buttons with setting a margin, but then it seems to be a puzzle to look good on all viewports. Is there a smart way to align the buttons? I have tried to delete so much code there is not relevant for the question. Therefore some css classes are not used in the below code: /* Track and trace */ .bs-calltoaction{ position: relative; width:auto; padding: 15px 25px; border: 1px solid black; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; } .bs-calltoaction > .row{ display:table; width: calc(100% + 30px); } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:table-cell; ...
-
Read more

Set panel to go under image < 768px

Image
Clash Royale CLAN TAG #URR8PPP Set panel to go under image < 768px I have an image with a panel inside that contains contact information of the company. Those two elements are looking horrible on viewport < 768 px . Is it possible to push the panel under the image on viewport < 768 px ? I tried to set a push-right with the Bootstrap class, but does not seem to do anything like I want. < 768 px < 768 px push-right Demosite of the contactpage made in Bootstrap 3. I tried to delete all the code there is not relevant for the question: /* Track and trace */ .bs-calltoaction{ position: relative; width:auto; padding: 15px 25px; border: 1px solid black; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; } .bs-calltoaction > .row{ display:table; width: calc(100% + 30px); } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ ...
-
Read more

Bootstrap 4 modal pop up header login stretch to the right

Image
Clash Royale CLAN TAG #URR8PPP Bootstrap 4 modal pop up header login stretch to the right My bootstrap 4 login pop up on the header stretch all the way to the right when clicked. My header The header when I clicked the login pop up Here's my link code: <li class="nav-item"> <a class="nav-link btn btn-outline-info px-4 mt-1" data-toggle="modal" data-target="#loginModal1">Login</a> </li> Here's my modal code: <div class="modal fade" role="dialog" id="loginModal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Modal Login Form</h3> <button type="button" class="close" data-dismiss="modal">&times;</but...
-
Read more

My bootstrap 4 table won't be responsive

Image
Clash Royale CLAN TAG #URR8PPP My bootstrap 4 table won't be responsive I use Bootstrap 4 HTML template and would like to have a nice table displayed in 320x480. Here, the table I try to insert in that page won't be responsible even .table-responsive class has been added. Would you please tell me what I did wrong ? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Table</title> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">...
-
Read more

bootstrap fixed table headers with scrolling body

Image
Clash Royale CLAN TAG #URR8PPP bootstrap fixed table headers with scrolling body New to programming and first time posting here as well. I've got a bit of an issue with my bootstrap table inside a panel. I have a dropdown menu where the user can decide which columns to display. I need to be able to scroll through the table content both vertically and horizontally as more data gets added. This works fine without the scroll bar as bootstrap solves that for me. When i set my table to "display: block" my scroll bar works fine, but now the column headers don't line up nicely anymore. Also when i add more columns to display, instead of adding to the top header row they create a second row. Here i want it to push the content together but still allowing each column to take up as much space as they need and when the table width exceeds it's limit i want the content to scroll horizontally as well. My problem is that my data changes depending on which data the user selects (...
-
Read more

Why Facebook on Android blocks JS content from my site?

Image
Clash Royale CLAN TAG #URR8PPP Why Facebook on Android blocks JS content from my site? I have a site with "Drupal 8", "Bootstrap 3.3.7" and "Font Aweome 5.2". I just realized that Facebook does not completely load the pages of my site on android. Facebook blocks JS content from my pages. Here is a page of my site opened with the application Chrome (it is correctly displayed) : Here is a page of my site opened with the Facebook application (it is not correctly displayed) : Here is the link to the page : https://www.s1biose.com/boutique/atelier-de-la-linotte Why Facebook on Android blocks JS content from my site ? I do not see any problem in the console : UPDATE I did several tests to find what causes the blockage. In the configuration of "Drupal 8": if the "Aggregate JavaScript files" box is checked, JS is blocked with the Facebook application on Android. if the "Aggregate JavaScript files" box is not checked, JS works correctl...
-
Read more

How do you load an alternate jquery in a webpack module?

Image
Clash Royale CLAN TAG #URR8PPP How do you load an alternate jquery in a webpack module? I need to load alternate versions of jQuery other than the one in my node_modules. I have a local copy of the script but I am unable to get it to load in my webpack app.ts. I have removed the global jQuery and resolve path for node_modules in my webpack config since I do not want the version from node_modules. However I can't figure out how I can pass the loaded jquery to the scripts that require it. I have multiple entry points (app.ts) each which needs to be able to load a different jquery so I can not define jquery in the webpack config as I would like to use the same config for processing all my entry points. app.ts import jquery from '../../../js/jquery-3.3.1.js'; // tried this but didn't help // window.$ = jquery; // window.jquery = jquery; // these two require jquery but fail, it only works if I add back in // the webpack config to find jquery in node_modules which is what I /...
-
Read more

How to collapse a bootstrap navbar programmatically

Image
Clash Royale CLAN TAG #URR8PPP How to collapse a bootstrap navbar programmatically I'm trying to build a website using bootstrap which contains a navbar. The mobile site looks pretty good until you try to change the websites content using the navbar. If you click it, the content changes, but the navbar stays expanded. When you try closing it manually, the content disappears and the initial content shows up. HTML: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header" id="mainpage"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> ... <li id="examplenav"><a href="#">Example</a></li> JS: $("examplenav").addEventListener("click", showExampleContent); showExampleContent is a function that changes a div using dom scripting. ...
-
Read more