বুটস্ট্র্যাপ সহ ফিল্ডসেট লেজেন্ড ব্যবহার করুন

Question

আমি আমার JSPপৃষ্ঠার জন্য বুটস্ট্র্যাপ ব্যবহার করছি ।

আমি ব্যবহার করতে চান <fieldset>এবং <legend>আমার ফর্ম জন্য। এটি আমার কোড।

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label input-label" for="startTime">Start :</label>
        <div class="controls bootstrap-timepicker">
            <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

সিএসএস হ'ল

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
}

আমি এইভাবে আউটপুট পাচ্ছি

আমি নিম্নলিখিত পদ্ধতিতে আউটপুট চাই

আমি যোগ করার চেষ্টা করেছি

border:none;
width:100px;

থেকে legend.scheduler-borderCSS এ। এবং আমি প্রত্যাশিত আউটপুট পাচ্ছি। তবে সমস্যাটি হ'ল আমি <fieldset>অন্য ক্ষেত্রের জন্য আরও একটি যুক্ত করতে চাই । সময় যে কিংবদন্তি পাঠ্যের প্রস্থ যেমন চেয়ে চেয়ে lengthier হয় একটি সমস্যা 100px।

আমি উল্লিখিত মত আউটপুট পেতে আমি কি করব? (কিংবদন্তির পাঠ্যটি আঘাত না করে)

Comments

আপনার ভাগ করা কোডটি দুর্দান্ত কাজ করছে বলে মনে হচ্ছে। এখানে একটি ফ্রিডল

— মেন্নো

@ অ্যাকিলো আপনার ফিডল বুটস্ট্র্যাপ ব্যবহার করছে না।

— জেমস ডোনেলি

@ জেমসডোনালি এটিকেও লক্ষ্য করেছেন যে এটি বুটস্ট্র্যাপের কারণে ঘটে;)

— মেনো

আমি মনে করি আপনার বুটস্ট্র্যাপের প্যানেলটি ব্যবহার করা উচিত। এটির ক্ষেত্রে ফিল্ডসেট এবং কিংবদন্তির মতো একই রকম আচরণ রয়েছে তবে আরও স্টাইলিশ।

— চন্দ্র দেশিয়াওয়ান

Answer 1

এর কারণ ডিফল্টরূপে বুটস্ট্র্যাপ legendউপাদানটির প্রস্থকে 100% এ সেট করে sets আপনি legend.scheduler-borderএটি ব্যবহার করেও পরিবর্তন করে এটি ঠিক করতে পারেন:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

জেএসফিডেলের উদাহরণ ।

আপনার স্টাইলিংকে ওভাররাইড করে বুটস্ট্র্যাপ প্রতিরোধ করতে বুটস্ট্র্যাপের পরে আপনার কাস্টম স্টাইলশিট যুক্ত হচ্ছে তাও আপনাকে নিশ্চিত করতে হবে - যদিও আপনার স্টাইলগুলির উচ্চতর সুনির্দিষ্টতা থাকতে হবে।

margin-bottom:0;কিংবদন্তি এবং বিভাজকের মধ্যে ফাঁক হ্রাস করতে আপনি এটিতে যুক্ত করতেও পারেন ।

Comments

এফটিআর: আমার জন্য বুটস্ট্র্যাপ ৩.৩..6 এটিকে একটি সেটও সেট margin-bottom: 20px;করে legend, এটি এটি লাইনে রাখার পরিবর্তে ফিল্ডসেট সীমানার উপরে ঠেলে দেয়। margin-bottom: 0;কাস্টমটি অন সেট করা legend.scheduler-borderযা সহজেই স্থির হয়।

— dtk

Answer 2

বুটস্ট্র্যাপ 4 এ ফিল্ডসেটে সীমানা থাকা খুব সহজ যা কিংবদন্তীর সাথে মিশে। এটি অর্জনের জন্য আপনার কাস্টম সিএসএসের দরকার নেই, এটি এটির মতো করা যেতে পারে:

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

যা দেখতে এরকম দেখাচ্ছে:

Comments

— ডাব্লু

Answer 3

আমার এই সমস্যাটি ছিল এবং আমি এইভাবে সমাধান করেছি:

fieldset.scheduler-border {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.scheduler-border {
    width: auto !important;
    border: none;
    font-size: 14px;
}

Answer 4

আমার অন্যরকম দৃষ্টিভঙ্গি ছিল, এটিকে আরও সমৃদ্ধ দেখানোর জন্য বুটস্ট্র্যাপ প্যানেল ব্যবহৃত হয়েছিল। কাউকে সাহায্য করতে এবং উত্তরটি উন্নত করার জন্য।

.text-on-pannel {
  background: #fff none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 3px 5px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #337ab7;
  border-radius: 8px;
}

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-body">
      <h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
      <p> Your Code </p>
    </div>
  </div>
  <div>

এটি নীচের চেহারা দেবে।

দ্রষ্টব্য: বিভিন্ন শিরোনামের আকার ব্যবহার করার জন্য আমাদের স্টাইলগুলি পরিবর্তন করতে হবে।

Answer 5

কেবলমাত্র উপরের সমস্ত সঠিক উত্তর সংক্ষেপে সংক্ষেপে চেয়েছিলেন। কারণ কোন উত্তরটি সমস্যার সমাধান করে এবং পর্দার আড়ালে কী চলছে তা নির্ধারণ করতে আমাকে অনেক সময় ব্যয় করতে হয়েছিল।

বুটস্ট্র্যাপের সাথে ফিল্ডসেটের দুটি সমস্যা রয়েছে বলে মনে হচ্ছে:

1. bootstrapপ্রস্থকে সেট করে legendযেমন 100%। এজন্য এটি উপরের সীমানাকে ওভারলে করে fieldset।
2. bottom borderজন্য একটি আছে legend।

সুতরাং, এটিকে ঠিক করার জন্য আমাদের যা যা করা দরকার তা হ'ল নীচে স্বয়ংক্রিয়ভাবে কিংবদন্তি প্রস্থ সেট করা হয়েছে:

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}