Menu icon Foundation

My Posts


  • 2
    Replies
  • Form Issues With Foundation 5

    By Bill Bell

    I am experimenting with Foundation 5. I ran into a couple of issues: 1. Form taking full width of screen. In F4 my override.css changed .row max-width to 100%. This made the form take the full width of the browser. It has no affect in F5. I could... (continued)

    Last Reply by Bill Bell over 5 years ago


My Comments

Bill Bell commented on Charlie Gilman's post over 4 years

I don't know what environment you use to debug javascript but I find Visual Studio 2013 Express For Web to be excellent for debugging events in Javascript. Just use IE as the browser and it is easy to trace events. I suspect you may be triggering several events.

Bill Bell commented on Paolo Euvrard's post over 4 years

I don't use Accordian but Tabs work perfectly. I had to override some CSS parameters to get it looking like I wanted it. I even have Tabs inside Tabs. It works on small platform devices like a smartphone. Foundation 4 had problems with small platforms.

Bill Bell commented on Duc Anh Trinh's post over 5 years

Do you have an example webpage? I was finally successful using Chrome's developer tools to track an issue with a form. It did take a few hours.

Bill Bell commented on Bill Bell's post over 5 years

Finally figured it out after using Chrome's inspector. Adding following to my override.css fixed it.

    .tabs-content > .content.active {
      width: 100%; }

Bill Bell commented on Bill Bell's post over 5 years

I have been working on this some more. I traced the CSS using firebug and it seems it imposes a box-sizing of 971px. However, if I add a long p tag it makes the form the total width of the browser. Any ideas to try are appreciated. This is holding me up from moving to F5.

<body>
    <form id="tripOffice">
        <div>
            <dl class="tabs" data-tab>
                <dd class="active"><a href="#officeTab" id="officePnl">Trip Office</a></dd>
                <dd><a href="#woTab" id="woPnl">Work Orders</a></dd>
                <dd><a href="#custTab" id="custPnl">Customers</a></dd>
                <dd><a href="#contTab" id="contPnl">Contacts</a></dd>
                <dd><a href="#equipTab" id="equipPnl">Equipment</a></dd>
                <dd><a href="#specTab" id="specPnl">Spec</a></dd>
                <dd><a href="#resultsTab" id="reResultsPnl">Results</a></dd>
                <dd><a href="#otherTab" id="otOtherPnl">Other</a></dd>
                <dd><a href="#other2Tab" id="o2Other2Pnl">Other 2</a></dd>
                <dd><a href="#searchTab" id="srSearchPnl">Search</a></dd>
            </dl>
            <div class="tabs-content">
                <div class="tabs active" id="officeTab">
                </div>
                <div class="content" id="custTab">
                </div>
                <div class="content" id="contTab">
                    <div class="row">
                        <p>Third panel content goes here. Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <div class="small-2 columns">
                            <label for="coCustLookup" class="right inline">Customer Lookup</label>
                        </div>
                        <div class="small-10 columns">
                            <input type="text" id="coCustLookup" placeholder="Enter first 2 characters">
                        </div>
                    </div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Charlie Gilman's post over 4 years

I don't know what environment you use to debug javascript but I find Visual Studio 2013 Express For Web to be excellent for debugging events in Javascript. Just use IE as the browser and it is easy to trace events. I suspect you may be triggering several events.

You commented on Paolo Euvrard's post over 4 years

I don't use Accordian but Tabs work perfectly. I had to override some CSS parameters to get it looking like I wanted it. I even have Tabs inside Tabs. It works on small platform devices like a smartphone. Foundation 4 had problems with small platforms.

You commented on Duc Anh Trinh's post over 5 years

Do you have an example webpage? I was finally successful using Chrome's developer tools to track an issue with a form. It did take a few hours.

You commented on Bill Bell's post over 5 years

Finally figured it out after using Chrome's inspector. Adding following to my override.css fixed it.

    .tabs-content > .content.active {
      width: 100%; }

You commented on Bill Bell's post over 5 years

I have been working on this some more. I traced the CSS using firebug and it seems it imposes a box-sizing of 971px. However, if I add a long p tag it makes the form the total width of the browser. Any ideas to try are appreciated. This is holding me up from moving to F5.

<body>
    <form id="tripOffice">
        <div>
            <dl class="tabs" data-tab>
                <dd class="active"><a href="#officeTab" id="officePnl">Trip Office</a></dd>
                <dd><a href="#woTab" id="woPnl">Work Orders</a></dd>
                <dd><a href="#custTab" id="custPnl">Customers</a></dd>
                <dd><a href="#contTab" id="contPnl">Contacts</a></dd>
                <dd><a href="#equipTab" id="equipPnl">Equipment</a></dd>
                <dd><a href="#specTab" id="specPnl">Spec</a></dd>
                <dd><a href="#resultsTab" id="reResultsPnl">Results</a></dd>
                <dd><a href="#otherTab" id="otOtherPnl">Other</a></dd>
                <dd><a href="#other2Tab" id="o2Other2Pnl">Other 2</a></dd>
                <dd><a href="#searchTab" id="srSearchPnl">Search</a></dd>
            </dl>
            <div class="tabs-content">
                <div class="tabs active" id="officeTab">
                </div>
                <div class="content" id="custTab">
                </div>
                <div class="content" id="contTab">
                    <div class="row">
                        <p>Third panel content goes here. Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <div class="small-2 columns">
                            <label for="coCustLookup" class="right inline">Customer Lookup</label>
                        </div>
                        <div class="small-10 columns">
                            <input type="text" id="coCustLookup" placeholder="Enter first 2 characters">
                        </div>
                    </div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content