Bootstrap Help

Hello Experts,

I'm new to MVC and JQuery web development. I'm trying to bind the data to my datatable using JSon object. Below is the sample code:

View

<div id="mdlMsg" class="modal fade" tabindex="-1" role="dialog">
            <div class="table-responsive m-t-40">
                <table id="dtData" class="display nowrap table  dataTable" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Col1</th>
                            <th>Col2</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>
        </div>

Open in new window

Controller

public async Task<ActionResult> Test()
{
 string resp = "";
  var msg = new Dictionary<int, string>();
msg .Add(1, 'Row 1');               
msg .Add(2, 'Row 2');       
      resp= Newtonsoft.Json.JsonConvert.SerializeObject(msg, Newtonsoft.Json.Formatting.Indented);
return resp;
}

Open in new window

Javascript

$.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (resp) {
 $('#mdlMsg').modal({ show: true })
                var jsonTst = $.parseJSON(resp);
                $('#dtData').dataTable({
                    "bAutoWidth": false,
                    "aaData": jsonTst.data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
                    "aoColumns": [{
                        "jsonTst": "Col1"
                    }, {
                            "jsonTst": "Col2"
                    }]
                });
});

Open in new window

The modal popup shows with no data and also I want to fix my Modal popup to be middle of the page.

Thanks,
ASPDEV

17 Comments

Become a Certified Penetration Testing Engineer

LVL 13

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Can someone tell me why there is a large amount of padding on the dark horizontal nave here:
https://www.gopherstateevents.com/results/cc_rslts/rslts_by_split.asp?meet_id=600&race_id=2956

but not here:
https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?meet_id=600&show_indiv=n&hide_team=n&hide_ind=n&sport=Cross-Country

Thank you!

3 Comments

Hi All,

I've got myself into a bit of a problem, I've purchased a Cisco 867VAE (I'm already using these around the company) and unfortunately it came with image c860vae-ipbasek9-mz.152-4.M1.bin

This image doesnt support VPN isakmp I need the advanced security ios.

I downloaded c860vae-advsecurityk9-mz.154-3.M4.bin and flashed it to the FLASH booted up and now I get:

System Bootstrap, Version 15.1(4r)M2, RELEASE SOFTWARE (fc1)
Technical Support: http://www.cisco.com/techsupport
Copyright (c) 2011 by cisco Systems, Inc.

C860VAE ipbase platform with 256 MB of main memory

Booting flash:c860vae-advsecurityk9-mz.154-3.M4.bin
boot: Launch entrypt: 0x80800000
Self decompressing the image : ################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################ [OK]

Wrong IOS image on IPBASE Router

I can goto ROMmon and boot back into the old image but how do properly upgrade this router to the new firmware I downloaded?

Another idential model router on another site is running:
System image file is …

6 Comments

FullCalendar (fullcalendar.io) using agendaWeek does not allow me to drag events into the range of 00:00am to 11:59am. When dragging the event into the zone as shown on the image, it disappears or reduces itself.

load_calendar.js

2 Comments

I'm looking for a more attractive calendar to use on my classic asp site. Here is my "home brew" version. Looking for something that uses bootstrap 4

4 Comments

The following aligns inline on a laptop but the input and the submit are stacked vertically on my iPhone. Can someone tell me what is missing from my structure please?

    <form role="form" class="form-inline" name="which_event" method="post" action="page_name.asp?event_id=<%=lEventID%>">
    <select class="form-control" name="events" id="events" onchange="this.form.get_event.click()">
        <option value="">Select Event</option>
        <%For i = 0 to UBound(Events, 2) - 1%>
            <%If CLng(lEventID) = CLng(Events(0, i)) Then%>
                <option value="<%=Events(0, i)%>" selected><%=Events(1, i)%></option>
            <%Else%>
                <option value="<%=Events(0, i)%>"><%=Events(1, i)%></option>
            <%End If%>
        <%Next%>
    </select>
    <input type="hidden" name="submit_event" id="submit_event" value="submit_event">
    <input type="submit" class="form-control" name="get_event" id="get_event" value="Get This Event" tabindex="19">
    </form>

Open in new window

4 Comments

1. Use link https://jsfiddle.net/girinishantg/w9cgzayj/72/
2. click on popover button.
3. popover appears, drag and drop anywhere on the screen
4. now click twice the popover button, the popover will disappear and then on the second click reappear.
5. popover appears again on the same location where left earlier.
6. But for a fraction of second flickering happens.

Is there any way to avoid this flickering, please suggest?

5 Comments

When patching SQL server 2016 (and other versions), the patch GUI prompts me to stop some processes to "avoid a computer restart," which I do. After patching I do not receive a prompt to restart the server, which is expected. However, when I check the bootstrap summary log, it reads "Passed but reboot required." Both messages are attached.

So which is it? Is a reboot required or not?
Passed-but-reboot-required.PNG
Processes-check.PNG

3 Comments

I get the following error:

'd3' is undefined

The Visual Studio 2017 debugger stops on the file, nv.d3.min.js on this segment:

e.dispatch=d3.dispatch("render_start","render_end")

Open in new window

The error occurs right after this line of code in my _Layout.cshtml file:

 @RenderSection("scripts", required: false)

Open in new window

The d3 files referenced on the _Layout.cshtml file were these:

<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v0.1.1/dist/angular-nvd3.js"></script>

Open in new window

I noticed that one of them was a beta version so I changed it to this:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>

Open in new window

But then I started getting bootstrap errors like this one in my angular.js [dynamic] file :

Unhandled exception at line 1290, column 7 in https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js
0x800a139e - JavaScript runtime error: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="col-lg-12 ng-scope" ng-controller="summaryCtrl" ng-app="surveyApp">'
http://errors.angularjs.org/1.2.8/ng/btstrpd?p0=%3Cdiv%20class%3D%22col-lg-12%20ng-scope%22%20ng-controller%3D%22summaryCtrl%22%20ng-app%3D%22surveyApp%22%3E occurred

That happens in this area of code:

function bootstrap(element, modules) {
  var doBootstrap = function() {
    element = jqLite(element);

    if (element.injector()) {
      var tag = (element[0] === document) ? 'document' : startingTag(element);
      throw ngMinErr('btstrpd', "App Already Bootstrapped with this Element '{0}'", tag);
    }

Open in new window

I'm not sure if changing the CDN source of the d3.js files caused that because of incompatibility or if there is a different reason. I think that at this point, since I don't know what I'm doing, the more I try to fix it, the more I'm going to break it.
I did not create this app. I inherited it from a programmer that is no longer available.

3 Comments

I have a figure inside a column inside a row of col-md-6, so 2 images per row. Users can upload their own images and I am not cropping them to certain dimensions, they are uploaded at whatever dimensions they are.

On the frontend though this is causing an image with the height. The images aren't all the same height and it looks terrible. They should all be of equal height in the row without distorting the image or cropping the width.

I did not want to crop the image upon upload because I want to use the same image in 2 places but each place will be a different size. So, I would rather use one image and just use css to size it differently.

<div class="row">
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 1</h1><img
                    src="http://localhost:3000/userimg1.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 2</h1><img
                    src="http://localhost:3000/userimg2.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 3</h1><img
                    src="http://localhost:3000/userimg3.jpg"
                    class="img-fluid">
            </figure>

Open in new window

…

4 Comments

Introduction to R

LVL 13

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

I am unable to edit the entries in the bootstrap modal box due to the shadowed backdrop. The cursor is disabled at this point and the screen freezes when the modal box is opened. This only occurs on the first page or a unknown page height of the html page. I would like to enable the ability to edit the values or remove the backdrop altogether if it will solve the problem.

Please see the code below:

<h3>Inserting Data into the database</h3>
    <h3>Data List</h3>
    <div id="storesF">
    <div id="modalStationForm">
        
      <!--<form action="/upload" method="post" id="stationForm" enctype="multipart/form-data">-->
      <form id="stationForm" method="POST" action="/station" enctype="multipart/form-data" >
        <label>Store Name:</label>
        <!--When submitting a form, the name value is important and is used in php file, while the id is used for css and javascript(below)-->
        <input type="text" name="station" id="store" size="40" placeholder="Enter Store Name">
        <br><br>
        <!--
        <label for="file">Profile Photo:</label>
        <input type="file" name="image" id="image" onChange={this.uploadFile}>
        <br><br> -->

        <label>Address:</label>
        <input type="text" name="address" id="location" size="40" placeholder="Enter the store's address">
        <br><br>

        <label>Store Sales:</label>
        <input type="number" name="monthlycstoresales" id="sales" size="20">
        <br><br>

Open in new window

…

12 Comments

I have a horizontal form that I created in an ASP.NET MVC 5 project with Bootstrap 3 (I know this is an old version and may convert to version 4 later). The form-horizontal form is not fitting the full width of the screen even though I have a total of 12 columns in the class. I'm sure it's a simple fix, I just haven't been able to figure it out. I am not using any custom CSS on this page. Here is part of the code. It just has one of the divs. I can provide full code if needed.

<h2>Create Customer</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })


        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

Open in new window

13 Comments

How can I make the form on the below page more mobile-responsive:

https://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=836&race_id=1447

Thank you!

5 Comments

I really like the look of these sections: https://mdbootstrap.com/docs/jquery/sections/magazine/ but when I add it to my page, and add their css, it destroys the basic look of my page, making the fonts much smaller.

Can I sort of section off the magazine part and have it use different css files?

2 Comments

I'm currently developing a new WordPress site for a client using the Bootstrap 4-based Understrap theme development framework, and am running in to some difficulty translating the custom design that I was provided with into a responsive WordPress theme. Here is a link to the site .. still a work in progress, obviously:

http://dev.movingpicture.com/

(I've been focusing exclusively on the header and footer, you'll notice).

I've made some significant progress, meaning that I've got the desktop layouts pretty well figured out and displaying nicely (ie: 1920px, 1366px, 1280px, etc.). I just need some advice on how best to handle the mobile layout, .. meaning the tablet and phone-based viewports (ie: 992px, and 576px), You see, the designer provided me with comps for the mobile layout significantly later than anticipated, .. sort of like an afterthought, and without much understanding of the way Bootstrap works.

Here are some images depicting what's expected for the mobile layout:

Mobile Header - Navigation menu collapsed

Mobile Header - Navigation menu expanded

You'll notice 2 significant things that are particularly problematic:

1) The hamburger icon for toggling the mobile navigation menu and the search box have been swapped

2) The expanded mobile navigation menu is being displayed under the search box - instead of directly underneath the hamburger icon (the latter of which is the standard, default behavior)

So my questions are ..

1) Is there any clever kind of way that I…

5 Comments

When I open this page on my phone it is fine (although the header image is not responsive and I would like to fix that) but the div that displays the page "title" runs over onto the header image. Any help would be much appreciated!

https://www.gopherstateevents.com/results/cc_rslts/more_rslts.asp?meet_id=531&race_id=2749

6 Comments

I have monkeyed with the Results Display nav bar on this page: https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?meet_id=532&show_indiv=n&hide_team=n&hide_ind=n&sport=Cross-Country

Now when I make the screen smaller the "Results Display" is to the right of the list icon and when you click on it, it opens and closes immediately. All I did was take the icons out of the links because I decided that they were not as descriptive as I had hoped.

Thanks!

Bootstrap

2 Comments

Hi Experts,

I have the following requirement on HTML. Please see the below screenshot for reference.

The first thumbnail is the normal thumbnail, the second one is with the mouseover or hover

the image I had to implement is, as a card in bootstrap.

on mouse over it overlay an image to the center of the image and it should become transparent for the whole card( that should include both the image and text) of the card.

There are two things
a) one is to overlay an image in the center for the image on the card. (overlay image has a transparent background)
b) to become transparent or opaque for the entire card (which includes both image and text).

Please help me in implementing this.

Thank you,

6 Comments

Here is the page in progress:
https://www.stadriemblems.com/enamel-pins-gallery/

You'll see that on the very top of the page, I have two banner images that look pretty similar. I only want to use one of them, of course, but here is my predicament:

1) The first one is called up as a div class I created called "top-photo" with the image as a background image. This is ultimately what I want because I want to overlay text.
2) The second image is simply an img tag with the built in Bootstrap class of "img-responsive"

Here is what I am trying to accomplish:

1) I want the image to be called up like the first one, as a background image, so that I can overlay text.
2) But I want it to resize for smaller screens the way the second image is doing. It is resizing nicely (the height changes and the image fits the screen) because it has the "img-responsive" class applied to it. The first image isn't really resizing; it's just getting cut off.

Is there some way to apply the "img-responsive" properties to a background image?

I hope that makes sense, and thanks!

11 Comments

Learn SQL Server Core 2016

LVL 13

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

hi,

My MariaDB cluster break down and I am not sure how to fix it, in my post before:

https://www.experts-exchange.com/questions/29151948/Start-MariaDB-using-wsrep-recover-option.html?headerLink=workspace_open_questions

I can't even bootstrap that, please share your experience on how to fix it.

grastate.data has mark 1 for safe to boot option, still can't

1 Comment

LVL 2

Question by

Starr Duskk

2019-07-11Solved

Is bootstrap still all that?

I have some questions about latest technologies:

1. I only load bootstrap for when I have a control that requires it. Otherwise, I try to steer clear of using bootstrap for new things. We have a new developer who is pushing bootstrap for everything.

I see it as a heavy library that has kind of had its day and there are newer solutions.

Educate me please.

thanks!

3 Comments

Hi All,

I have below display.
Please have a look at the image.
Is there possible to put the button at the same row with the data filter (drop down) ?

Thank you.
Arrange-Display.PNG

7 Comments

I have this HTML (using bootstrap):

<div class="row">
		<div class="col-xs-5" style="padding-top:10px;">Tester #1</div>
	</div>
		<div class="row">
		<div class="col-xs-5"><input type="checkbox" name="ck1">&nbsp;Delete Tester</div>
	</div>

Open in new window

How can this possibly produce the effect in the attached image? I want the checkbox and the word Delete on the same line, next to each other.
I cannot see why this does not do that.
impossible.PNG

7 Comments

I have a web application that uses Bootstrap and I'm trying to make it more mobile responsive.
There is an HTML page that I'm working on now that uses a list groups. That top list row has the labels of agree, disagree, etc, and the following list rows each have a question with some input radio buttons.
When the page is seen in a large screen, the radio buttons are aligned properly with the labels. When the screen becomes small, however, the radio buttons stack beneath the question. So, I added a class="hidden-lg" on a span with a number for each radio button so that when the page is smaller, people can see the radio buttons numbered. They don't need to be numbered when the page is large. However, I can't get the number to appear to the left of each radio button. The numbers keep appearing above the radio buttons. How do I get the span tag with the number to appear to the left of the radio button?
Here are some examples of what I've tried so far.
This example causes the radio buttons to appear under the question in a vertical column with the number above the radio button:

<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>7.</strong> Course assignments are relevant to the course.
        </div>
        <div style="display:block" class="col-lg-1 align">
            <span class="hidden-lg">1</span>
            <input  type='radio' name='q27' value="1" />
        </div>
        <div class="col-lg-1 align">

Open in new window

…

16 Comments

Can someone look at the code at http://www.gtraxc.com/ and tell me my the "Create Account" link doesn't open? Note that it works when you go to http://www.gtraxc.com/login.asp and click the "Create Account" link. Note that this framework was written for me and I am not completely familiar with all of the syntax...but working on it.

Thanks in advance!

3 Comments

Bootstrap

Related Topics

Bootstrap

Related Topics